今回はIntelliJを使ってSpringBootで簡単なWebアプリケーションを作成したいと思います。
IntelliJとは
IntelliJとは、2001年にチェコにあるJetBrainsが開発したIDEのことで、IDEとはソースコードエディタ、コンパイラ、デバッガなど、プログラミングに必要なツールが一つのインターフェースで統合して扱えるようなソフトウェアのことを指します。
インストール手順
こちらからToolboxの公式ページにアクセスし、ダウンロードします。Toolboxを起動後、「IntelliJ IDEA Community Edittion」を選択し、インストールします。Spring Initializrを使ってプロジェクトを新規作成する
Spring Initializrとは、Spring Bootプロジェクトを新規作成することができるツールです。
そのツールでプロジェクトを作成して、IntelliJ IDEAでインポートする、という流れで作成します。
以下のリンクを押し、Spring Initializrのサイトに行きます。
以下の画像のように設定をしたら、
「GENERATE」をクリックし、zipファイルがダウンロードされたら、任意の場所にzipファイルを解凍し、移動をします。
その後、IntelliJを起動し、projectsを選択し、「build.gradle」をクリックします。
その後、src/main/java/com/example/practice/PracticeAplicationを選択し、以下の画像のように「Debug PracticeAplication」を起動します。
起動すると、以下のように表示をされます。
以下のログを見てみると、「8080」とあるので、http://localhost:8080
をクリックすると以下(下記の画像)のように表示されます。
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)
Webアプリを作成するための事前知識
MVCモデルとは
MVCとはWebアプリケーションの開発におけるアーキテクチャ(設計思想)のひとつです。 M(model)、V(View)、C(Controller)に分けて、コーディングをしていくという流れになります。 JavaのSpring Bootに限らず、PythonのDjangoやPHPのLaravelといった様々な言語のフレームワークで使われています。
下記の画像がMVCモデルの参考図になります。
Model
Modelは主にデータベースとのやり取りを行い、データベースから取得したデータをプログラムで使いやすいように取り出し変換するものです。
Spring Bootでは、普通のJavaオブジェクトやEntityが該当します。
View
ViewはユーザーとWebサイトとのインターフェイスです。
インターフェイスはユーザーが「Webサービスを利用したい」というときにシステムは「見た目や使いやすさを提供する」必要があります。
その接点を担うのはインターフェイスです。
サーバーサイドで処理されたデータを動的にユーザーに表示するための処理やWebブラウザに対してHTMLを表示します。
Spring Bootでは、Thymeleaf(タイムリーフ)を使ったHTMLテンプレートファイルが、これに該当します。
Controller
ControllerはModelとViewのそれぞれの処理をアプリとして連携させるために、司令塔や橋渡し役という役割を担います。 ユーザーが入力した情報に基づいて、モデルへはデータを取り出す指示します。 また、ビューにはモデルで取り出したデータを元に画面を表示する指示を出します。
多くのプロジェクトでMVCを利用されており、作業効率、管理効率が向上すること、誰から見てもわかりやすいプログラムになります。
「リクエスト」と「レスポンス」という考え方
画面を表示するには、「リクエスト」と「レスポンス」という考え方が大事です。
リクエストはクライアントからサーバーに対して情報を要求するということ。
レスポンスはサーバーからクライアントに対して返す情報のこと。
MVCモデルの参考図では、ブラウザがリクエストとして、「http://localhost:8080」にリクエストを出し、サーバが処理をしてレスポンスを返し、「<h1>Hello World</h1>」とブラウザに表示です。
Spring Bootでリクエストの受信とレスポンスを返信するクラスをControllerといいます。
Spring BootでWebアプリケーションを作るというのは、「リクエストとControllerを紐付け、Controllerでレスポンスを生成することです。
では、実際に「http://localhost:8080」にリクエストを出し、サーバが処理をしてレスポンスを返し、「<h1>Hello World</h1>」とブラウザに表示するという処理を作成します。
今回の作成するファイルの構成
ファイル構成(クリックして展開)
.
├── .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
まずは「com/example/practice」の階層へ行き、下記の画像のようにNew→Java Classと選択し、「web.indexController」と入力します。
そうすると、下記の画面が表示されます。
以下が「http://localhost:8080」にリクエストを出し、サーバが処理をしてレスポンスを返し、「<h1>Hello World</h1>」とブラウザに表示するという処理のコードです。
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>";
}
}
「Debug PracticeAplication」を再度実行すると、「http://localhost:8080」に「Hello World!」と表示される。
テンプレートエンジン
indexController.javaのコードでは、Javaのコード上にHTMLが直接記述されてしまっており、ページが変更されるたびにJavaのコードを変更する必要があるため、UIとロジックの境界が曖昧となっています。この問題を解決するためにテンプレートエンジンを使用します。
テンプレートエンジンとは、テンプレートとデータから動的に文字を生成する仕組みのことをいいます。
Spring BootではテンプレートエンジンにThymeleaf（タイムリーフ)が使われることが多く、今回もThymeleafを使います。
Thymeleafを設定するために、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」を作成し、以下のコードを作成しましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>業務用アプリケーション</title>
</head>
<body>
<h1>業務用アプリケーション</h1>
</body>
</html>
それに伴って、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";
}
}
実行をし直すと、下記の画像が表示されます。
Spring Devtoolsを使ってプロジェクトの自動更新を有効にする方法
先ほどまでは、実行し直しながら、開発をしていたが、Spring Bootでは自動で変更内容を表示しなおしてくれるツールがあるので、Spring Devtoolsを導入するのもひとつです。
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を押します。
Build project automaticallyにチェックを入れる。
Allow auto-make to start even if developed application is currently runningにチェックを入れます。
次に、application.propertiesに、下記のコードを追加すれば自動で更新をされるようになります。
spring.thymeleaf.prefix=file:src/main/resources/templates/
まとめ
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モデルの理解を深めることができたと思います。