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

Spring Boot2.3,2.4で日記投稿ウェブアプリ入門の第1回です。Javaで人気のフレームワークのSpring Bootを使ってMVCモデルのウェブアプリを作っていこうと思います。題材は日記投稿アプリです。データベースはH2を使用します。まずはEclipseのプロジェクト作成からです。Spring Bootの初心者・入門者の方は、参考にしてみてください。

動作環境と今回の目的

最終更新日:2021/5/19

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

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

◾️動作環境やバージョンは以下の通りです。
OS:macOS Catalina(バージョン10.15.5)
開発環境:Eclipse(Pleiades All in One、4.16(2020-06)、Java Full Edition版)
Spring Bootバージョン:2.3.3、2.4.0
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でもできると思います。

◾️Spring Bootのバージョンについて
今回開発していくSpring Bootのウェブアプリのバージョンは、2.3.3と2.4.0の2つで動作する事を確認しています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
H2、Spring Data JPAテストのためSpring Bootプロジェクト作成

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

◾️Spring Bootのバージョン2.2について
上記の7つの依存関係のライブラリが必要なのは、Spring Bootのバージョン2.3と2.4の場合です。
Spring Bootのバージョン2.2では、入力フォームのバリデーションは「Spring Web」があればできるので、「検証」は選択しなくても大丈夫です。

アプリの実行と動作確認

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

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

プロジェクトを作成すると1つだけJavaファイルが自動で作成されて(SpringbootDiaryWebappApplication.java)、そのファイル内にmainメソッドがありますので、このファイルを右クリック->実行->Spring Bootアプリケーションを選択するとアプリが起動します。 アプリが起動すれば、コンソールタブに起動ログが出力されるはずです。

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

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

最後に、次回

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

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

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

[広告] Kindle Unlimitedなら対象の本が定額で読み放題
対象本には、プログラミングなどのIT関連本、マンガ、雑誌、ビジネス書などがたくさんあります!