1. なぜ、新人エンジニア研修でWebアプリケーションを学ぶのか?

当社の新人エンジニア研修でWebアプリケーションを学ぶ理由は以下の3点です。

  • これまで学んできたJavaプログラミング、ネットワーク、HTML、データベースの総復習になる。
  • Webアプリケーションはデスクトップアプリよりも今後の成長が期待できる。
  • 仮にWebアプリケーションの仕事につかないとしても、利用者の視点から学ぶことが多い(セキュリティなど)。

2. Webアプリケーションとは?

Webアプリケーション(以下、Webアプリ)とは、ブラウザ等から要求を受け取り、応答を返すものです。

最近、Webサイトを目にしなかった日のことを思い出してみてください。

なかなか答えられない質問かもしれません。

では、我々はインターネットでどのようなことをしているでしょうか?

  • 生成AIやグーグルで調べ物をする
  • オンラインショッピングをする
  • SNSで友達と交流する

これらはすべてWebアプリを使って実現できます。

Webアプリとは、Web(World Wide Web)技術を基盤としたアプリケーションソフトウェアのことです。

私たちはすでにHTMLを学びWebページを作成しました。それらのWebページとこれから学ぶWebアプリとは何が違うのでしょうか?

以前作成したWebサイトは静的サイトとも呼ばれます。静的サイトは、HTMLとCSS、JavaScriptで構成された単なるファイルで、サーバーを通してクライアントにレスポンスされることでブラウザに表示されます。静的サイトは誰がいつアクセスしても同じファイルを送信します。

一方、これから学ぶWebアプリは動的サイトを提供します。動的サイトは誰がいつアクセスするかによって異なるファイルを送信します。動的サイトは、クライアントからリクエストがあった場合、サーバーでコンテンツを生成し、リクエストの内容に応じたレスポンスを返します。

3. Webアプリの構成

当社の新人エンジニア研修で作成するWebアプリの構成を以下に示します。

Webアプリの構成
  • クライアント:Webブラウザ
  • アプリケーションサーバ:Spring Bootを使用
  • データベースサーバ:MySQL

クライアントサイドはすでにHTMLで、データベースサーバはすでにMySQLで学びました。そのため、今回はアプリケーションサーバの部分を学びます。

アプリケーションサーバにはSpring Bootを使用します。Spring Bootは、従来よりも効率的にWebアプリケーションを開発できるフレームワークです。

なぜSpring Bootを使うのか?

  • 設定がシンプル:Tomcatなどのコンテナの設定を意識せずに済む。
  • 開発スピードが向上:Boilerplate(定型コード)が少なく、少ない記述で開発ができる。
  • テストしやすい:組み込みのTomcatで動作確認が簡単にできる。
  • 拡張性が高い:業務システムでよく使われる機能が組み込まれている。(ただし、この研修で使用するのは一部です)

4. 本研修の方針

私たちが今まで学んできたJavaはJava SE(Standard Edition)でした。

これからはSpring Bootを活用しながら、サーバ向けや大規模システム向けの高度な機能を学んでいきます。

研修の学習方針

  • Spring Bootの基本機能を学ぶ
  • 当社のシステム開発演習に必要な部分のみを学ぶ
  • システム開発を経験するための道具としてSpring Bootを使う

なぜなら、Spring Bootの機能は膨大であり、研修ではその一部しか触れられないためです。

Spring Bootを活用することで、現場で役立つスキルを効率よく習得できるようにします。

5. 学び方のコツ

プログラミングの学び方

プログラミングを暗記しようとしてはいけません。

例えば、みなさんは以下の計算ができますか?

42 + 123 = ?


これまでに同じ計算をしたことがあるとは限りませんが、足し算のコンセプトを理解していれば簡単に計算できます。

プログラミングも同じで、重要なのはコンセプトの理解です。一度コンセプトを覚えれば、あとは応用するだけです。現代ではインターネット検索やIDEの補完機能、生成AIも学習を助けてくれます。

ただし、掛け算の九九のように覚えた方が便利なことがあるのも事実です。

6. 本記事の注意点

研修の進め方

  • アウトプット中心:読んだだけでは身につきません。必ず手を動かしてください。
  • リファレンスを目指さない:すべての文法事項を網羅するのではなく、必要な部分を学びます。
  • 他教科との連携:データベース、ネットワークなど他の知識と関連づけながら学びます。

