(第1回) Spring Boot2で日記ウェブアプリの開発入門スタート

Spring Boot2.7で日記投稿ウェブアプリ入門の第1回です。Javaで人気のフレームワークのSpring Bootを使ってMVCモデルのウェブアプリ(Webサイト)を作って開発します。題材は日記投稿アプリです。データベースはH2を使用します。まずはEclipseのプロジェクト作成からです。Spring Bootの初心者・入門者の方や、独学(個人)で勉強したい方は参考にしてみてください。

※ 本ページはプロモーションが含まれています。

動作環境と今回の目的

最終更新日:2022/11/25

前回の記事では、JavaフレームワークのSpring Bootの特徴や開発で使う事のメリット、Spring Bootでできる事についてなどを話しました。
(第0回) Javaで人気のフレームワークSpring Boot

今回からは、Spring Bootを使って実際にウェブアプリ(Webサイト)を開発していこうと思います。

◾️動作環境やバージョンは以下の通りです。
OS:macOS Big Sur(バージョン11.7.1)
開発環境:Eclipse(Pleiades All in One、4.16(2020-06)、Java Full Edition版)
Spring Bootバージョン:2.7.5
->2.4でも確認済み
Java:11
データベース:H2

◾️Eclipse(Pleiades All in One、Java Full Edition版)
Eclipse(Pleiades All in One、Java Full Edition版)は、最初からEclipseの日本語化がされていますし、STS(Spring Tool Suite)やLombokなどの複数の有用なプラグインも入っていて設定済みなので、開発環境構築の手間が省けます。
Eclipse(Pleiades All in One)のインストールについては別ページに書いていますので、そちらを参考にしてください。

【Java初心者】Eclipse(Pleiades All in One)をインスールしてJava開発ができるようにする

ただEclipse(Pleiades All in One)でなくても、これからやっていく事はSTSプラグインを入れたEclipseならできると思いますし、もちろんSTSでもできると思います。

Javaウェブアプリ開発で人気のフレームワークSpring Boot

Javaでウェブアプリやウェブサイトを開発する場合、MVCモデルのフレームワークを使う事が多いと思います。特にチーム開発であればそうです。

フレームワークを使う事でウェブアプリ開発の共通部分をフレームワークが負担してくれますし、様々な機能も提供されているので、プログラマが書くコード量を削減できて、開発を高速化できます。

そして、前回の第0回のページでも話しましたが、Spring BootはJavaで人気のあるフレームワークです。Spring Bootを使う事で、ウェブアプリやREST API(Web API)を開発する事が可能です。実際にJava開発の仕事の現場でもSpring Bootは使われています。

ここでは、Spring Bootを使って実際にウェブアプリを開発し、Spring Bootが初めての入門者の方でもなるべくわかりやすく解説していこうと思います。

Spring Bootで日記投稿ウェブアプリ開発

Spring BootでMVCモデルのウェブアプリを作る題材として、ブラウザ上で動作する簡単な日記投稿ウェブアプリを想定して開発していこうと考えています。
日記の新規投稿だけでなく、編集、削除、一覧表示という基本的なCRUD機能を備えた物を作るつもりです。
日記投稿なので、機能的にはブログ、ツイート、メモ書き、掲示板、コメント投稿アプリなどにも応用できると思います。

日記投稿ウェブアプリ(ウェブサイト)の完成時のイメージです。
Spring BootのThymeleafにBootstrap導入
*日記一覧データと新規投稿画面
【Spring Boot】日記アプリの編集画面
*日記の編集画面

また、今回のウェブアプリでは、投稿した日記データを保存するため(CRUD機能を備えるため)にDBを使用します。DBはH2を使用します。 H2はインストール作業は必要なく、Eclipse(STS)でSpring Bootアプリを開発するのにバンドルされていて簡単に使う事ができるので、テスト用や学習用として適しています。

H2の詳しい使い方などについては別ページで書いていますので、そちらも参考にしてみてください。

H2データベース入門【Spring Boot】

EclipseでSpring Bootのプロジェクトを作成する

それではまず、EclipseでSpring Bootのプロジェクトを作成します。

EclipseでSpring Bootプロジェクトの新規作成については別ページで書いていますので、そちらを参考にしてください。
Sprint Boot2で初めてのJavaのウェブアプリ開発

Eclipse(Pleiades All in One)のインストールについても別ページで書いていますので、そちらを参考にしてください。
【Java初心者】Eclipse(Pleiades All in One)をインスールしてJava開発ができるようにする

今回、Spring Bootプロジェクトの作成時に選択する必要な依存関係のライブラリは7つです。

  • Spring Boot Devtools
  • Lombok
  • 検証
  • Spring Data JPA
  • H2 Database
  • Thymeleaf
  • Spring Web
EclipseでSpring Bootプロジェクト作成時のライブラリ依存関係の選択

"Spring Data JPA"はH2データベースの操作・接続のため、"Lombok"はエンティティクラスのコード量を削減するため、”Thymeleaf”は画面テンプレートのため、"検証"は入力フォームのバリデーションのために使用します。

◾️Spring Bootのバージョン2.2の場合
Spring Bootのバージョン2.2では、入力フォームのバリデーションは「Spring Web」があればできるので、依存関係のライブラリで「検証」は選択しなくても大丈夫だと思います。古いバージョンなので新規開発で使用する事はないと思いますが。

初めてのSpring Bootアプリの実行と動作確認

Spring Bootのプロジェクトの作成が完了したらアプリを起動してみます。アプリを起動すると言っても、Spring Bootのひな形プロジェクトができただけですので、一応の動作確認です。

今回作成したプロジェクト名は「springboot-diary-webapp」です。
Spring Bootウェブアプリの起動

プロジェクトを作成するとSpringbootDiaryWebappApplication.javaというJavaファイルが自動で作成されます。このファイル内にmainメソッド(アプリのエントリポイント)があるので、このファイルを右クリック->実行->Spring Bootアプリケーションを選択すればSpring Bootのウェブアプリが起動できます。(2回目以降の起動なら、Eclipseの上部メニューバーにある起動ボタンを押せば簡単に起動できます。)

アプリが起動すれば、コンソールタブに起動ログが出力されるはずです。
そして、起動したらウェブアプリ(Webサイト)ですので「http://localhost:8080 」にアクセスできるようになります。
(*Spring Bootではプロジェクトの作成時に"Spring Web"を必要な依存関係のライブラリで選択していれば、Tomcatが組み込まれます)

とは言ってもまだ何も作っていませんので、エラーページが表示されるだけです。
Spring Bootブラウザエラーページ

起動中のウェブアプリを終了するには、コンソールタブ上部にある赤い停止ボタンを押せば終了できます。

(広告)AmazonでSpring Boot3(バージョン3系)の初心者向け入門書を探す!本でSpring Bootプログラミング開発を体系的に勉強する!

最後に、次回について

以上、Spring Bootで日記投稿ウェブアプリの開発入門のスタートとして、EclipseでSpring Bootプロジェクトの作成までをやってみました。

次回はウェブアプリの開発に入る前に、SQLログ出力の設定とDBの接続設定をやっておこうと思います。

(第2回) DB(H2)接続設定とSQLログ出力の設定【Spring Boot2で日記投稿ウェブアプリ】
Spring Bootの日記投稿ウェブアプリ開発入門トップ