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

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

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

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

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

最近、インターネットに接続しなかった日のことを思い出してみてください。

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

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

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

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

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

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

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

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

3. Webアプリの構成

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

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

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

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

1. なぜSpring Bootを使うのか？

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

2. 1台のPCでの開発

本番環境では、クライアントとサーバはもちろん別物ですが、今回は1台のPCで開発を行います。開発用PCが以下の3つの役割を担います。

  1. クライアント（ブラウザ）
  2. アプリケーションサーバ（Spring Boot）
  3. データベースサーバ（MySQL）

4. 本研修の方針

私たちが今まで学んできたJavaは**Java SE（Standard Edition）**でした。

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

研修の学習方針

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

なぜなら、Spring Bootの機能は膨大であり、研修ではその一部しか触れられないためです。また、Spring Bootを使うことでHTTPプロトコルの理解を深めることができ、より汎用的な知識を得られるからです。

また、フレームワークを使わずにゼロから作るのではなく、Spring Bootを活用することで、現場で役立つスキルを効率よく習得できるようにします。

5. 本研修の学び方

プログラミングの学び方

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

例えば、以下の計算ができますか？

42 + 123 = ?

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

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

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

6. 本記事の注意点

研修の進め方

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

また、本記事には以下のような実験コーナーを設けています。

本記事には以下のような実験コーナーも設けています。

実験

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

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

例題

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

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

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

今回はWebアプリについて学びました。また、今後の学習の指針を示すこともいたしました。

Web アプリ全体の構造をつかんだら、次はアプリ設計の概念的な枠組みであるMVCモデル について学びます。

このMVCモデルを理解することが本研修のゴールになります。

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

ここでは Eclipse IDE for Enterprise Java and Web Developers (Version: 2022-09, 4.25.0) に Spring Tools 4 (STS) がインストールされていることを前提に進めます。STS統合版を利用されている方も、基本操作はほぼ同様です。

1. Eclipse (STS) の起動とワークスペース選択

  1. Eclipse（STS）を起動します。
  2. 「Select a directory as workspace」でワークスペースを指定し、「Launch」をクリックしてEclipseを起動します。

2. Spring Starter Projectの作成

  1. [File] > [New] > [Spring Starter Project] を選択します。
    • Spring Tools 4 (またはSTS統合版) を利用している場合、このメニューが表示されます。
    • 初回起動直後など、メニューが見当たらない場合は「New > Project...」から「Spring Boot」関連のプロジェクトを探してください。
  2. New Spring Starter Project ウィザード が立ち上がりますので、順に設定していきます。

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

  1. Name（プロジェクト名）：
    • 例）demo
  2. Type：
    • MavenプロジェクトかGradleプロジェクトかを選択します。ここでは多くの場合 Maven を選択。
  3. Packaging：
    • Jar を選択することが多いです（Warを使いたい場合はWarを選びます）。
  4. Java Version：
    • 研修環境やプロジェクトポリシーにあわせて、17 などを選択します（Java 17推奨など）。
  5. Group / Artifact / Version：
    • MavenのグループIDやアーティファクトIDなどを設定します。
    • 例）
      • Group: com.example
      • Artifact: demo
      • Version: 0.0.1-SNAPSHOT
  6. Description / Package：
    • Descriptionは任意の説明文（省略可）
    • Packageはソースのルートパッケージ名です。デフォルトで com.example.demo などが設定されます。
  7. Next をクリックして進みます。

4. Dependencies（依存ライブラリ）の選択

  1. 「Dependencies」画面が表示されるので、使用したいSpring Bootスターターを選択します。
    • 例）
      • Spring Web: Webアプリケーション開発に必須
      • Thymeleaf: テンプレートエンジンを使う場合
      • Spring Data JPA: DBアクセスにJPAを利用する場合
      • H2 Database: 組み込みDBを試す場合
      • その他、開発内容に応じて必要な依存を追加
  2. 選択が終わったら Finish をクリックします。

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

プロジェクトの作成が完了すると、Eclipseの Package Explorer（または Project Explorer）に以下のような構成のMavenプロジェクトが表示されます（例）:

demo
 ┣ src
 ┃ ┣ main
 ┃ ┃ ┣ java
 ┃ ┃ ┃ └ com.example.demo
 ┃ ┃ ┃    ┗ DemoApplication.java  (Spring Bootの起動クラス)
 ┃ ┃ ┗ resources
 ┃ ┃    ┗ application.properties (設定ファイル)
 ┣ pom.xml
 ┗ ...
  • DemoApplication.java（クラス名は任意）に @SpringBootApplication が付与され、main メソッドがあることを確認します。

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

  1. DemoApplication.java を開きます。
  2. メソッドの左側やクラス名の左にある「Run」アイコンをクリックするか、または右クリックメニューより [Run As] > [Spring Boot App] を選択します。
    • 初回起動時は [Run As] > [Java Application] でも自動的にSpring Bootとして起動される場合があります。
  3. Console ビューに次のようなログが表示されれば起動成功です。
    • Started DemoApplication in X.XXX seconds
    • デフォルトでは http://localhost:8080 でアプリが待ち受けています。

7. ブラウザで動作確認

  • ブラウザを起動し、http://localhost:8080 にアクセスします。
  • まだ画面を用意していない場合はエラーや空白ページになるかもしれませんが、Spring Bootのアプリが正常に起動している場合はログにアクセスの痕跡が残ります。
  • Controller や View （Thymeleafなど）を実装していれば、正常に画面が表示されます。

8. 終了手順

  • Eclipseの Console ビューの停止ボタンをクリックすると、実行中のSpring Bootアプリケーションが停止します。
  • 再度起動したい場合は、同様に Run As > Spring Boot App やメインメソッドの実行を行ってください。

補足・トラブルシュート

  • Spring Starter Project が見当たらない
    • 「Help > Eclipse Marketplace...」で「Spring Tools」または「Spring Tools 4」を検索し、インストール（または最新化）を行ってください。
  • ポート競合エラーが出る ( Tomcat port already in use 等 )
    • 既に別のプロセスが8080番ポートを使用している可能性があります。
    • application.properties または application.yml で server.port=xxxx のように変更して、ポートを変えることができます。
  • Mavenリポジトリの同期エラー
    • ネットワーク制限や社内プロキシがある場合はMavenの設定が必要かもしれません。
    • 「Window > Preferences > Maven」でプロキシ設定やリポジトリ設定を確認してください。

以上が、Eclipse（STS）でSpring Bootプロジェクトを作成する基本的な手順です。