10-0. フルスタック実践の準備をする

このセクションで学ぶこと

Java（JDK 21 LTS）のインストール方法
インストールが正しくできたかを確認する方法
VS Code に Java 開発用拡張機能を追加する方法
フロントエンドとバックエンドを格納するプロジェクト全体のディレクトリ構成を作る方法

第10章では、ここまで学んだ HTML / JavaScript / Java を 1 つの書籍管理アプリへつなげていく。
フロントエンドとバックエンドの両方を触るため、まずここで Java 実行環境と VS Code の準備を整えてから、10-1 以降のコーディングへ進む。

1. Java（JDK）とは

Java でプログラムを実行するには JDK（Java Development Kit） が必要である。 JDK には「コンパイラ（javac）」と「実行環境（java）」の両方が含まれている。

ソースコード (.java)
    ↓ javac（コンパイラ）
バイトコード (.class)
    ↓ java（JVM・実行環境）
プログラム実行

JDK にはいくつかのディストリビューション（配布元）があるが、この研修では Eclipse Temurin（旧 AdoptOpenJDK） を使う。理由は、無償・オープンソース・長期サポート（LTS）があり、企業でも広く使われているためである。

バージョンについて Java は2年ごとに LTS バージョンがリリースされる。本研修では Java 21 LTS を使用する。

2. JDK 21 をインストールする

ブラウザで https://adoptium.net/temurin/releases/?version=21 を開く
JDK 21 - LTS タブが選択されていることを確認する
Windows のカードにある ⬇ ボタンをクリックして .msi インストーラをダウンロードする（例：OpenJDK21U-jdk_x64_windows_hotspot_21.0.x_x.msi）
ダウンロードした .msi ファイルをダブルクリックする
インストーラが起動したら Next で進める
Add to PATH のオプションが表示された場合は有効にしておく
Install を押して完了まで待つ
Finish を押して終了する

3. インストールを確認する

Git Bash を新しく開いて、次のコマンドを実行する。

java --version

以下のように Java 21 のバージョン情報が表示されれば成功である。

openjdk 21.0.x 2024-xx-xx LTS
OpenJDK Runtime Environment Temurin-21.0.x+x (build 21.0.x+x-LTS)
OpenJDK 64-Bit Server VM Temurin-21.0.x+x (build 21.0.x+x-LTS, mixed mode, sharing)

コンパイラのバージョンも確認する。

javac --version

javac 21.0.x

「command not found」と表示される場合 ターミナルを一度閉じて新しく開き直す。それでも解決しない場合は、PATH が正しく設定されていない可能性がある。 Windows の場合はシステム環境変数の Path に C:\Program Files\Eclipse Adoptium\jdk-21.x.x.x-hotspot\bin が含まれているか確認する。

4. VS Code に Java 拡張機能を追加する

VS Code 単体では Java の開発補助機能（補完・エラー表示・デバッグ）が使えない。 Extension Pack for Java を追加することで、これらが一括で有効になる。

インストール手順

VS Code を開く
左サイドバーの 拡張機能アイコン（四角が4つのアイコン）をクリックする
検索ボックスに Extension Pack for Java と入力する
Extension Pack for Java（Microsoft 製）が表示されたら Install をクリックする
インストールが完了するまで待つ

インストールされる拡張機能

Extension Pack for Java は以下の拡張機能を一括でインストールする。

拡張機能	役割
Language Support for Java	コード補完・型チェック・フォーマット
Debugger for Java	ブレークポイントを使ったデバッグ
Test Runner for Java	JUnit テストの実行・結果表示
Maven for Java	Maven プロジェクトの管理
Project Manager for Java	プロジェクト一覧の管理
IntelliCode	AIによるコード補完の強化

この章の実践では Gradle を使う Extension Pack for Java には Maven 関連拡張も含まれるが、第10章の実践では https://start.spring.io/ が生成する gradlew / gradlew.bat を使う。
Windows でも Git Bash を使うなら、実行コマンドは基本的に ./gradlew ... の形で進められる。
そのため、Gradle 本体を別途インストールしなくても進められる。

5. 動作確認（Hello World）

環境が正しく整ったか確認するため、小さなプログラムを動かしてみる。

手順

任意のフォルダ（例：~/workspace/hello-java/）を作成する
VS Code でそのフォルダを開く（File > Open Folder...）
Hello.java というファイルを作成して、以下を入力する

public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!");
    }
}

ファイルを保存する（Ctrl+S）
VS Code のターミナル（通常は Ctrl + @。分からなければメニューの「Terminal > New Terminal」でもよい）を開く
まず現在位置を確認する

pwd
ls

Hello.java が見える場所にいれば、そのターミナルでそのままコンパイルできる。

