Spring BootのWebアプリケーションの基本①  ~IntelliJの使い方とMVCモデルの概要~

今回はIntelliJを使ってSpringBootで簡単なWebアプリケーションを作成したいと思います。

<h2>IntelliJとは</h2>

IntelliJとは、2001年にチェコにあるJetBrainsが開発したIDEのことで、IDEとはソースコードエディタ、コンパイラ、デバッガなど、プログラミングに必要なツールが一つのインターフェースで統合して扱えるようなソフトウェアのことを指します。

<h3>インストール手順</h3>
<a href="https://www.jetbrains.com/ja-jp/toolbox-app/">こちら</a>からToolboxの公式ページにアクセスし、ダウンロードします。Toolboxを起動後、「<b>IntelliJ IDEA Community Edittion</b>」を選択し、インストールします。

<h2>Spring Initializrを使ってプロジェクトを新規作成する</h2>

Spring Initializrとは、Spring Bootプロジェクトを新規作成することができるツールです。

そのツールでプロジェクトを作成して、IntelliJ IDEAでインポートする、という流れで作成します。
以下のリンクを押し、Spring Initializrのサイトに行きます。

https://start.spring.io/


以下の画像のように設定をしたら、
![スクリーンショット 2023-08-03 8.15.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782718/c3bc2769-873d-aa9f-fddd-c51d0915e3e9.png)


「<b>GENERATE</b>」をクリックし、zipファイルがダウンロードされたら、任意の場所にzipファイルを解凍し、移動をします。

その後、IntelliJを起動し、projectsを選択し、「build.gradle」をクリックします。

![スクリーンショット 2023-08-03 8.27.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782718/736d8c0f-136c-b15c-ca41-465abaf921ac.png)

その後、src/main/java/com/example/practice/PracticeAplicationを選択し、以下の画像のように「Debug PracticeAplication」を起動します。


![スクリーンショット 2023-08-05 7.59.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782718/8ef204bc-66db-66f3-7e9e-4176ef1f4073.png)

起動すると、以下のように表示をされます。
以下のログを見てみると、「8080」とあるので、http://localhost:8080　
をクリックすると以下(下記の画像)のように表示されます。
<pre>2023-08-05T08:00:39.351+09:00  INFO 42300 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 8080 (http)</pre>

![スクリーンショット 2023-08-05 8.00.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782718/3b377637-842d-d276-1bc7-253f928aaabc.png)




![スクリーンショット 2023-08-05 8.10.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782718/6023e7a0-9824-bfb2-a7c7-72acda4b7c5b.png)





<h2>Webアプリを作成するための事前知識</h2>

<h3>MVCモデルとは</h3>
<p>MVCとはWebアプリケーションの開発におけるアーキテクチャ(設計思想)のひとつです。
M(model)、V(View)、C(Controller)に分けて、コーディングをしていくという流れになります。
JavaのSpring Bootに限らず、PythonのDjangoやPHPのLaravelといった様々な言語のフレームワークで使われています。</p>

下記の画像がMVCモデルの参考図になります。
![スクリーンショット 2023-08-05 9.18.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782718/8fb30a9b-6125-0b12-e42b-9a79010e0d7c.png)
<h4>Model</h4>

Modelは主にデータベースとのやり取りを行い、データベースから取得したデータをプログラムで使いやすいように取り出し変換するものです。
Spring Bootでは、普通のJavaオブジェクトやEntityが該当します。

<h4>View</h4>

ViewはユーザーとWebサイトとのインターフェイスです。
インターフェイスはユーザーが「<b>Webサービスを利用したい</b>」というときにシステムは「<b>見た目や使いやすさを提供する</b>」必要があります。

その接点を担うのは<b>インターフェイス</b>です。

サーバーサイドで処理されたデータを動的にユーザーに表示するための処理やWebブラウザに対してHTMLを表示します。
Spring Bootでは、Thymeleaf(タイムリーフ)を使ったHTMLテンプレートファイルが、これに該当します。

<h4>Controller</h4>
<p>ControllerはModelとViewのそれぞれの処理をアプリとして連携させるために、司令塔や橋渡し役という役割を担います。
ユーザーが入力した情報に基づいて、モデルへはデータを取り出す指示します。
また、ビューにはモデルで取り出したデータを元に画面を表示する指示を出します。</P>

多くのプロジェクトでMVCを利用されており、作業効率、管理効率が向上すること、誰から見てもわかりやすいプログラムになります。

<h3>「リクエスト」と「レスポンス」という考え方</h3>

画面を表示するには、「リクエスト」と「レスポンス」という考え方が大事です。

リクエストはクライアントからサーバーに対して情報を要求するということ。
レスポンスはサーバーからクライアントに対して返す情報のこと。

MVCモデルの参考図では、ブラウザがリクエストとして、「<a>http://localhost:8080</a>」にリクエストを出し、サーバが処理をしてレスポンスを返し、「```<h1>Hello World</h1>```」とブラウザに表示です。

Spring Bootでリクエストの受信とレスポンスを返信するクラスをControllerといいます。
Spring BootでWebアプリケーションを作るというのは、「リクエストとControllerを紐付け、Controllerでレスポンスを生成することです。

では、実際に「<a>http://localhost:8080</a>」にリクエストを出し、サーバが処理をしてレスポンスを返し、「```<h1>Hello World</h1>```」とブラウザに表示するという処理を作成します。

