1. はじめに
こんにちは！
未経験からエンジニアを目指して学習中のhayateです。
前回は 「JavaでCLI版ToDoリストを作ってみた」 というテーマで、
ターミナル上でタスクを
追加 → 一覧表示 → 削除 できるシンプルなアプリを実装しました。
今回はその発展編として、
「CLI版のToDoリストをSpring BootでWebアプリ化」
にチャレンジしてみます。
「Javaの基本文法 → ファイル保存 → Webアプリ化」という流れを通して、
段階的にアプリが成長していく様子をお伝えできればと思います。
🎯 今回のゴール
• Spring BootでWebプロジェクトを作成
• コントローラーを用意してタスク一覧を表示
• フォームからタスクを追加できるようにする
• （オプション）ファイル保存 or メモリ上で管理する仕組みを実装
⚙️ 開発環境と事前準備
• JDK（Java開発環境、バージョン17推奨）
• IntelliJ IDEA / VS Code / Eclipse などのエディタ
• Spring Initializr（プロジェクトの雛形作成に利用）
• Webブラウザ（アプリ動作確認用）
2. 手順の全体像
今回の流れは以下の通りです。
- プロジェクト作成 → Spring Initializr を使ってWebアプリ用のプロジェクトを作成
- モデル準備 → タスクを表現する Task クラスを用意
- コントローラー作成 → タスクの追加・表示を扱う Controller を実装
- ビュー作成 → HTMLテンプレート（Thymeleaf）を用意し、タスク一覧やフォームを表示
- タスク操作 → ブラウザ上のフォームからタスクを追加・削除できるようにする
- 動作確認 → http://localhost:8080 にアクセスして、Webアプリとして動作を確認
以上の6フェーズ構成で進めていきます。
3.環境構築編
前回の記事で JDK のインストールと動作確認を済ませ、
CLI版のToDoアプリを実行できる環境を整えました。
今回はその続きとして、Spring Boot を使ったWebアプリ開発 に
進むための環境を準備していきます。
ここでは IDEの準備 → Spring Boot プロジェクト作成 → 起動確認 までを扱います。
1. IDE の準備
IDEとは？
IDE（Integrated Development Environment：統合開発環境）は、プログラミングに必要な機能をまとめて提供してくれるソフトウェアの総称です。
主な機能例：
• コード補完（入力を支援してタイプ量を減らす）
• エラーチェック（リアルタイムでバグを検知）
• デバッグ（プログラムの実行状況を追跡）
• 依存関係やビルドの管理（Gradle / Mavenなど）
Java開発における代表的なIDEは以下の通りです👇
• IntelliJ IDEA（実務でも広く使われる定番。Spring Bootとの相性◎）
• Eclipse（Java開発の歴史あるIDE。利用者が多い）
• VS Code（軽量エディタに拡張機能を入れてIDE的に使える）
今回からは Webアプリ開発に取り組むため、IntelliJ IDEA を使用します。
IntelliJ IDEAを使用する理由は以下の通りです👇
• Spring Bootとの相性が良く、設定が簡単
• Gradle / Maven プロジェクトを標準でサポート
• 実務現場でも採用例が多く、「現場を意識して学んでいる」とアピールできる
といった部分で「実務を想定した環境」を意識し、IntelliJ IDEAを選択しました。
それでは実際に、IntelliJ IDEA上でSpring Bootのプロジェクトを作成していきます。
2. Spring Boot プロジェクトの作成
Spring Boot プロジェクトは手動で構成ファイルを用意することもできますが、
実務に使われている方法として、公式が提供する Spring Initializr が一般的です。
必要な依存関係や設定を最初から組み込んだ状態でプロジェクトを生成できるため、
「標準的なプロジェクト構成」で開発を始められるのが大きな利点です。
現場でもチームメンバーが同じ初期構成を共有できるため、
開発を効率的かつスムーズに進められる基盤として活用されています。
ここからは Spring Initializr を使って 新しい Spring Boot プロジェクト を作成します。
既存の java-todo（CLI版）を直接拡張するのではなく、
Webアプリ化用に別プロジェクトとして立ち上げる 形にしました。
学習の進捗を分けて管理できるのはもちろんですが、
実務でも新しい機能や仕組みを導入する際は
「既存のものを壊さないように新しいプロジェクトやブランチを切る」進め方がよくあります。
そのため、この方法で進めるのが自然だと感じました。
プロジェクトの作成手順
1. Spring Initializr にアクセス
2. 以下のように設定します👇
• Project: Gradle - Groovy（Mavenでも可）
• Language: Java
• Spring Boot: 3.x 系の最新安定版
• Project Metadata
• Group: com.example
• Artifact: todo-app
• Dependencies
• Spring Web
• Thymeleaf
👉 実際の設定画面はこんなイメージです。
3. 「Generate」を押すと ZIP がダウンロードされるので、解凍して IntelliJ IDEA で開きます。
※CLI版は java-todo という名前で作成しましたが、Spring Boot版は
別プロジェクトとして todo-app という名前で立ち上げています。
（CLI版とWeb版を切り分けて比較できるように、あえて名前を分けています）
4.表示と操作編
1. 起動確認
Spring Initializr で作成したプロジェクトを IntelliJ IDEA で開いたら、
まずは Spring Boot アプリケーションが正しく起動するか を確認してみます。
src/main/java/com/example/todo_app/TodoAppApplication.java を右クリックし、
Run ‘TodoAppApplication.main()’ を選択します。
もしくは、画面右上の 緑の再生ボタン ▶️ から実行してもOKです。
すると、下部のコンソールにログが流れ始めます。
ログの最後に以下のようなメッセージが出ていれば起動成功です👇
2025-10-02T21:47:43.544+09:00 INFO 8404 --- [ main] o.apache.catalina.core.StandardService : Starting service [Tomcat]
2025-10-02T21:47:43.704+09:00 INFO 8404 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port 8080 (http) with context path '/'
2025-10-02T21:47:43.709+09:00 INFO 8404 --- [ main] c.example.todo_app.TodoAppApplication : Started TodoAppApplication in 0.649 seconds
Spring Boot には組み込みの Tomcat サーバが含まれているため、
追加でサーバをインストールしなくてもすぐに Web アプリを起動できます。
ブラウザから以下にアクセスしてみます。
http://localhost:8080
この時点では画面をまだ作っていないので、次のような Whitelabel Error Page が表示されます。
これはエラーではなく、Spring Boot が正しく起動している証拠です。
2. コントローラー作成
Spring Boot アプリが正しく起動することを確認できたので、
次に コントローラー を作成していきます。
コントローラーは「URLへのリクエストを受け取り、どの画面を表示するか、どんなデータを渡すか」を担当します。
今回はシンプルに、/ にアクセスしたらタスク一覧を表示できるようにします。
src/main/java/com/example/todo_app/ 配下に TodoController.java という
新しいファイルを作成し、以下の内容を記述します👇
コントローラーのポイント
• @Controller
Spring MVC のコントローラーとして動作するクラスであることを示します。
• @GetMapping("/")
/ にアクセスしたときに呼ばれる処理。今回はタスク一覧をビューへ渡しています。
• @PostMapping("/add")
フォームからタスクを追加できるようにする処理。
• @PostMapping("/delete")
指定した番号のタスクを削除する処理。
この時点でコントローラーの実装自体は完了していますが、まだ index.html （ビュー）が
存在しないため、ブラウザからアクセスすると Whitelabel Error Page が表示されます。
これはエラーというよりも、ビューが未定義であることを示している状態です。
次のステップで index.html を作成することで、タスクの一覧や入力フォームが
実際にブラウザ上に表示されるようになります。
3. ビュー作成
コントローラーで return "index"; と指定したので、Spring Boot は
src/main/resources/templates/index.html を探しにいきます。
まだこのファイルを作成していないため、アクセスすると
Whitelabel Error Page が表示される状態でした。
ここでビューを作成して、実際にタスク一覧や入力フォームを表示できるようにします。
src/main/resources/templates/ 配下に index.html を作成し、以下の内容を記述します👇
再度アプリを起動してブラウザから http://localhost:8080 にアクセスします。
こんな感じ👆で入力フォームとタスク一覧が表示される画面が出ました。
これで CLI 版で作った ToDo が Webアプリとして動作する最小形 になりました。
次のフェースでは実際にブラウザ上での操作感を確認していきます。
5. 動作確認編
ここまでで、
• コントローラー（TodoController.java）
• ビュー（index.html）
の2つが完成しました。
http://localhost:8080 にアクセスしてみて
正常に動作していれば、次のような ToDo 画面が表示されます👇
画面上でタスクを入力し「追加」ボタンを押すと、
リストに新しい項目が追加され、
「削除」ボタンで項目を削除できることが確認できます。
では実際に「追加」機能の中身から見ていきます。
今回は画面上のフォームに「買い物に行く」と入力します。
タスク入力欄の下に「買い物に行く」が反映されました。
では続いて「削除」機能の動作を確認してみます。
先ほど追加した「買い物に行く」の右側にある「削除」ボタンをクリックします。
すると、リストから「買い物に行く」が消えました。
このように、不要になったタスクはワンクリックで削除できます。
これで追加と削除の両方の動作を確認できました。
つまり、タスクの登録から削除まで、一連の基本操作がブラウザ上で問題なく行えます。
これで、Spring Boot × Thymeleaf を用いた最小構成のToDoアプリが完成しました。
次のフェーズで、データを一時的に保存する仕組みや、フォームの値の扱い方などを見ていきます。
6. データ管理編
ここからは、ToDoアプリに「データを保存する仕組み」を加えていきます。
これにより、追加や削除したタスクがアプリ内で保持されるようになります。
今回のポイントは以下の4つです。
-
モデルの準備 → タスクを表現する
Taskクラスを用意 - メモリ上での保存 → コントローラーにリストを持たせ、追加・削除を管理
- ビューとの連携 → 入力フォームや削除ボタンからデータを送受信
- 動作確認 → 実際に追加・削除して、リストの内容が変化するか確認
7. 学んだこと、つまづいたこと
学んだこと
• Spring Initializr で標準構成のプロジェクトを作成できること
• 組み込みTomcatで追加設定なしにWebアプリを起動できること
• Controller（処理）とView（Thymeleaf）の役割分担
• フォーム送信で追加／削除処理を行い、redirect:/ でリダイレクトできること
• メモリ上のリストで最小構成のToDoアプリが動かせること
つまづいた点
• IntelliJ IDEA の操作（プロジェクト実行方法）に慣れるまで時間がかかった
• 起動確認時にURLがコンソールに出ると誤解し、ブラウザ入力が必要と気づくのに迷った
• Whitelabel Error Page を「エラー」だと勘違いした
• index.html を正しい場所（src/main/resources/templates）に置かずエラーになった
• ファイル名やフォルダの大文字小文字の違いでビューが認識されなかった
8.まとめ
今回は Spring Boot × Thymeleaf を使って最小構成のWeb版ToDoアプリ を作成しました。
CLI版と比べて大きく発展したのは、
• ブラウザ画面からフォーム入力できること
• タスクを追加・削除すると即座に画面に反映されること
• Controller と View を分けることで、処理と表示の役割を明確にできたこと
といった点です。
一方で、IDEの操作やファイル配置のルールなど、
CLI版では意識しなかった部分でつまづくことも多くありました。
しかし、それらを一つひとつ解決していく過程で
「Spring Bootアプリの基本的な仕組み」を理解できたと思います。
次回は、今回のToDoアプリとは少し趣向を変えて、
Javaで「じゃんけんアプリ」を作ることに挑戦してみたいと思います。
乱数（Random クラス）を使ったコンピュータの手の生成や、
条件分岐による勝敗判定などを通じて、
より実践的なJavaの基本文法を楽しく学べる内容にしていく予定です ✊✌️🖐
最後まで読んでいただき、ありがとうございました 🙌