【初心者向け】MacのVScodeでJava+SpringBootを動かしてみる【#2 実装編】

# #2 ブラウザに「Hello World」を表示させよう！
## はじめに
環境構築編については、下の記事を確認してみてくださいな。


https://qiita.com/gato-kwi666/items/550975604ea092b33a61

今回は、構築した環境でSpringBootをつかってブラウザに「Hello World」していきます！

## ゴール
VScodeとSpringBootを使ってブラウザ上に「Hello World!」と表示させる。

## 実装
### 前提
VScodeに以下の2つの拡張機能がインストール済みであること。
　・Extension Pack for Java
　・Spring Boot Extension Pack
### 1.ブランクプロジェクトの作成
まずはブランクプロジェクトをコマンドパレットから作成します。
このブランクプロジェクト、SpringBootを動かすのに必要な諸々が入ったフレームワークのことです。

:::note information
作成するとこんな感じのフォルダが出来上がります。
![スクリーンショット 2022-12-21 10.44.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2793108/e11c8c67-701e-910e-1a6c-0324156206c9.png)
:::

#### 作成手順
##### Spring Initializeの選択
ショートカットキーの```Ctrl+Shift+P```でコマンドパレットを開き、コマンドを途中まで入力して「>spring Initializr: Create a Maven Project...」選択します。
![スクリーンショット 2022-12-18 15.09.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2793108/424e2118-5aae-2828-5c04-58506062e60c.png)
##### SpringBootのバージョン選択
なんでも良いのですが、今回は一番上のものを選択。
(SNAPSHOTとついているものは最新版ではありますが、今回は安定版である**ついていない**ものを選びます。)
![スクリーンショット 2022-12-18 15.11.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2793108/3528f539-52c8-d7f2-97f7-340bc5e25e02.png)

##### 開発言語の選択
開発言語は、今回はJava一択で。
![スクリーンショット 2022-12-18 15.11.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2793108/4d78ac1b-dd1e-f0a9-e313-73c5e92533c2.png)

##### パッケージのグループIDの入力
グループIDを決めます。グループID+次項で決めるパッケージ名がフルパッケージ名となります。今回は練習なので「com.example」にします。
![スクリーンショット 2022-12-18 15.15.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2793108/68ecf1cb-33f0-8a7a-aecb-0b7174f34861.png)

##### パッケージ名の入力
パッケージ名を決めます。今回は「hello」にします。
前項とあわせて、フルパッケージは「com.example.hello」となります。
![スクリーンショット 2022-12-18 15.16.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2793108/4add95f5-cc00-c5d0-698d-dc2e12213588.png)

##### パッケージングタイプの選択
今回は「Jar」を選択します。
![スクリーンショット 2022-12-18 15.17.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2793108/9e53c2fc-5556-568c-7927-ef42f6192412.png)
##### Javaのバージョン選択
Javaのバージョンは、#1 環境構築編でインストールしたJavaのバージョンを選びましょぅ。僕は今回、19になります。
![スクリーンショット 2022-12-18 15.17.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2793108/48d6c5d5-c48e-91d5-9c14-f689bed31a6f.png)

##### 依存関係の選択
以下の4つを選択して、「Enter」をおします。
　・Lambok
　・Spring Boot DevTools
　・Spring Web
　・Thymeleaf
名前を途中まで入力すると候補として出てくるので、ハイライトがついたら1回Enterとすると選択されます。
![スクリーンショット 2022-12-18 15.18.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2793108/2712fe82-93f7-f78c-3c5f-0dcd3e630dbb.png)
##### 保存先の選択
好きな保存先を選んで保存したら、ブランクプロジェクトの作成完了です。

##### 作成したプロジェクトを開く
最後に、作成したプロジェクトを開きます。
パッケージ名で指定した「hello」が大文字になったフォルダになっているので、フォルダ部分を選択して開きます。
![スクリーンショット 2022-12-18 15.23.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2793108/fca110a4-2864-5ff7-5938-55206b6597ad.png)
![スクリーンショット 2022-12-18 15.23.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2793108/6736d7f5-c6ce-d337-f6e0-0e6e8cfb154f.png)

### 2.コーディング
HelloWorldするのに作成必要なファイルは
　・コントロール用のjavaファイル
　・表示させるhtmlファイル
の2つです。
#### Javaファィルの作成
メインのJavaとなる「HelloApplication.java」と同じところ、
src/main/java/com/example/hello/HelloWorld.java
となるように、コントローラ用のJavaを作成します。
![スクリーンショット 2022-12-18 16.54.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2793108/e6384cfd-eb84-7dfd-b0cb-b9cebe7f3045.png)
```java:HelloWorld.java
package com.example.hello;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HelloWorld {
    
    @RequestMapping("/hello")
    public String start() {
        return "HelloWorld.html";
    }
}
```
:::note informtation
このようにファイルが並んでいたらOKです。
![スクリーンショット 2022-12-21 12.03.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2793108/45ea6db0-8ce5-b054-4454-1b695fe1e682.png)
:::

#### htmlファイルの作成
表示させるhtmlファイルは、
src/main/resources/templates/HelloWorld.html
となるように作成します。
![スクリーンショット 2022-12-21 12.08.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2793108/08592ab5-1116-abd5-44ea-bf17559230a3.png)

```html:HelloWorld.html
<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HelloWorld</title>
</head>
<body>
    <h1>HelloWorld!</h1>
</body>
</html>
```

### アプリケーションの実行
ファイルを作成したら実行していきます。
#### アプリケーション起動！！
```src/main/java/com/example/hello```に入っている```HelloApplication.java```を開き、下の画像の赤枠にある```「Run」```を押します。
エラーが表示されず、terminalがひらけばOKです。
![スクリーンショット 2022-12-21 12.11.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2793108/81205294-8524-729c-8139-f83ebb2b2b9a.png)

#### Let's HelloWorld！！！
最後に、ブラウザで
http://localhost:8080/hello
を開いてみましょう。
![スクリーンショット 2022-12-21 13.06.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2793108/f274eed7-ec51-138c-1c84-dee32140577f.png)
新たな世界への扉がひらけましたか。
じゃあ、みんなで新しい世界へ挨拶だ。
HelloWorld!

## おわり
Javaの開発環境というとeclipseがよくありますが、どうせなら使ってて学習意欲が湧く、若干おしゃれなVScodeを使いたい!ということで、環境を作りました。
本記事は、最短でブラウザ表示させることを目的としているので、SpringBoot自体にはあまり触れませんでしたので、続きはいろいろ調べてみてください。

***
本記事は初めてのQiita投稿となります。
今後も自分自身勉強していく上で知ったことなど、記事にしていこうと思ってます。
不明点や改善点、感想などがあったらコメント頂けると嬉しいです。
あと、参考になったら「いいね」もお願いします！