0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Springbootで、Webアプリを3分で構築した話。

Last updated at Posted at 2023-04-26

下記動画は、今まで読んだどの書籍よりも、Springbootの説明が分かりやすいと思うので、紹介します!
https://www.youtube.com/watch?v=8UERVg5c_HM

ただ、こちらの動画では、IDEとして、Eclipseを利用しております。
現在、人気急上昇中のIntelliJを利用して、同じWebアプリシステムを、3分で構築します! 

  1. Spring initializrを設定。
    https://start.spring.io/
    F1.png
    それぞれのDependenciesは、動画の通りです。Lombokでアノテーションを利用できます。Thymeleafで、Htmlファイルの設定が簡単にできます。
    「Generate」をクリックすると、アプリがローカルPCにDownloadされます。(ファイル名は、"demo")

2. IntelliJアプリを開いて、"Open"をクリック。
image.png

3.  先程、作成した"demo"ファイルを選んで、右下の"Open”をクリック。 F3.png

4. Javaアプリの開発に進みます。
src/main/java/com.example.demoを右クリックして、New→Java Claseと進みます。
image.png

5. Class名は、"Fortune"と設定します。(名前は何でも良いです。)
image.png

6. Fortuneアプリは、既に雛形が構築されております。ここにJavaのコードを書いていきます。
image.png

7. アノテーションを設定します。
@Controllerアノテーションを設定します。
image.png

次に、@RequestMappingアノテーションを設定します。
image.png

こんな感じのコードを書きます。
image.png

記載するコードの全体は、こちら。
簡単に解説すると、0と1の間の少数をランダムに選択して、その数字が、0.75以上なら大吉を表示するページへと誘導。(出現率25%)
0.5以上で、0.75未満なら、中吉表示ページに誘導と言う、単純なWebアプリです。
0.1以上で、0.5未満なら小吉。0.1未満なら、凶を表示。

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class Fortune {
    @RequestMapping("/fortune")
    public String start(){
        double fn=Math.random();
        if(fn>=0.75) {
            return "greatFortune.html";
        } else if (fn>=0.5){
            return "middleFortune.html";
        } else if (fn>=0.1){
            return "smallFortune.html";
        } else{
            return "misFortune.html";
        }
    }
}

8. 続いて、HTMLのテンプレートを作成します。
src/resources/templates を右クリックして、大吉表示ページ、中吉表示ページ、小吉表示ページ、凶表示ページの4枚を書いていきます。
(尚、このtemplatesフォルダが表示されるのは、1のDependenciesで、Thymeleafを選択したからです。)
image.png

まず、大吉表示ページを書いていきます。
image.png
image.png

大吉用ページをコピペして、中吉用ページ、小吉ページ、凶ページをつくります。(合計4枚です。)
image.png

9. これで設定はお終い。
プログラムをビルドします。(ビルドと言うのは、プログラムコードを実行可能なファイルに書き換える事です。)
右ペインのGradle(代表的なビルドシステム)→ demo/Tasks/build/buildを右クリック。Run "demo[build]"を選択。(自動的にBuildされます。)
image.png

10. Buildすると、"jarファイル"が作成されております。
左ペインのdemo/build/libs直下に、Jarファイルができているのが確認できます。(Jarファイルというのは、ZIPみたいな圧縮ファイルで、ここにプログラムの実行ファイルが「固まって」おります。)
image.png

11.
このjarファイルを動かしてみます。
IntelliJには、下部でTerminalを起動できるので、ここからアクセスします。
image.png
コマンドは、"java -jar demo-0.0.1-SNAPSHOT.jar" 。(jarファイルが存在するディレクトリーでコマンドを打ちます。)
image.png

12.
正常に動くとこんな感じです。(Springと言うJavaのフレームワークが動いている事が確認できます。)
image.png

13.
動作確認をします。
ローカルPC(Mac M1)で、ブラウザを立ち上げ、"http://localhost:8080/fortune"にアクセス。
image.png

成功です。
リフレッシュすると、大吉と中吉、小吉、凶がランダムに入れ替わります。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?