More than 1 year has passed since last update.

java アウトプット最小限のアプリ作成

Posted at 2023-08-09

アノテーション

アノテーションは「注釈」という意味を持つ英単語で、Javaにおいて非常に重要な機能を持っています。
アノテーションは、クラスやメソッドに特別な意味を持たせるための機能です。

@Controller
public class PostController {
    @GetMapping("/hello")
    @ResponseBody
    public String showHello(){
        return "<h1>Hello World!</h1>";
    }
}

このコードの中に、「@」で始まる文字が３ヶ所ありますが、これがアノテーションです。

@Controller
@GetMapping("/hello")
@ResponseBody

それぞれの意味を確認していきましょう。

@Controller
@Controllerは、そのクラスがコントローラーであることをSpringに伝えるためのアノテーションです。

Railsでは、「rails g controller」というコマンドを実行することでコントローラーを作成しました。それに対してSpringでは、クラス定義の直前に「@Controller」と記述することで、クラスがコントローラーとして扱われるようになります。

Spring Bootのアプリ実行時にコンポーネントスキャンという処理が行われますが、スキャン中にアノテーションを発見すると、それが付けられたクラスに対して必要な事前準備が行われる仕組みです。

@GetMapping

GetMappingは、ブラウザで入力されたURLと、実行されるメソッドを紐づけるためのアノテーションです。
Railsでは、routes.rbファイルに以下の記述を行うことで、「/post」というURLと「Postsコントローラーのindexアクション」を関連づけました。

 get 'posts', to: 'posts#index'

@Mappingは、このRailsのルーティングと同様の機能です。
メソッドの前に、「@GetMapping("/hello")」というアノテーションをつけることで、URLに「（アプリのルートパス）/hello」と入力された場合、そのメソッドが実行されるようになります。

なお、@GetMappingはHTTPメソッドとして「GET」が送信された場合のアノテーションです。似たものとして、後で学習する「@PostMapping」があります。

@ResponseBody
@ResponseBodyは、ブラウザからのリクエストに対して、直接HTMLを返す際に利用するアノテーションです。
ここでは学習用に使用していますが、通常あまり使用されることはありません。

コントローラーの記述方法を理解しよう

アノテーション以外のコントローラーのコードについても見ていきましょう。

@Controller
public class PostController {
    @GetMapping("/hello")
    @ResponseBody
    public String showHello(){
        return "<h1>Hello World!</h1>";
    }
}

PostContorllerクラスは、コントローラーとして扱われる
このコントローラー内で、「(アプリのルートパス)/hello」とURLが入力されたら「showHello()メソッド」が実行されるよう設定されている

続いて、このshowHello()メソッドの中身について確認しましょう。

public String showHello(){
    return "<h1>Hello World!</h1>";
}

showHello()の前に、「String」と記述されているので、これは返り値が「文字列」のメソッドであることが分かります。

実際にメソッド内を確認すると「return」の後に<h1>Hello World!</h1>という記述があります。

つまり、このshowHello()メソッドは、実行すると<h1>Hello World!</h1>という文字列を返すメソッドです。この文字列がHTMLとして解釈され、ブラウザに表示される仕組みです。

テンプレートエンジンを使おう

Railsでは、ERBというテンプレートエンジンを使用して、Rubyのコードをビューに埋め込みました。このERBを使用することで、コントローラーとビューのコードを分離して管理しやすくすることができます。

それと似たものとして、Spring BootにはThymeleafタイムリーフというライブラリがあります。

今まで作成したアプリの挙動はそのままに、Thymeleafを使って保守しやすいようコードを変更していきましょう。

ライブラリを追加しよう

ライブラリを使う前に導入作業を行いましょう。

ルートディレクトリにある「build.gradle」ファイルを以下のように編集しましょう。
このファイルは、RailsのGemfileに似た役割を持つものです。

plugins {
    id 'org.springframework.boot' version '2.7.2'
    id 'io.spring.dependency-management' version '1.0.12.RELEASE'
    id 'java'
}

group = 'in.techcamp'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '17'

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    //↑この一行を追記
}

tasks.named('test') {
    useJUnitPlatform()
}

その後、反映させましょう。
これで、Thymeleafを使用するための準備は完了です。

Thymelealを使おう

続いて、このThymeleafを使用してビューを作成していきましょう。

これから、以下の２つの作業を行なっていきます。

① 表示させるためのHTMLを作成する
② コントローラーから①のファイルを読み込めるようにする

HTMLを作成しよう
・「firstapp」「src」「main」「resources」フォルダにある「templates」フォルダを右クリックします。
・メニューの中から、「新規」「HTMLファイル」を選択しましょう。
・ファイル名は、「hello.html」とします。ファイル名を入力したらエンターキーを押しましょう。
これで、HTMLファイルが作成されます。

HTMLを編集しよう
作成したHTMLファイルを、以下のように編集しましょう。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Hello World from Thymeleaf!</h1>
</body>
</html>

これでビューファイルの準備は完了です。

コントローラーを変更しよう
続いて、②の設定を行います。コントローラーを変更して、作成したビューファイルを読み込めるようにします。

