Spring BootをVSCodeで「Hello World」を表示させてみた

★★★ Live配信告知 ★★★ぜひお申込みください!
◆◇世界一わかりみの深いクラウドネイティブ on Azure 第20回◆◇
〜 Azure課金節約ノウハウ 〜今回は、Azureの課金を節約する方法についてお話します。9/29(木) 19:00~

こんにちは。サイオステクノロジーの川田です。
今回はSpring Boot初心者がVSCodeを使って「Hello World」を表示した手順をご紹介致します。

拡張機能のインストール

まず開発をする際に必要となる2つの拡張機能をインストールします。

●Java Extension Pack
●Spring Boot Extension Pack

下記のショートカットキーから検索欄に入力

拡張機能の検索方法
【Win】Ctrl + Shift + X
【Mac】Command + Shift + X

2つインストールが終わりましたら、次はプロジェクトの作成へと続きます。

プロジェクトの作成

コマンドパレットでSpringを検索

コマンドパレット表示方法
【Win】Ctrl + Shift + P
【Mac】Command + Shift + P

 

「Spring Initializr: Generate a Maven Project」を選択

「Java」を選択

一番上の「Java」を選択します。

パッケージ名を入力

パッケージ名を入力し、「Enter」を押します。
例:com.example
※取り消したい場合は「Esc」

プロジェクト名を入力

プロジェクト名を入力し、「Enter」を押します。
例:demo
※取り消したい場合は「Esc」

バージョンの選択

Spring Bootのバージョンを指定します。

依存関係の選択

依存関係(2つ)を選択し、「Enter」を押します。

●Spring Web
●Thymeleaf

保存先の指定

プロジェクトが作成される保存先を指定します。
VSCodeの右下に「Successfully generated」と表示されていれば成功です!

実際に作成されているか確認してみましょう!
選択したディレクトリに入力したプロジェクト名が作成されています°˖☆◝(⁰▿⁰)◜☆˖°

 

ディレクトリ構成

作成されたディレクトリ構成をまとめてみました。

 |― src
 |   |― main
 |   |    |― java
 |   |    |    |― com
 |   |    |        |― example
 |   |    |             |― demo(プロジェクト名)
 |   |    |                      |― DemoApplication.java
 |   |    |― resources
 |   |           |― static/ (静的ファイル)
 |   |           |― templates/ (テンプレートファイル)
 |   |           |― application.properties (環境独自の設定ファイル)
 |   |― test
 |       |― java
 |            |― com
 |                |― example
 |                      |― demo(プロジェクト名)
 |                               |― DemoApplicationTests.java
 |― .gitignore
 |― HELP.md
 |― mvnw
 |― mvnw.cmd
 |― pom.xml (Mavenの設定ファイル)

 

Hello Worldを表示

それではHello Worldを表示させていきます!

HelloController.javaを作成

src/main/java/com/example/demo/の配下にcontrollerディレクトリを作成します。
作成したらcontrollerディレクトリの中に「HelloController.java」を作成していきます。

フォルダー作成方法
1.「demo」を右クリックで「新しいフォルダー」を選択
2.フォルダー名(例:controller)を入力して作成

 

ファイル作成方法
1.「controller」を右クリックで「新しいファイル」を選択
2.ファイル名(例:HelloController.java)を入力して作成

 

作成した「HelloController.java」を以下の内容に修正します。

package com.example.demo.controller;

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

@Controller
public class HelloController {
    @RequestMapping("/hello")
	public String index() {
		return "hello";
	}
}

hello.htmlを作成

src/main/resources/templates/内にhello.htmlを作成します。

作成した「hello.html」を以下の内容に修正します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello!!!</title>
</head>
<body>
    <h1>HelloWorld</h1>
</body>
</html>

アプリを実行

実行 > デバッグの開始 を選択します。
※初回時はlaunch.jsonが生成されるため、再度「実行 > デバッグの開始」を選択してください。
デバッグが開始されるとSpring Bootのアプリケーションがローカルサーバーに立ち上がります。

Hello Worldを表示してみよう!

「https://localhost:8080/hello」にアクセスすると、「Hello World」を表示することができました!

切断するには上にある停止ボタンを押します。

 

以上となります。
最後までお読みいただきまして、ありがとうございました。





ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!


ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

2人がこの投稿は役に立ったと言っています。

Be the first to comment

Leave a Reply

Your email address will not be published.


*