このテキストではポイントが明確になるように以下のようなコーナーを設けています。

ポイント

また、以下のような実験コーナーや調べてみましょうコーナーを設けています。

実験

調べてみましょう

これらは必ずしもやらなくても研修に大きな支障はありません。しかし、一度試してみるとより良くWebアプリケーションのことが理解できるテーマを選んでいます。

対して以下のような練習問題はアウトプットの機会です。

例題

手だけでなく頭も動員することで記憶に定着しますから必ずやってください。

記憶の定着のためには紙とペンを使って書き込むことも有効です。ところどころに以下のような書き込み欄を設けているのはそのためです。

  • 42 + 123 =
あなたの答え:

7. EclipseでSpring Bootプロジェクトを作成する手順

ここでは Eclipse IDE for Enterprise Java and Web Developers (Version: 2022-09, 4.25.0) に Spring Tools 3.4.3がインストールされていることを前提に進めます。

7.1 Spring Starter Projectの作成

  1. [ファイル] > [新規] > [その他] >[Spring スターター・プロジェクト] を選択します。
  2. Spring スターター・プロジェクト ウィザード が立ち上がりますので、順に設定していきます。

7.2 Spring Starter Project ウィザードの各項目設定

名前(プロジェクト名)以外はデフォルトで結構です。

Spring スターター・プロジェクト
  1. 名前(プロジェクト名):
    • 例)demo
  2. タイプ:
    • Mavenプロジェクトを選択します。
  3. パッケージング
    • Jar を選択します。
  4. Java バージョン
    • Java 17。
  5. グループ / 成果物 / バージョン
    • MavenのグループIDやアーティファクトIDなどを設定します。
    • 例)
      • Group: com.example
      • Artifact: demo
      • Version: 0.0.1-SNAPSHOT
  6. 説明/ パッケージ:
    • Descriptionは任意の説明文(省略可)
    • Packageはソースのルートパッケージ名です。デフォルトで com.example.demo などが設定されます。
  7. Next をクリックして進みます。

Mavenとは

Maven(メイヴェン)は、Javaを中心としたプロジェクトのビルドと依存関係管理を自動化するツールです。XML形式の設定ファイル(pom.xml)を用いて、ライブラリの取得、コンパイル、テスト、パッケージ化を一括で管理できます。依存ライブラリを中央リポジトリから自動取得できるため、手動管理の手間を削減できます。また、プラグインを活用することで、デプロイやドキュメント生成なども簡単に実行できます。Java開発において標準的なツールの一つとして広く利用されています。

7.3 Dependencies(依存ライブラリ)の選択

  1. 「Dependencies」画面が表示されるので、使用したいSpring Bootスターターを選択します。
    • 主として以下の4つを使いますがプロジェクトにより異なりますので講師の指示に従って下さい。)
      1. Spring Boot DevTools: 開発効率向上のためのホットリロードや自動再起動機能
      2. Spring Web: Webアプリ開発用の基本機能
      3. Thymeleaf: HTMLテンプレートエンジン
      4. MySQL Driver: MySQLデータベース接続用ドライバ
  2. 選択が終わったら 完了 をクリックします。

ホットリロードや自動再起動機能で楽々開発

Eclipseの「プロジェクト」メニュー → 「自動的にビルド」を有効化します。

自動的にビルド

ホットリロード機能は、Javaのソースコード保存時に自動的に再コンパイルします。

自動再起動機能は、コンパイル可能なクラスファイル(.class)やリソース(templatesフォルダ内のHTML、staticフォルダ内のCSS・JS等)が変更されると、自動で再起動してくれます。

ファイルを保存するとコンソールの表示が更新されますのでホットリロード機能が効いていることが確認できます。

7.4 プロジェクトの初期構造の確認

プロジェクトの作成が完了すると、Eclipseの パッケージエクスプローラーに以下のような構成のMavenプロジェクトが表示されます

(例):

demo
 ┣ src
 ┃ ┣ main
 ┃ ┃ ┣ java
 ┃ ┃ ┃ └ com.example.demo
 ┃ ┃ ┃    ┗ DemoApplication.java  (Spring Bootの起動クラス)
 ┃ ┃ ┗ resources
 ┃ ┃    ┗ application.properties (設定ファイル)
 ┣ pom.xml
 ┗ ...