コントローラーを以下のように変更しましょう。

package in.techcamp.firstapp;

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

@Controller
public class PostController {
    @GetMapping("/hello")
    public String showHello(){
        return "hello";
    }
}

元々10行目に記述されていた@ResponseBodyは不要なので削除します。同時にインポートも不要になるので、import org.springframework.web.bind.annotation.ResponseBody;の記述も削除しましょう。

コードを変更できたら、実行ボタンを押して結果を確認しましょう。

以下の通り表示できれば、正常にコントローラーとビューのファイルを分離できたことになります。

先ほど行なったように、Thymeleafを使用する際は以下の２つの作業が必要です。

① 表示させるためのHTMLを作成する
② コントローラーから①のファイルを読み込めるようにする

① 表示させるためのHTMLを作成する

Spring BootでHTMLを作成する際は、保存するフォルダが決められています。

必ず「firstapp」「src」「main」「resources」フォルダにある「templates」フォルダ内に保存します。

今回はHTMLファイルに固定の文字列を記述していますが、RailsのERBファイルにRubyのコードを埋め込むことができたように、Thymeleafを使うとJavaのコードを埋め込むことができます。

Javaのコードを埋め込む方法はこの後の章で学習します。

② コントローラーから①のファイルを読み込めるようにする
先ほど以下のようにコントローラーを変更しました。

@Controller
public class PostController {
    @GetMapping("/hello")
    public String showHello(){
        return "hello";
    }
}

この5行目にreturn "hello";という記述があります。表示させるHTMLファイルの名称をここで指定しています。

「hello.html」を呼び出したい場合、「.html」部分は省略可能です。

return "hello";と記述することで、「templates」フォルダにある「hello.html」を呼び出すことができます。

なお、Thymeleaf使用前に記述していた「@ResponseBody」は不要なので、削除します。

Thymeleafで変数を使おう

続いて、コントローラーからビューに変数を渡して表示させる方法について学習していきましょう。
最初にコードの記述と動作確認を行なってから、コードの意味を確認します。
コントローラーを変更しよう
以下のようにコントローラーのコードを変更しましょう。

package in.techcamp.firstapp;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class PostController {
    @GetMapping("/hello")
//ここから
    public String showHello(Model model) {
        var sampleText = "サンプルテキスト";
        model.addAttribute("sampleText", sampleText);
//ここまで変更
        return "hello";
    }
}

ビューを変更しよう
以下のようにビューのコードを変更しましょう。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Hello World from Thymeleaf!</h1>

<p th:text="${sampleText}"></p>

</body>
</html>

アプリを実行しよう
コードを変更できたら、アプリを再度実行しましょう。

ブラウザで結果を確認し、以下のように「サンプルテキスト」という文言が表示されていれば成功です。

Thymeleafで変数を使う方法を理解しよう

Sping Bootの場合は、Model型のオブジェクトを使用して、以下の流れで変数を渡します。

① コントローラーの引数でModelオブジェクトを受け取る
② Modelオブジェクトに、ビューで表示させたいデータを追加する
③ ビューでModelオブジェクトのデータを読み込む

これらがどういうことか、コードで確認しましょう。

①まず、以下のようにshowHelloメソッドの仮引数に「Model model」と指定することで、Modelオブジェクトを受け取ることができます。このオブジェクトの変数名は、modelとすることが一般的です。

@GetMapping("/hello")
public String showHello(Model model){

    // 省略

}

続いて以下のコードでmodelにデータを追加しています。

@GetMapping("/hello")
public String showHello(Model model){
    var sampleText = "サンプルテキスト";
    model.addAttribute("sampleText", sampleText);
    return "hello";
}

model.addAttribute("sampleText", sampleText);のaddAttributeが追加を行うためのメソッドです。
引数にsampleTextが２回出てくるのが分かりにくいかもしれません。

１つ目の引数では、ビューで読み込む際の名称を指定しています。ダブルクォーテーションで囲んで文字列として指定する必要があることに注意しましょう。

２つ目ではmodelに追加したいデータを指定しています。直前の行でvar sampleText = "サンプルテキスト";と記述していますが、ここではこのsampleTextを指定しています。

Rubyでハッシュを利用する際はキーとバリューを指定しますが、それに似たものと捉えると分かりやすいかもしれません。

ここまでで、コントローラーで行う作業は完了です。

③次にビューでの読み込み方を確認しましょう。
ビューで変数を利用しているのは以下の部分です。
<p th:text="${sampleText}"></p>

通常のHTMLでpタグを使用する際は、以下のように記述します。

<p>表示したいテキスト</p>

Thymeleafのth:textを使用すると、「表示したいテキスト」を任意の内容に置き換えることができます。

ここではth:text="${sampleText}"と記述することで、「表示したいテキスト」の箇所を「sampleText」の内容に置き換えています。

コントローラーで、sampleTextに「サンプルテキスト」という文字列を設定しているので、置き換えた後は以下のように記述したのと同じ結果になります。

<p>サンプルテキスト</p>

以上で、コントローラー、ビューを利用したシンプルなHello Worldアプリは完成です。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

java アウトプット 最小限のアプリ作成