🛠️ Spring超入門 #04 Maven基礎

 

 

🛠️ 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の依存関係管理フロー

  1. pom.xmlに依存関係を記述
  2. Maven Central Repositoryを参照
  3. 必要なJARファイルをダウンロード
  4. ローカルリポジトリに保存
  5. プロジェクトで利用可能になる

📋 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>

⚙️設定ファイル

📄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設定ファイル

🎨今回のサンプル仕様

🎯 作成するWebアプリ

URL: http://localhost:8080/welcome

リクエスト: GETリクエスト

レスポンス: 「ハロー ウェルカムスプリング」をCSS適用済みHTMLで表示

🛠️実装手順

1. Spring Bootプロジェクト作成

設定内容:

  • 名前: spring-start-04
  • タイプ: Maven
  • 依存関係: Spring Boot DevTools, Spring Web, Thymeleaf

2. コントローラー作成

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;
}

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>

🔑 重要なポイント

  • th:href=”@{/css/style.css}”:Thymeleaf用のパス指定
  • @{}:コンテキストルートからの相対パス
  • staticフォルダー:デプロイ時にコンテキストルートにコピーされる
  • th:で始まる属性はThymeleaf専用

5. アプリケーション起動・動作確認

  1. Boot Dashboard → spring-start-04 → 右クリック → 起動
  2. ブラウザーで http://localhost:8080/welcome にアクセス
  3. CSS適用済みの「ハロー ウェルカムスプリング」が表示されることを確認

🎉 まとめ

Mavenビルドツールの基本概念を理解し、CSS適用機能付きWebアプリを作成しました!
pom.xmlによる依存関係管理とフォルダー構成の重要性を学習。
次回はさらに高度な機能を実装していきます!

🔄 Maven依存関係管理の流れ(まとめ)

  1. Spring Initializrで依存関係を選択
  2. pom.xmlに依存関係が自動記述
  3. MavenがMaven Centralから必要なJARファイルをダウンロード
  4. ローカルリポジトリで管理
  5. プロジェクトで利用可能

⚠️ よくあるトラブルと対処法

  • CSSが適用されない → パス指定とth:href属性を確認
  • 404エラー → URLパターンとアノテーションを確認
  • 依存関係エラー → pom.xmlの記述とローカルリポジトリを確認
  • ファイルが見つからない → フォルダー構成と配置場所を確認

参考動画

 

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


最近のコメント