LoginSignup
4
1

More than 5 years have passed since last update.

Spring Bootで入力した文字をブラウザで表示する方法と参考リンク【Spring Boot入門/初心者向け】

Last updated at Posted at 2019-04-23

前提と環境

JavaのフレームワークSpring Bootの使い方を勉強中。
今回はSpring Bootで
入力した文字の出力
ができるようになったので、自分のための備忘録・初心者の方向けとして書きます。

途中で出てくる変数やメソッド等、今まで見たことのない用語だらけだったのでかなり噛み砕いて解説しています。

環境:
・Windows10
・Eclipse
・Java 8
・Spring Boot 2.0.4 Release
・Thymeleaf
・Maven

Spring Bootの導入

Eclipseのヘルプ>マーケットプレースからSTSをインストールします。
この記事がめちゃくちゃ分かりやすいです。
Spring Tool Suite (STS)と Spring Boot で始める Web アプリケーション開発(1)
この記事の通り進めればOK。
依存関係は、Thymeleaf,Maven,Webのみ。
この記事に沿ってHello,World!まで進めます。

※デフォルトで置いてある〇〇(プロジェクト名)Application.javaは、このアプリケーションを実行するための実行クラスなのでそのままでOK。
この通り進めていればほぼ間違いなくHello,World!できます。

入力した文字をブラウザ上に表示する

上記リンクの記事の続きに沿って進めます。
ここから分かりづらくなってきたので解説。

まず、Hello,World!の際に作ったファイルをいじっていきます。

  • HelloController.javaを編集(本当はよくないけど使いまわし)
  • index.htmlも編集

基本の記法解説

Controller.javaの編集
HelloController.java
package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

//Controllerだよ!という注釈
@Controller
public class HelloController {
    //RequestMapping "/"→ルートURLにアクセスすると呼び出されるようにできる
    //→アクセスするアドレスごとにメソッドを指定できる!
    @RequestMapping(value="/",method=RequestMethod.GET)
    //ModelとViewを2つとも置ける(返り値にできる)便利なやつ
    public ModelAndView index(ModelAndView mav) {
        //ビューネームの設定
        mav.setViewName("index");
        //値(msg)とそれに対する出力文字を設定
        mav.addObject("msg", "名前を入力してください:");
        return mav;
    }

    @RequestMapping(value="/",method=RequestMethod.POST)
    //"name"でPOSTされたパラメータを取得し、それを引数に
    public ModelAndView send(@RequestParam("name")String name,ModelAndView mav) {
        mav.setViewName("index");
        mav.addObject("msg", "Hello,"+name+"!");
        //valueにname(入力値)を入れる
        mav.addObject("value",name);
        return mav;
    }
}

上記がコントローラーのソースコード。(コントローラーって何?って場合は、「Java MVC」で検索!)
メインソースのJavaクラスのため、src/main/javaに作ります。

大体はコメントとして書いていますが、よくわからん用語などは以下。

@Controller@RestControllerの違いは?

この記事が参考になります。
Spring MVCのコントローラでの戻り値いろいろ

要は、
@Controllerは主にWebページ用のコントローラで使うもので、@RestControllerは別ので使う
ということらしいです。
まだ私の頭が追い付いていませんが、何となく言いたいことは分かったので次。

ModelAndViewって何?

ModelAndViewとはSpring MVCの機能で、「View」(画面表示するオブジェクト)と「Model」(ビューと値のやり取りをするオブジェクト)をまとめて扱うことができるクラス。
引数にModelAndViewを入れることで、情報をまとめて使えるようにします。
超便利。

setViewNameって何?

setViewNameとは「ビューネームを設定するもの」。
setViewNameでビューネームを"index"とすることで、indexという名前のビューが使われるようになります。
で、ビューネームって何なんだ?ってなりましたが、いろいろあるっぽいので今度調べます。割愛。

ここではThymeleafテンプレートエンジンを使っているので、設定した"index"はThymeleafのテンプレート(templates/index.html)と認識されます。
このビューネームの情報をもとにView(画面表示部分)が生成される、というわけです。

ということで、この"ViewName"と、"msg"と名付けた出力文字をまとめてModelAndViewクラスmavにぶち込みます。これがModelAndViewのいいところ。
で、そのmavをreturnしてあげれば、先程のViewNamemsgをまとめてクライアント側に送ることができるということになります。

Thymeleaf(タイムリーフ)って何?

HTMLなどのテンプレートエンジンのこと。
※テンプレートエンジンとは:

テンプレートと呼ばれるHTMLのひな形を元にプログラムで加工し、画面に出力するためのライブラリ。プログラマーとWebデザイナーとの分業を目的とし、特別なタグを解釈して実行することで処理を行う。PHPではSmartyなどが代表例。
Weblio 辞書より

で、Thymeleafの特徴については以下が分かりやすいですね。
Thymeleafとは
要は、処理を通してから表示するJSPとは違って属性値で記述するため、処理を通さず普通に表示できる&何と言っても見やすいことが特徴のようです。

index.htmlの編集

ここまで(ザックリでも)理解できたところで、index.htmlを編集していきます。

index.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Hello Page</title>
</head>
    <body>
        <!-- th:textはThymeleafでtextという指定、${}は変数 -->
        <p th:text="${msg}">please wait...</p>
        <form action="/" method="post">
        <input type="text" name="name" th:value="${value}" >
        <input type="submit" value="Click">
        </form>
    </body>
</html>

HTMLはテンプレートファイルに置きます。
src/main/resources>templates

このHTMLファイルが、Thymeleaf記法で書かれるというわけですね。
Thymeleafの記法については、こちら2つの記事が分かりやすいです。
必要最小限のサンプルでThymeleafを完全マスター
Thymeleafの標準式構文

これを参考に、書いたりコピペしたりしました。

この状態でプロジェクトをSpring Bootアプリケーションとして実行。

結果画面

SpringBoot入力文字出力.PNG

無事、値の受け渡しができました!

4
1
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
4
1