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

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

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

1. Spring initializrを設定。
https://start.spring.io/
![F1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/5aed4b42-a7fe-368a-009b-cb3781225fd5.png)
それぞれのDependenciesは、動画の通りです。Lombokでアノテーションを利用できます。Thymeleafで、Htmlファイルの設定が簡単にできます。
「Generate」をクリックすると、アプリがローカルPCにDownloadされます。（ファイル名は、"demo"）

２. IntelliJアプリを開いて、"Open"をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/c76779dc-53e3-97f8-bcb2-5500ae8c156e.png)

3.　　先程、作成した"demo"ファイルを選んで、右下の"Open”をクリック。　![F3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/c2801aa6-7ea8-b3e8-4cc8-514243814b45.png)

４. Javaアプリの開発に進みます。
src/main/java/com.example.demoを右クリックして、New→Java　Claseと進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/069587be-fe14-ae75-011d-a263160a891b.png)

５. Class名は、"Fortune"と設定します。（名前は何でも良いです。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/558eac1c-8f89-b5e8-c87a-7a5484449dc2.png)

６. Fortuneアプリは、既に雛形が構築されております。ここにJavaのコードを書いていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/1283e8df-dbdc-1ca3-a612-5facb795f573.png)

７. アノテーションを設定します。
＠Controllerアノテーションを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/087b0f9d-3bb7-4486-64f4-4bc86f644020.png)

次に、@RequestMappingアノテーションを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/7238bc88-0b1e-29bb-e66a-f25d0e3667be.png)

こんな感じのコードを書きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/d240e7a6-3ba1-e189-24ba-4538b81c2559.png)


記載するコードの全体は、こちら。
簡単に解説すると、0と１の間の少数をランダムに選択して、その数字が、0.75以上なら大吉を表示するページへと誘導。（出現率２５％）
0.5以上で、0.75未満なら、中吉表示ページに誘導と言う、単純なWebアプリです。
0.1以上で、0.5未満なら小吉。0．１未満なら、凶を表示。
```
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";
        }
    }
}
```

８. 続いて、HTMLのテンプレートを作成します。
src/resources/templates　を右クリックして、大吉表示ページ、中吉表示ページ、小吉表示ページ、凶表示ページの４枚を書いていきます。
（尚、このtemplatesフォルダが表示されるのは、１のDependenciesで、Thymeleafを選択したからです。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/e2632b0c-e73c-868e-52b2-1416c7da5f2c.png)

まず、大吉表示ページを書いていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/8eb59df7-bb83-449b-02cf-062bcd8998e1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/6b5f7cd0-44dd-050d-84c6-9ca3c40dc971.png)

大吉用ページをコピペして、中吉用ページ、小吉ページ、凶ページをつくります。（合計４枚です。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/c9c2afef-d63c-5637-0104-612e05313157.png)

９. これで設定はお終い。
プログラムをビルドします。（ビルドと言うのは、プログラムコードを実行可能なファイルに書き換える事です。）
右ペインのGradle(代表的なビルドシステム）→　demo/Tasks/build/buildを右クリック。Run "demo[build]"を選択。（自動的にBuildされます。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/7110323a-ff35-3a22-1707-d58d04c4c074.png)

１０.  Buildすると、"jarファイル"が作成されております。
左ペインのdemo/build/libs直下に、Jarファイルができているのが確認できます。（Jarファイルというのは、ZIPみたいな圧縮ファイルで、ここにプログラムの実行ファイルが「固まって」おります。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/7e52aec3-4ef0-d4b8-5d93-22fc511f2c03.png)

１１.
このjarファイルを動かしてみます。
IntelliJには、下部でTerminalを起動できるので、ここからアクセスします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/50e5cd56-d93b-fd48-4a99-6440cf622007.png)
コマンドは、"java -jar demo-0.0.1-SNAPSHOT.jar" 。(jarファイルが存在するディレクトリーでコマンドを打ちます。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/a49bb3ee-3462-401e-cd82-5e23a7df417b.png)

１２.
正常に動くとこんな感じです。（Springと言うJavaのフレームワークが動いている事が確認できます。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/d8396f89-ece8-8b95-0c97-9cc5d717a64b.png)

１３. 
動作確認をします。
ローカルPC（Mac　M1）で、ブラウザを立ち上げ、" http://localhost:8080/fortune " にアクセス。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665829/e0fcf492-413a-8e98-75b9-7f208528bb03.png)

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