DemoApplication.java(クラス名は任意)に @SpringBootApplication が付与され、main メソッドがあることを確認します。

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}
}

pom.xmlとは

pom.xml(Project Object Model)は、Mavenプロジェクトの設定ファイルであり、XML形式で記述されます。プロジェクトの依存関係、ビルド手順、プラグイン、リポジトリ情報などを管理します。主な要素として、<groupId>(組織識別子)、<artifactId>(プロジェクト名)、<version>(バージョン)があり、<dependencies>で外部ライブラリを指定します。Mavenはpom.xmlを基に依存関係を解決し、ビルドやテストを自動化します。

7.5 Spring Bootアプリケーションの起動

  1. Spring Bootの起動クラス(例:DemoApplication.java )を選択し、右クリックメニューより [実行] > [Spring Boot アプリケーション] を選択します。
  2. コンソールに次のようなログが表示されれば起動成功です。
    • Started DemoApplication in X.XXX seconds
    • デフォルトでは http://localhost:8080 でアプリが待ち受けています。
  3. 以下のBoot ダッシュボードから(再)起動したり停止するのも便利です。

Boot ダッシュボードが便利

EclipseのBoot ダッシュボード(Boot Dashboard)は、Spring Bootアプリケーションの起動や停止、状態確認を効率的に行うための専用ビューです。起動中のアプリケーション一覧やポート番号、アクティブプロファイルが直感的に表示され、複数のSpring Bootプロジェクトをまとめて管理できます。また、ログの確認や再起動、デバッグ実行などもワンクリックで実施でき、開発効率を高めます。

Boot ダッシュボード

7.6 ブラウザで動作確認

ブラウザを起動し、http://localhost:8080 にアクセスします。

まだ画面を用意していない場合は以下のエラーページになりますが、Spring Bootのアプリが正常に起動している場合はログにアクセスの痕跡が残ります。

画面を用意していない場合のエラーページ

ControllerView (Thymeleafなど)を実装していれば、正常に画面が表示されます。

実験

ホットリロード機能を試してみましょう。

DemoApplication.javaのメインメソッドに「System.out.println("Hello Spring Boot");」と書き加えて保存するとコンソールでどのようなことが起こるか観察しましょう。

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
		System.out.println("Hello Spring Boot");
	}
}

7.7 終了手順

Eclipseの コンソールビューの停止ボタン(赤いボタン)をクリックすると、実行中のSpring Bootアプリケーションが停止します。

再度起動したい場合は、同様に実行を行ってください。

○×問題

問題1
Spring Web は主にデスクトップアプリケーション開発向けのライブラリである。

問題2
pom.xmlファイルはJavaのソースコードを記述するファイルである。

問題3
Spring Boot DevToolsを導入すると、アプリケーションのソースコード変更時に自動的に再起動が行われるようになる。

問題4
Spring Bootプロジェクト作成時に自動生成される起動クラス(例:DemoApplication.java)には、@SpringBootApplicationアノテーションが付与される。

問題5
ブラウザでhttp://localhost:8080にアクセスしても、ControllerやViewが実装されていなければ画面は正常に表示されない。

問題6
pom.xmlは、Mavenプロジェクトの設定を記述するXML形式のファイルである。

<まとめ:隣の人に正しく説明できたらチェックを付けましょう>

□ Webアプリを学ぶことでJava、ネットワーク、HTML、データベースの総復習になる

□ Webアプリは動的サイトとも呼ばれリクエストに応じて異なる内容を返す

□ Spring Bootを使う理由は①設定がシンプル(Tomcat設定不要)②開発が速い(定型コードが少ない)③組み込みサーバで起動が簡単でホットリロード機能があるためである。

□ Spring Bootプロジェクトの作成手順は、①Spring Starter Projectを作成(Maven)②依存ライブラリを選択(Spring Web, Thymeleaf, MySQLなど)③ アプリを起動し、ブラウザで動作確認(http://localhost:8080)

第1章の今回はWebアプリについて学びました。また、EclipseでSpring Bootプロジェクトを作成する基本的な手順についても学びました。

Web アプリ全体の構造をつかんだら、第2章は「MVCパターンを理解する 〜 Webアプリ開発の基本」を学びます。