この章ではまだプログラムを書きません。これから作るものの全体像と、Spring がその中でどんな役割を果たすのかを理解しましょう。
この章で学ぶこと
- Webアプリケーションが動く仕組み（リクエストとレスポンス）
- フレームワークとは何か、Spring と Spring Boot とは何か
- MVC という考え方
- この教材で作る社員管理アプリの構成と画面の流れ
1.1 Webアプリケーションとは
これまで Java の学習で作ってきたプログラムは、Eclipse のコンソールに文字を表示するものが中心だったと思います。プログラムを実行した人だけが、その結果を見ることができました。
Webアプリケーション（以下、Webアプリ）は、ブラウザから使うアプリケーションです（この教材では、ブラウザに Google Chrome を使います）。ネットショッピング、銀行の振込、社内の勤怠システムなど、みなさんが普段使っている多くのシステムが Webアプリです。
Webアプリには、2つの登場人物がいます。
| 登場人物 | 役割 | この教材では |
|---|---|---|
| クライアント | 画面を表示し、利用者の操作を受け付ける | ブラウザ |
| サーバー | 要求を受け取って処理し、結果を返す | みなさんが Java で作るプログラム |
ブラウザからサーバーへの要求を リクエスト、サーバーからブラウザへの返事を レスポンス といいます。
図1-1 Webアプリの基本的な動き
社員一覧画面を表示するときの流れを、この図に当てはめてみましょう。
- 利用者がブラウザで「社員一覧を見たい」という リクエスト を送る
- サーバーのプログラムが、データベースに社員の情報を問い合わせる
- データベースが社員の情報を返す
- サーバーのプログラムは、受け取った情報から社員一覧の HTML を組み立て、レスポンス として返す。ブラウザはその HTML を画面に表示する
【知識メモ】HTML とは
HTML は、Webページの内容と構造を書くための言語です。<h1>社員一覧</h1> のように、タグで文字を囲んで「これは見出し」「これは表」といった意味を表します。ブラウザは HTML を読み取って画面を描きます。
静的なページと動的なページ
いつ誰が見ても同じ内容のページを 静的なページ といいます。あらかじめ用意した HTML ファイルをそのまま返すだけなので、プログラムは必要ありません。
一方、社員一覧は社員が登録・削除されるたびに内容が変わります。このように、リクエストのたびにプログラムが HTML を組み立てるページを 動的なページ といいます。Webアプリの中心は、この動的なページを作ることです。
1.2 HTTP：ブラウザとサーバーのやり取り
ブラウザとサーバーは、HTTP という決まり（プロトコルと呼ばれる）に従ってやり取りします。ここでは、この教材で必要な3つのことを覚えましょう。
URL：リクエストの宛先
リクエストの宛先は URL で表します。この教材で作るアプリの社員一覧画面は、次の URL になります。
http://localhost:8080/employees
| 部分 | 意味 |
|---|---|
http:// |
HTTP という決まりでやり取りする |
localhost |
サーバーの場所。localhost は「自分のパソコン」を表す特別な名前 |
8080 |
ポート番号。パソコンの中のどのプログラムと通信するかを表す番号（Spring Boot は標準で 8080 を使う） |
/employees |
パス。サーバーの中の「どの機能」を使いたいか |
この教材では、自分のパソコンの中でサーバーのプログラムを動かし、同じパソコンのブラウザからアクセスします。サーバーとクライアントが同じパソコンにいるのは、開発中によくある形です。
GET と POST：何をしたいか
リクエストには、メソッド と呼ばれる種類があります。この教材では2つを使います。
| メソッド | 意味 | 主な使いどころ |
|---|---|---|
| GET | 情報を「ください」 | 画面を表示する。リンクをクリックする、URL を直接入力する |
| POST | 情報を「送ります」 | データを登録・変更・削除する。フォームのボタンを押す |
【便利な使い方】使い分けの目安
データを見るだけなら GET、データを変えるなら POST、と覚えておきましょう。社員の削除は「データを変える」操作なので、第9章では POST で作ります。
ステータスコード：結果はどうだったか
レスポンスには、処理の結果を表す3桁の数字が付いています。これを ステータスコード といいます。開発中に Whitelabel エラー画面（第4章）でよく見かけるので、代表的なものを覚えておきましょう。
| コード | 意味 | よくある原因 |
|---|---|---|
| 200 | 成功 | ― |
| 302 | 別の URL へ移動してください（リダイレクト） | 第9章以降で意図的に使う |
| 404 | ページが見つからない | URL の打ち間違い、プログラム側の URL 設定の間違い |
| 405 | そのメソッドは使えない | POST で受けるべきところに GET でアクセスした |
| 500 | サーバー内部のエラー | プログラムの中で例外が発生した |
1.3 フレームワークとは
Webアプリを Java だけで一から作ろうとすると、本来作りたい機能（社員を一覧表示する、登録する）以外に、たくさんの「決まりきった処理」を書かなければなりません。
- ブラウザからのリクエストを受け取り、URL を読み取る
- URL に応じて、呼び出す処理を振り分ける
- フォームに入力された文字を取り出し、数値や日付に変換する
- データベースに接続し、SQL を実行し、結果を Java のオブジェクトに詰め替える
- HTML を組み立て、レスポンスとして返す
これらはどの Webアプリでもほとんど同じです。そこで、こうした共通部分をあらかじめ作っておき、開発者は 自分のアプリ固有の部分だけを書けばよい ようにした土台が作られました。これを フレームワーク といいます。
【知識メモ】家づくりにたとえると
フレームワークは、家の「骨組み」のようなものです。柱や梁（はり）はすでに組み上がっていて、私たちは間取りや内装など、その家ならではの部分を作ることに集中できます。その代わり、骨組みの決まりごと（どこに柱があるか）には従う必要があります。
フレームワークを使うと、「決められた場所に、決められた書き方でクラスを置く」ことが求められます。最初は窮屈に感じるかもしれませんが、企業ではチームの全員が同じ書き方をするので、他の人が書いたコードも読みやすくなる という大きな利点があります。
1.4 Spring と Spring Boot
Spring Framework
Spring Framework（以下、Spring）は、Java で最も広く使われているフレームワークです。日本の企業システムでも標準的に使われています。
Spring はひとつの大きなプログラムではなく、目的別の部品の集まりです。この教材では、主に次の部品を使います。
| 部品 | 役割 | 登場する章 |
|---|---|---|
| DI コンテナ | オブジェクトの生成と組み立てを Spring に任せる仕組み（Spring の心臓部） | 第5章 |
| Spring MVC | リクエストを受け取り、画面を返す仕組み | 第4章〜 |
| Spring Data JPA | データベースの操作を簡単にする仕組み | 第6章〜 |
Spring Boot
Spring は多機能な反面、使い始めるまでに多くの設定が必要でした。そこで登場したのが Spring Boot です。Spring Boot は Spring を「すぐに使える状態」にしてくれる仕組みで、次のような特徴があります。
| 特徴 | 内容 |
|---|---|
| 自動設定 | 使うライブラリを見て、よく使われる設定を自動で行ってくれる |
| スターター | 「Web アプリを作りたい」「JPA を使いたい」といった目的を選ぶだけで、必要なライブラリがまとめて揃う |
| 組み込みサーバー | Webアプリを動かすサーバー（Tomcat）が中に入っているので、main メソッドを実行するだけで Webアプリが起動する |
【知識メモ】Spring と Spring Boot の関係
Spring Boot は Spring の代わりになるものではなく、Spring を楽に使うための道具 です。この教材で書くコードの大部分は Spring そのものの書き方なので、Spring Boot を使わない現場でも役に立ちます。
その他に使う技術
| 技術 | 役割 |
|---|---|
| Thymeleaf（タイムリーフ） | HTML の中にデータを埋め込んで、動的なページを作るためのテンプレートエンジン |
| JPA | Java のオブジェクトとデータベースのテーブルを対応づけるための Java の標準仕様 |
| Oracle Database 21c XE | データを保存するデータベース。XE は無償で使える版 |
| Maven（メイヴン） | ライブラリの管理とビルドを行う道具。Eclipse が裏側で使うので、直接操作することはない |
1.5 MVC という考え方
Webアプリのプログラムを1つのクラスにすべて書くこともできます。しかし、画面の見た目、データの取り出し、処理の流れがごちゃ混ぜになり、あとから直すのがとても大変になります。
そこで、プログラムを役割ごとに3つに分けて作る考え方が広く使われています。これを MVC といいます。
| 役割 | 意味 | この教材では |
|---|---|---|
| Model（モデル） | 画面に表示するデータ、アプリが扱うデータ | 社員や部署のデータ（Entity クラス）、画面に渡すデータ |
| View（ビュー） | 画面の見た目 | Thymeleaf で書く HTML ファイル |
| Controller（コントローラー） | リクエストを受け取り、処理の流れを決める司令塔 | Java で書く Controller クラス |
図1-2 MVC の役割分担
- ブラウザからのリクエストを Controller が受け取ります
- Controller は必要なデータを用意し、Model に入れます
- View は Model のデータを使って HTML を組み立てます
- できあがった HTML がブラウザに返されます
役割を分けておくと、「画面のデザインを変えたいときは View だけ」「処理の流れを変えたいときは Controller だけ」を直せばよくなります。Spring MVC は、この MVC の考え方に沿って作られています。
1.6 この教材で作るアプリの構成
この教材の社員管理アプリは、次のような構成になります。
図1-3 社員管理アプリの構成
| 部品 | 役割 | 作る章 |
|---|---|---|
| Controller | URL ごとの処理を書く。Repository を使ってデータを取り出し、テンプレートに渡す | 第8章〜 |
| Repository | データベースへの検索・登録・変更・削除を担当する。インターフェースを書くだけで、中身は Spring が用意してくれる | 第7章 |
| Entity | データベースのテーブル1行分のデータを表すクラス | 第6章 |
| テンプレート | 画面の HTML。Thymeleaf の書き方でデータを埋め込む | 第8章〜 |
この教材では、構成をできるだけシンプルにするため、Controller が直接 Repository を使う2層構成 で作ります。
【便利な使い方】実際の現場では
業務システムでは、Controller と Repository の間に「Service」という層を挟んだ3層構成にすることが多くあります。Service については第15章で紹介します。まずは2層構成で、Spring の基本をしっかり身につけましょう。
データベースのテーブル
アプリでは、次の2つのテーブルを使います。テーブルの作成は第3章で行います。
部署テーブル（DEPARTMENT）
| 項目 | 列名 | 説明 |
|---|---|---|
| 部署ID | DEPT_ID | 主キー。1 から自動で番号が振られる |
| 部署名 | DEPT_NAME | 例：総務部 |
社員テーブル（EMPLOYEE）
| 項目 | 列名 | 説明 |
|---|---|---|
| 社員ID | EMP_ID | 主キー。1 から自動で番号が振られる |
| 氏名 | NAME | 例：雷禅 海皇 |
| 性別 | GENDER | 1：男、2：女 |
| 年齢 | AGE | 例：30 |
| 生年月日 | BIRTH_DATE | 例：2000/06/22 |
| 部署ID | DEPT_ID | 部署テーブルの部署ID |
| 住所 | ADDRESS | 都道府県。例：東京都 |
1.7 画面の流れ
完成したアプリの画面は、次のようにつながります。
図1-4 社員管理アプリの画面の流れ
- 社員一覧：全社員を表で表示します。各行に「変更」「削除」ボタン、画面上部に「新規登録」ボタンがあります
- 削除：「削除」ボタンを押すとその社員を削除し、一覧画面に戻ります
- 新規登録：空の入力画面 → 確認画面 → 完了画面の順に進みます。確認画面から入力画面に戻って直すこともできます
- 変更：その社員の情報が入った入力画面 → 確認画面 → 完了画面の順に進みます
第13章・第14章では、新規登録と変更の入力画面に 入力チェック を追加します。たとえば氏名が空のまま「確認」ボタンを押すと、入力画面にエラーメッセージを表示するようにします。
この教材は学習用のため、セキュリティの対策や、通常の操作から外れたときの対処は入れていません。実際の業務のアプリでは、これらの対処も必要です。
1.8 まとめと確認問題
まとめ
- Webアプリは、ブラウザ（クライアント）がサーバーに リクエスト を送り、サーバーが レスポンス（HTML）を返すことで動く
- リクエストには GET（見る）と POST（送る・変える）がある
- フレームワーク は、どの Webアプリにも共通する処理を引き受けてくれる土台である
- Spring Boot は、Spring を少ない設定ですぐに使えるようにする仕組みである
- MVC は、プログラムを Model・View・Controller の役割に分けて作る考え方である
- この教材では、Controller → Repository の2層構成で社員管理アプリを作る
確認問題
問1 ブラウザからサーバーへの要求と、サーバーからブラウザへの返事を、それぞれ何と呼びますか。
解答を見る
要求は リクエスト、返事は レスポンス です。
問2 次の操作は、GET と POST のどちらで行うのが適切ですか。
（a）社員一覧を表示する （b）社員を削除する （c）新規登録の入力画面を表示する
解答を見る
（a）GET （b）POST （c）GET
データを見るだけなら GET、データを変えるなら POST です。入力画面を「表示する」だけの操作はデータを変えないので GET になります。
問3 URL http://localhost:8080/employees の 8080 は何を表していますか。
解答を見る
ポート番号 です。パソコンの中で、どのプログラムと通信するかを表します。Spring Boot は標準で 8080 番を使います。
問4 MVC の M・V・C は、この教材のアプリではそれぞれ何に当たりますか。
解答を見る
M（Model）：社員や部署のデータ、画面に渡すデータ
V（View）：Thymeleaf で書く HTML ファイル
C（Controller）：リクエストを受け取る Java の Controller クラス
問5 ブラウザに「404」と表示されました。どんな原因が考えられますか。
解答を見る
ページが見つからないことを表します。URL の打ち間違いや、プログラム側で設定した URL の間違いが考えられます。