Webアプリケーションの画面表示について初心者向けに書いた記事です。
エンジニア初心者がぶち当たる壁の一つに「画面表示」と「画面遷移」があります。Webアプリケーション開発の初歩段階では画面にHello Worldを表示させるだけでも一苦労です。この記事では画面の表示について解説していきます。なお言語はJava、フレームワークはSpring Bootを使用します。
※Spring Tool Suite4はあらかじめインストールされているものとします。
初期設定
ファイル→新規→Springスタータープロジェクトと選択していきます。すると「新規Springスターター・プロジェクト」というウィンドウが出てきます。
「名前」の部分に任意のプロジェクト名を入力して「次へ」を押します。
「新規Springスターター・プロジェクト依存関係」というウィンドウが開きますので、依存関係を選択します。ここでは「Spring Web」と「Thymeleaf」を選択します。
といっても何のことかさっぱりわからないですが、要はこれから作るプロジェクトで使う機能は何ですがと聞かれているととらえてください。Hello Worldを表示するWeb上の画面を作るので、Webアプリケーションを作る宣言である「Spring Web」、今回は登場しませんが、HTMLをJavaとHTMLの橋渡しを行う「Thymeleaf」を選択します。Webアプリケーションを作る際、最もベースとなる機能がこの2つなので、とりあえず選択しておくという感覚で問題ありません。
ソースコード
以下がHello Worldと書かれた画面を表示するソースコードです。
1 2 3 4 5 6 7 8 9 10 11 12 | package com.example.demo; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class TestController { @RequestMapping("/") public String homeDisp() { return "home"; } } |
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> <span>Hello World</span> </body> </html> |
Javaファイルの説明
まずJava部分の大事な箇所を説明をしていきます。
- @Controller
- @RequestMapping(“/”)
- return “home”
@〇〇の部分のことを「アノテーション」といいます。このアノテーションは簡単に言えばメソッドと同じような役割を果たし、それに追加して、「役割」を明示しています。
それを踏まえたうえで、@ControllerはこのWebアプリケーションのコントローラー、つまりフロントエンド(HTML側)とバックエンド(サーバー側、Java記述部分)の橋渡しの役割を担ったファイルであることを表しています。このファイルに書かれることは画面の表示にまつわる処理が主となります。
画面を表示するだけならほとんどおまじないのようなコードですが、画面遷移になった瞬間かなり理解に苦しむ最初の難関です。HTMLから飛んできたリクエストをキャッチする部分というイメージだけ持っておくとまだ理解しやすいかもしれません。
リクエスト:今回では(“/”)の部分。詳しくは画面遷移のページで紹介します。
これは「home.htmlを呼び出す」という命令文です。htmlで書かれた部分というのは普段人が目にするいわばUI(ユーザーインターフェース)の部分です。つまり「home.htmlという画面を表示します」ということになります。
※大変感覚的な説明ですが、初めて、またはまだ慣れていない時期にプログラミングで画面表示をする際にこのイメージを持っていると、後々複雑なコードを書いていくときにも理解が早くなります。
HTMLファイルの説明
次はHTML部分の説明に移ります。HTMLファイルはtemplatesフォルダの中に作ってください。
今回の画面表示では特に説明することはないのですが、<body></body>で囲まれた部分に表示する内容を記述するのでここに”Hello World”と記述します。
まとめ
Webアプリケーション製作を始めるにあたって最も基本的な内容でかつ大事な部分である画面表示の説明をしました。私自身それほど理解力があるわけではないので初めて画面表示を行った際はかなり苦戦しました。というのも内容が基本的過ぎてあまりネットに説明が簡単な記事がなかったからです。(あくまでも私見です)なので、独学で初めてプログラミングをするという方にもわかるように心がけて書きましたので、この記事で少しで理解が深まれば幸いです。