目次
- 1 🛠️ Spring超入門 #04 Maven基礎
- 2 🎯 今回の目標
- 3 ⚙️Mavenとは
- 4 🌐Spring Initializr
- 5 🚀 Spring Bootプロジェクト作成ツール
- 6 💡 Spring Initializrの役割
- 7 📦依存関係とリポジトリ
- 8 🔄 Mavenの依存関係管理フロー
- 9 📋 pom.xmlの依存関係例
- 10 ⚙️設定ファイル
- 11 📁フォルダー構成
- 12 🏗️ Spring Bootプロジェクトの主要フォルダー
- 13 🎨今回のサンプル仕様
- 14 🎯 作成するWebアプリ
- 15 🛠️実装手順
- 16 1. Spring Bootプロジェクト作成
- 17 2. コントローラー作成
- 18 3. CSSファイル作成
- 19 4. HTMLテンプレート作成
- 20 🔑 重要なポイント
- 21 5. アプリケーション起動・動作確認
- 22 🎉 まとめ
- 23 🔄 Maven依存関係管理の流れ（まとめ）
- 24 ⚠️ よくあるトラブルと対処法
🛠️ Spring超入門 #04 Maven基礎
🎯 今回の目標
ビルドツールMavenの基本を理解し、Spring BootプロジェクトでCSSを適用したWebアプリを作成する
⚙️Mavenとは
🔧ビルドツール
Javaプロジェクトの以下を管理：
- プロジェクト構造管理
- 依存関係の管理
- ビルド処理
- デプロイ処理
📄pom.xml
Project Object Model
- プロジェクトの構成
- 依存関係の定義
- ビルド設定
- プラグイン管理
🌐Spring Initializr
🚀 Spring Bootプロジェクト作成ツール
- Web版： https://start.spring.io/
- Eclipse統合版： 前回使用した機能
- 機能： 基本情報と依存関係を設定してpom.xmlを自動生成
💡 Spring Initializrの役割
開発者が画面で選択した設定をもとに、Mavenのpom.xmlファイルを自動作成し、プロジェクトの雛形を提供します。
📦依存関係とリポジトリ
🔄 Mavenの依存関係管理フロー
- pom.xmlに依存関係を記述
- Maven Central Repositoryを参照
- 必要なJARファイルをダウンロード
- ローカルリポジトリに保存
- プロジェクトで利用可能になる
📋 pom.xmlの依存関係例
<dependencies>
<!– Spring Boot Web Starter –>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency><!– Thymeleaf Template Engine –>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency><!– Spring Boot Dev Tools –>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
</dependencies>
<!– Spring Boot Web Starter –>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency><!– Thymeleaf Template Engine –>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency><!– Spring Boot Dev Tools –>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
</dependencies>
⚙️設定ファイル
📄pom.xml
Mavenビルドツール用
- プロジェクト構成
- 依存関係
- ビルド設定
- プラグイン管理
配置： プロジェクト直下
🔧application.properties
Spring実行時用
- DB接続設定
- サーバーポート設定
- ロギング設定
- その他実行時設定
配置： src/main/resources
📁フォルダー構成
🏗️ Spring Bootプロジェクトの主要フォルダー
spring-start-04/
├── src/main/java/ ← Javaソースファイル
│ └── com.example.demo/
│ ├── SpringStart04Application.java ← アプリ入口
│ └── controller/
│ └── WelcomeSpringController.java
├── src/main/resources/ ← Java以外のファイル
│ ├── static/ ← 静的ファイル（CSS、JS等）
│ │ └── css/
│ │ └── style.css
│ ├── templates/ ← HTMLテンプレート
│ │ └── welcomespring.html
│ └── application.properties ← アプリ設定
├── Maven依存関係/ ← ローカルリポジトリ（JARファイル群）
└── pom.xml ← Maven設定ファイル
├── src/main/java/ ← Javaソースファイル
│ └── com.example.demo/
│ ├── SpringStart04Application.java ← アプリ入口
│ └── controller/
│ └── WelcomeSpringController.java
├── src/main/resources/ ← Java以外のファイル
│ ├── static/ ← 静的ファイル（CSS、JS等）
│ │ └── css/
│ │ └── style.css
│ ├── templates/ ← HTMLテンプレート
│ │ └── welcomespring.html
│ └── application.properties ← アプリ設定
├── Maven依存関係/ ← ローカルリポジトリ（JARファイル群）
└── pom.xml ← Maven設定ファイル
🎨今回のサンプル仕様
🎯 作成するWebアプリ
URL： http://localhost:8080/welcome
リクエスト： GETリクエスト
レスポンス： 「ハロー ウェルカムスプリング」をCSS適用済みHTMLで表示
🛠️実装手順
1. Spring Bootプロジェクト作成
設定内容：
- 名前： spring-start-04
- タイプ： Maven
- 依存関係： Spring Boot DevTools, Spring Web, Thymeleaf
2. コントローラー作成
|
1 2 3 4 5 6 7 8 9 |
@Controller public class WelcomeSpringController { @GetMapping("/welcome") public String welcome() { // HTMLテンプレート名を返す return "welcomespring"; } } |
3. CSSファイル作成
配置場所： src/main/resources/static/css/style.css
body {
font-family: Arial, sans-serif;
background-color: lightgreen;
text-align: center;
}h1 {
font-size: 2em;
color: green;
}h2 {
font-size: 1.5em;
background-color: green;
color: white;
padding-top: 6px;
padding-bottom: 6px;
}
font-family: Arial, sans-serif;
background-color: lightgreen;
text-align: center;
}h1 {
font-size: 2em;
color: green;
}h2 {
font-size: 1.5em;
background-color: green;
color: white;
padding-top: 6px;
padding-bottom: 6px;
}
4. HTMLテンプレート作成
配置場所： src/main/resources/templates/welcomespring.html
<!DOCTYPE html>
<html xmlns:th=”http://www.thymeleaf.org”>
<head>
<meta charset=”UTF-8″>
<title>ウェルカムスプリング</title>
<link rel=”stylesheet” th:href=”@{/css/style.css}”>
</head>
<body>
<h1>ハロー</h1>
<h2>ウェルカムスプリング</h2>
</body>
</html>
<html xmlns:th=”http://www.thymeleaf.org”>
<head>
<meta charset=”UTF-8″>
<title>ウェルカムスプリング</title>
<link rel=”stylesheet” th:href=”@{/css/style.css}”>
</head>
<body>
<h1>ハロー</h1>
<h2>ウェルカムスプリング</h2>
</body>
</html>
🔑 重要なポイント
- th:href=”@{/css/style.css}”：Thymeleaf用のパス指定
- @{}：コンテキストルートからの相対パス
- staticフォルダー：デプロイ時にコンテキストルートにコピーされる
- th:で始まる属性はThymeleaf専用
5. アプリケーション起動・動作確認
- Boot Dashboard → spring-start-04 → 右クリック → 起動
- ブラウザーで http://localhost:8080/welcome にアクセス
- CSS適用済みの「ハロー ウェルカムスプリング」が表示されることを確認
🎉 まとめ
Mavenビルドツールの基本概念を理解し、CSS適用機能付きWebアプリを作成しました！
pom.xmlによる依存関係管理とフォルダー構成の重要性を学習。
次回はさらに高度な機能を実装していきます！
🔄 Maven依存関係管理の流れ（まとめ）
- Spring Initializrで依存関係を選択
- pom.xmlに依存関係が自動記述
- MavenがMaven Centralから必要なJARファイルをダウンロード
- ローカルリポジトリで管理
- プロジェクトで利用可能
⚠️ よくあるトラブルと対処法
- CSSが適用されない → パス指定とth:href属性を確認
- 404エラー → URLパターンとアノテーションを確認
- 依存関係エラー → pom.xmlの記述とローカルリポジトリを確認
- ファイルが見つからない → フォルダー構成と配置場所を確認
参考動画
コメントを残す