<b>今回の作成するファイルの構成</b>
<details>
<summary>ファイル構成(クリックして展開)</summary>
<pre>
<code>
.
├── .gradle
├── .idea
├── build
├── gradle
├── src
│   ├── main
│   │   ├── java
│   │   │   └── com
│   │   │       └── example
│   │   │           └── practice 
│   │   │               ├── PracticeApplication.java
│   │   │               └── web
│   │   │                   └── indexController.java
│   │   └── resources
│   │       ├── static
│   │       ├── templates
│   │       └── application.properties
│   └── test
├── .gitignore
├── build.gradle
├── gradlew.bat
├── HELP.md
└── settings.gradle
</code>
</pre>
</details>

まずは「com/example/practice」の階層へ行き、下記の画像のようにNew→Java Classと選択し、「web.indexController」と入力します。

![スクリーンショット 2023-08-05 14.30.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782718/85622f2c-fb88-63ca-2ca1-1d0aba68f6cb.png)

そうすると、下記の画面が表示されます。

![スクリーンショット 2023-08-05 14.34.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782718/f50b2ddb-7fb0-5240-59c6-f8551f899e5f.png)

以下が「<a>http://localhost:8080</a>」にリクエストを出し、サーバが処理をしてレスポンスを返し、「`<h1>Hello World</h1>`」とブラウザに表示するという処理のコードです。

```Java:indexController.java
package com.example.practice.web;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

//Spring Boot はそのクラスを Controller として認識させるためにアノテーションを記述します。
@Controller
public class indexController {
    @GetMapping
    //メソッドとGETの処理を行うURLを紐づける役割を担う役割
    //何もつけない場合はトップページを表示する
    @ResponseBody
    //@ResponseBodyというアノテーションをメソッドに記述すると、
    // 戻り値がそのままレスポンスのボディの内容になる。
    public String index() {
        return "<h1>Hello World!</h1>";
    }
}
```

「<b>Debug PracticeAplication</b>」を再度実行すると、「<a>http://localhost:8080</a>」に「Hello World!」と表示される。

![スクリーンショット 2023-08-05 14.57.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782718/84486350-131b-d30f-bc03-e91608aff775.png)

<h2>テンプレートエンジン</h2>
indexController.javaのコードでは、Javaのコード上にHTMLが直接記述されてしまっており、ページが変更されるたびにJavaのコードを変更する必要があるため、UIとロジックの境界が曖昧となっています。

この問題を解決するために<b>テンプレートエンジン</b>を使用します。
テンプレートエンジンとは、テンプレートとデータから動的に文字を生成する仕組みのことをいいます。

Spring BootではテンプレートエンジンにThymeleaf（タイムリーフ)が使われることが多く、今回もThymeleafを使います。

Thymeleafを設定するために、build.gradleに以下を追加する。

```gradle:　build.gradle
dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}
```

次にsrc/main/resources/templatesに「index.html」を作成し、以下のコードを作成しましょう。

```html:index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>業務用アプリケーション</title>
</head>
<body>
<h1>業務用アプリケーション</h1>
</body>
</html>
```
それに伴って、indexController.javaも以下のように変更します。


```java:indexController.java
package com.example.practice.web;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class indexController {
    @GetMapping
    public String index() {
        return "index";
    }
}
```

実行をし直すと、下記の画像が表示されます。

![スクリーンショット 2023-08-06 10.22.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782718/56662853-1ead-e77f-7362-f2a44453519c.png)

<h2>Spring Devtoolsを使ってプロジェクトの自動更新を有効にする方法</h2>

先ほどまでは、実行し直しながら、開発をしていたが、Spring Bootでは自動で変更内容を表示しなおしてくれるツールがあるので、Spring Devtoolsを導入するのもひとつです。

build.gradleに以下の依存関係を追加します。

```Java:build.gradle
dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-web'
    developmentOnly 'org.springframework.boot:spring-boot-devtools'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}
```

次に「IntelliJ IDEA」を押し、Settingsをクリックし、「Build,Execution,Deployment」を押し、Compilerを押します。

![スクリーンショット 2023-08-06 10.30.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782718/3201dae7-2342-49c6-6023-a605e25687b4.png)

Build project automaticallyにチェックを入れる。

![スクリーンショット 2023-08-06 10.30.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782718/a7b5ebb5-3fa5-2626-34ea-3aed3e578d64.png)

Allow auto-make to start even if developed application is currently runningにチェックを入れます。

![スクリーンショット 2023-08-06 10.31.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782718/7dde6db8-1696-4a33-92ec-d0aa0884b6ad.png)

次に、application.propertiesに、下記のコードを追加すれば自動で更新をされるようになります。


```Java:application.properties
spring.thymeleaf.prefix=file:src/main/resources/templates/
```
<h2>まとめ</h2>
Spring BootとIntelliJを使用してWebアプリケーションを作成する手順を簡単に説明しました。

簡単におさらいをすると、IntelliJはプログラミング用の統合開発環境（IDE）であり、2001年に開発されました。

次に、Spring Initializrを利用して新しいプロジェクトを作成しIntelliJにインポートするとt、プロジェクトの骨格が整います。

作成したプロジェクトで、MVCモデル（Model-View-Controller）を導入します。

これは、アプリケーションの構造を整理するためのアーキテクチャです。

Modelはデータの処理、Viewは表示、Controllerは処理の制御を担当します。Thymeleafと呼ばれるテンプレートエンジンを使って、JavaコードをHTML内に埋め込むことなく、動的な表示を行います。

以上の手順に従うことで、簡単なWebアプリケーションをSpring BootとIntelliJを使って作成することができます。このプロセスを通じて、IDEの使い方やMVCモデルの理解を深めることができたと思います。