次を実行する

javac Hello.java
java Hello

Hello, Java! と表示されれば成功である

Hello, Java!

VS Code の「Run」ボタンでも実行できる Hello.java を開いているとき、右上に ▷ ボタンが表示される。クリックするとコンパイルと実行が自動で行われる。

javac: command not found や file not found: Hello.java が出たら 前者は JDK の PATH 設定、後者はターミナルの現在位置が原因であることが多い。
まず javac --version と現在ディレクトリ確認へ戻る。

6. プロジェクト全体のディレクトリ構成を作る

第10章では、フロントエンド（HTML/CSS/JS）とバックエンド（Spring Boot API）を1つのフォルダにまとめて管理する。ここで先に 全体の骨格 を作っておくと、以降の章で迷わずに進められる。

完成後のディレクトリ構成

book-app/
├── book-frontend/   ← フロントエンド（HTML / CSS / JS）
└── bookmanager/     ← バックエンド（Spring Boot API）

手順

Git Bash を開く
第0章で作った作業ディレクトリへ移動する（例：~/workspace/）
次のコマンドを実行して book-app/ と book-frontend/ を作成する

mkdir -p book-app/book-frontend

作成されたことを確認する

ls book-app/

book-frontend/

この時点では bookmanager/ はまだない。次のセクションで Spring Initializr から生成した zip を展開して追加する。

7. Spring Initializr で API プロジェクトを作る

フルスタック実践のバックエンドは、手で src/main/java を組み立てるより、Spring Initializr (https://start.spring.io/) で Gradle プロジェクトを生成する ほうが迷いにくい。ここでは 10-4 以降で使う 土台だけ を先に作っておく。

入力する設定

項目	値
Project	Gradle - Groovy
Language	Java
Spring Boot	デフォルトの安定版
Group	`com.example`
Artifact	`bookmanager`
Package name	`com.example.bookmanager`（自動補完されるので確認だけでよい）
Packaging	Jar
Java	21
Dependencies	Spring Web / Validation / Spring Data JPA / H2 Database

Artifact に bookmanager を指定すると、Package name は com.example.bookmanager と正しく自動補完される。 Name の BookManager は生成されるメインクラス名（BookManagerApplication.java）に使われる。

設定例の画面

Spring Initializr で Project に Gradle - Groovy、Language に Java、Group に com.example、Artifact に bookmanager、Name に BookManager、Package name に com.example.bookmanager、Dependencies に Spring Web、Validation、Spring Data JPA、H2 Database を選択した画面。

作成手順

ブラウザで https://start.spring.io/ を開く
上の表のとおりに項目を設定する
GENERATE を押して zip をダウンロードする
zip を展開する
展開してできた bookmanager/ フォルダを book-app/ の中へ配置する（エクスプローラーでフォルダごとドラッグするか、コピー＆ペーストでよい）
配置後の構成を確認する

ls book-app/

book-frontend/  bookmanager/

展開直後の bookmanager/ は、次のような Gradle プロジェクトになっていればよい。

book-app/
├── book-frontend/
└── bookmanager/
    ├── build.gradle
    ├── gradlew
    ├── gradlew.bat
    ├── settings.gradle
    └── src/
        ├── main/
        │   ├── java/
        │   │   └── com/example/bookmanager/
        │   │       └── BookManagerApplication.java
        │   └── resources/
        └── test/
            └── java/
                └── com/example/bookmanager/
                    └── BookManagerApplicationTests.java

gradlew / gradlew.bat は Gradle Wrapper で、ローカルに Gradle がなくても同じコマンドで実行できる。 BookManagerApplication.java やテスト用クラスは Spring Initializr が最初から自動生成するので、見えていて問題ない。 10-4 ではこのプロジェクトの src/main/java/com/example/bookmanager/ 配下へ Controller / Service / DTO を追加していく。

まとめ

確認項目	コマンド / 方法	期待する結果
JDK インストール確認	`java --version`	`openjdk 21.x.x` と表示される
コンパイラ確認	`javac --version`	`javac 21.x.x` と表示される
VS Code 拡張機能	拡張機能一覧で確認	Extension Pack for Java が表示される
Hello World 実行	`javac Hello.java && java Hello`	`Hello, Java!` と表示される
ディレクトリ構成作成	`mkdir -p book-app/book-frontend`	`book-app/book-frontend/` が作成される
API プロジェクト生成	`https://start.spring.io/` → `book-app/` に配置	`book-app/bookmanager/` の Gradle プロジェクトが用意できる

次のステップ

10-1. 要件を読み、UIの土台を作るへ進み、まずはアプリ全体の画面構成を整理しよう。