0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Spring BootでHello Worldをブラウザで表示するまでの流れ

Posted at

はじめに

今回は、Spring Bootで画面に「Hello World」を表示するまでの流れを書いていきます。
こちらは、VSCodeでSpring Bootプロジェクトを開始した後からの流れを書いていきます。
(今回はSpring Securityを依存関係に含んでいないのでログイン画面は表示されません)

プロジェクト開始までの流れはこちらの記事を参考にしてみて下さい。↓
https://qiita.com/hukuryo/items/0bb58861751db3c20d26

HTMLテンプレートを作成

まず「Hello World」を表示するHTMLを簡単に書いていきます。

main/resources/templates/hello.html
<!DOCTYPE html>
<html lang="ja" xmlns="http://www.thymeleaf.org">
<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>Hello</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

Controllerの作成

次に、Controllerクラスを作成し、先ほどのHTMLテムプレートの表示をします。
以下のようにコントローラーファイルを作成して、コンタロラークラスを書いていきます。
VSCodeの場合、コントローラークラスを定義すると、自動でパッケージやクラス名の定義などはしてくれます。

main/java/com/example/demo/controller/HelloController.java
// パッケージ名が自動で追加される↓
package com.example.demo.controller;

// クラス名が自動で追加される↓
public class HelloController {
    
}

コントローラクラスが定義できたら、中身を書いていきます。

main/java/com/example/demo/controller/HelloController.java

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
//コントローラークラスであることを定義
@Controller
public class HelloController {
   //今回はURLに/localhost:8080/hello/というリクエストが来たらhelloメソッドを動かしますと指示している
    @GetMapping("/hello")
    public String hello(){
        return "/hello";
    }
}

使われているアノテーションの説明は以下の通りです。コード内の説明も含めて読んでみて下さい。
アノテーションとは、Springで様々な機能を提供してくれるもので@〜と記述します。(このコードだと@Contorollerなど)

アノテーション名 機能説明
@Contorller コンピュ-ターにコントローラークラスであることを認識させるためのもので、コンピューターに「このクラスはコントローラークラスです!」と教えてあげているイメージ
@GetMapping ブラウザからgetリクエストが送られてきた時にこのコードを動かしますという定義をするためのアノテーション。

Hello Worldを表示

それでは、ブラウザでHello Worldが表示されるか確認してみましょう。
ブラウザのアドレスバーに以下のURLを入力して下さい。
http://localhost:8080/hello/
そうすると、、、
スクリーンショット 2023-01-05 11.25.32.png

このようにHello Worldが出力されました!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?