まだまだ作成途中です。
随時ブラッシュアップしていくので良案もらえると励みになります。
目次
- Springとは
- 開発ツールのインストール
- プロジェクトの作成
- SpringでWEB画面を作成してみよう
- 作成した画面をWEB画面を表示してみよう
- Modelで取得した値を表示してみよう
1.Springとは
Springとは、Javaのフレームワークの一種です。
フレームワークはJavaを開発する際の土台として機能するソフトウェアのことを指します。
要は拡張機能です。
フレームワークを使用することにより、開発コストの削減、バグの削減、チーム内での考えを統一できるメリットがあります。
Springでは主にMVCモデルを使用しており、MVCモデルをベースに開発を進めていきます。
MVCモデルにおけるMとは
MはModel(処理)の略称で、WEB画面表示時に、動的に表示させたい値や、項目のことです。
プログラムを通して表示させたい値はModelで取得、使いやすいように加工する処理を記述する際に使用します。
例えば、DBに保存されている値を取得する時にはModelを通してから取得し、表示したい項目を加工してからWEB画面へ表示させる役割を持っています。
MVCモデルにおけるVとは
VはView(画面)の略称で、WEB画面表示に必要な、HTML、CSS、JSのことです。
後述する、ThymeleafはWEB画面とSpringを紐づけるテンプレートエンジンなので、Viewに当てはまります。
今見ているこの画面もHTMl、CSS、JSを使用して表示されているのでViewに該当します。
MVCモデルにおけるCとは
CはController(制御)の略称で、URLを受け取り、Modelで動的に表示したい値を取得し、加工した値をViewに渡すという橋渡しの役割を担っている縁の下の力持ちです。
2.開発ツールのインストール
開発ツールとは、システムの開発に必要な機能を持ったアプリケーションを指します。
開発をするために必要な補助機能が備わっているため、これがないと始まりません、
以下のサイトがわかりやすく解説しているので、参考にインストールしてみましょう。
3.プロジェクトの作成
開発ツールのインストールができたら次にプロジェクトの作成をしていきます。
２章でインストールした開発ツール(以下STS)を開き、図1の新規Springスタータープロジェクトの作成(赤枠内)をクリックします。
クリックすると、図２の画面が表示されます。
今回は何も変更せずに次へをクリックします。
次へをクリックすると図３が表示されるので、左下の一覧の中からテンプレート・エンジン>Thymeleafを選択し、次へをクリックします。
次の画面が表示されたら完了をクリックします。
しばらく待ち、図４のように、パッケージ・エクスプローラーにdemoというプロジェクトが表示されたらプロジェクトの作成完了です。
次の章ではWeb画面の実装をしてみましょう。
図１
クリックで展開
図２
クリックで展開
図３
クリックで展開
図４
クリックで展開
4 SpringでWEB画面を表示してみよう
プロジェクトの作成が完了したらついにプログラミングのお時間です。
この章では、MVCモデルのViewとControllerを使用します。
まずは、Viewに当たる、HTMLを作成していきます。
１．図５のようにパッケージエクスプローラーのdemo>src/main/resource> 右クリック >新規>ファイルを順番にクリックしていきます。
２・クリック後、図６のようにファイル名欄にindex.htmlを入力し完了をクリックします。
図5
クリックで展開
図6
クリックで展開
３．完了をクリック後、index.html作成され、表示されるので、以下のコードを参考にし、index.htmlへ記述していきます。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div>
<span>Hellow Horld!</span>
</div>
</html>
ここで重要なのは、html要素ににxmlns:th="http://www.thymeleaf.org"を挿入することです。
xmlns:thを使用することにより、Thymeleaf特有の属性を使用できるようになります。
これで一旦、VIewの作成は完了です。
次に、Controllerに当たる、Javaを作成していきます。
１．図７のようにパッケージエクスプローラーのdemo>src/main/java> 右クリック >新規>ファイルを順番にクリックしていきます。
２・クリック後、図7のように名前欄にDemoControllerを入力し完了をクリックします。
図7
クリックで展開
図8
クリックで展開
３．完了をクリック後、DemoController.java作成され、表示されるので、以下のコードを参考にし、DemoController.javaへ記述していきます。
package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class DemoController {
@GetMapping("/")
public String index() {
return "index";
}
}
ここで重要なのは、3つあり、
6行目の @Controller
8行目の @GetMapping("/")
9行目の public String index() { と11行目の return "index"; のセット
の3点です。
@Controller
このJavaがMVCモデルのController であることを示しており、URLからの接続を管理する役割を担っています。
@GetMapping("/")
どのURLが来たら、その直下に記述されているメソッドを処理するかを判定する管理を担っています。
@GetMapping("/") の場合、()内の / (カレントパス)で接続された時に直下のメソッドを処理する。
というURLとメソッドのマッピングをしています。
public String index() { と return "index";
ここが一番重要です。
9行目の public String index() { だけ見ると、index という文字列を返しているように見えますが、@Controller と組み合わせることにより、returnしている文字列と同じ名前のHTMLをWEB画面に描画させる機能があります。
これにより、 / (カレントパス)で接続した場合に、先ほど作成したindex.htmlを描画するという処理ができます。
5 作成した画面をWEB画面を表示してみよう
ここまで作成できたら、Springを起動して実際にWEB画面を表示してみましょう。
図９のようにBootダッシュボードのlocal> demo[devlop]> 右クリック >(再)起動を順番にクリックしていきます。
demo[devlop]の左側のアイコン化 ⇧になった後、demo[devlop]をダブルクリックします。
ダブルクリック後、図１０の画面が表示されたら、ViewとControllerのマッピングが成功しています。
これで、４章までに作成したプログラムが正常に表示できました。
次の章ではModelを使用して、WEB画面に動的に項目表示をします。
図9
クリックで展開
図10
クリックで展開
Modelで取得した値を表示してみよう
Coming Soon...