[Java]STSの導入からローカルホストでの動的ページの確認までの流れ(3/3)

前回の続きです。

記事は3つに分割しています。
[1. MVCモデルの説明](https://qiita.com/aki0141/items/5337f16242a99a02810f)
[2. STSの導入からPleiadesによる日本語化まで](https://qiita.com/aki0141/items/26f780da65c26924e740)
**3. プロジェクトの作成からローカルホストでページを確認するまで　←今ここ**
となっています。

今回はプロジェクトの作成からローカルホストでページを確認するまでとなります。

#プロジェクトの作成
今回はSpring-Bootでプロジェクトを作成します。一からSpringアプリケーションを作成する場合、たくさんの設定や機能を自分で組み上げなければいけませんが、Spring-Bootではその辺りを自動で行ってくれます。

STSのメニューからファイル>新規>Springスターター・プロジェクトと進みます。
<img width="600" alt="project01" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670074/abf82376-499a-c829-db69-001ee1e864ca.png">

プロジェクトの作成ウィンドウが表示されるので、型の設定をMavenからGradleに、パッケージはJarからWarに変更します。
GradleはBuildshipが2.xか3.xか選べますが、基本的には3.xで良いと思います。
Gradleはビルドを自動化してくれるシステムです。.gradleファイルにビルド時の設定を記載すると、その設定の通りにWar(Jar)ファイルをビルドしてくれます。
自動化システムはMavenやAntといったものもあります。
<img alt="project02" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670074/026a0a13-7c78-442c-8d01-39a4ed29a826.png">

それ以外は特に変更せず次へ。
依存関係の設定画面が出てきますのでThymeleafとSpring Webを選択。
<img alt="project03" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670074/5d5e5ce8-b5df-fbff-e528-0267085d2cf4.png">

完了ボタンを押すことで作成ウィンドウが閉じ、最初の画面に戻ると思います。
しばらく待つと左のパッケージエクスプローラーにプロジェクトが作成されます。今回であれば大きく変えたところはないので"demo"という名称になっているはずです。
<img width="600" alt="project04" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670074/9ff25710-8e6f-3253-1115-66eeae87a1ab.png">

#HTMLファイルの作成
次に表示するHTMLファイルを作成します。
といってもコードを一から書く必要はありません。STSには各種ファイルのテンプレートが用意されています。
プロジェクトツリーの中からsrc/main/resourcesというフォルダを開くと、中にtemplatesというパッケージがあるかと思います。
そちらを右クリックして新規>その他と進みます。
<img width="600" alt="project05" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670074/11caaffd-5031-2bcb-1c3d-ab0302bcfa1e.png">

すると新規作成のためのウィンドウが表示されますので、その中からWeb>HTMLファイルを選択して次へ。
<img alt="project06" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670074/06c75040-6bfb-51e7-6a18-73b49ef91627.png">

親フォルダを選択する画面に移りますがそちらは触らず、ファイル名だけデフォルトのNewFile.htmlからindex.htmlに変更します。そして完了ボタンをクリック。
<img alt="project07" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670074/c4b82ae2-25e3-e7be-456d-f76e79d62cec.png">

するとtemplatesの直下にindex.htmlファイルが作成されます。ページの表示に必要な部分は全て最初から書き込まれていますので、追加で"Hello, World!"と表示されるようにしておきましょう。
<img width="600" alt="project08" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670074/7b468b3b-1c56-5833-e245-1cc0fc1bba1c.png">

最後にプロジェクトを右クリックして実行>SpringBootAppを選択します。
<img width="600" alt="project09" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670074/441a5379-e420-1267-8993-2a2c39b7fdd9.png">

下のコンソール画面でいくつかログが流れていった後に、"Started DemoApplication in xxx seconds"と表示されていれば無事にローカルホストが立ち上がっているはずです。
<img width="600" alt="project10" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670074/deb5b182-48ed-981c-87ec-1d93e60849e8.png">

#ページの確認
ページを確認するためには、お好きなブラウザのアドレスバーに
http://localhost:8080
と打ち込みます。
<img width="600" alt="project11" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670074/d0b0aa13-fc2e-c8a8-8b2a-af4af3e0bfb4.png">
ちゃんと表示できていますね。

ローカルホストはそのままだと立ち上がったままなので、ページを確認したら停止ボタン(画像の青い丸)を押して停止させましょう。上と下のどちらのボタンを押しても問題ありません。
<img width="600" alt="project12" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670074/60ddeb1d-266c-12b3-c4c3-4d95a026c050.png">

以上がSTSを導入してWebページを表示するまでの簡単な流れになります。
本当はライブラリを追加したりプロパティを変更したりとやらなければならないことがありますし、データベースへの接続も必要ですので、また今度記事にしたいと思います。