Go to Qiita Advent Calendar 2024 Top
LoginSignup
14
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@koukibuu3

SpringBootをVSCodeで使ってみる

Last updated at Posted at 2019-11-03

導入

拡張機能のインストール

以下の拡張機能をインストールします。
Javaを使うのでJava系の拡張機能がまとまっているJava Extension Packと、SpringBootの拡張機能がまとまっているSpring Boot Extension Packを入れます。必要に応じて不要な拡張機能は無効にしてください。

  • Java Extension Pack
    • Language Support for Java
    • Debugger for Java
    • Java Test Runner
    • Maven for Java
    • Java Dependency Viewer
    • Visual Studio IntelliCode
  • Spring Boot Extension Pack
    • Spring Boot Tools
    • Concourse CI Pipeline Editor
    • Cloudfoundry Manifest YML Support
    • Spring Intializr Java Support
    • Spring Boot Dashboard

プロジェクトの作成

Spring Boot Tools を入れたことで、VSCodeでSpringBootのコマンドが使えるようになっています。

コマンド

コマンドパレットでSpring Initializr: Generate a Maven Projectを実行（対話式でプロジェクトを作成していきます）

  • Javaを選択
  • パッケージ名を入力（例．com.example）
  • プロジェクト名を入力
  • SpringBootのバージョンを選択
  • 依存関係を選択
    • web
    • thymeleaf
  • プロジェクトの保存先を選択

ディレクトリ構成

ディレクトリ構成
src/
  └ main/
  │  ├ java/
  │  │  └ com/
  │  │     └ example/
  │  │        └ {アプリケーション名}/
  │  │          └ DemoApplication.java
  │  └ resource/
  │     ├ static/
  │     └ templates/
  └ test/
target/
.gitignore
mvnw
mvnw.cmd
pom.xml

アプリケーション実行

src/main/java/com/example/{アプリケーション名}/controllerディレクトリにIndexController.java を作成

IndexController.java
package com.example.{アプリケーション名}.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class IndexController {

    @RequestMapping("/")
    public String index(Model model) {
        model.addAttribute("msg", "Hello");
        return "index";
    }
}

src/main/resources/templatesディレクトリにindex.htmlを作成

index.html
<!DOCTYPE html>
<html>
<head>
    <title>ホーム</title>
</head>
<body>
    <div>
        <p>コンテンツ</p>
    </div>
</body>
</html>

デバッグ > デバッグの開始 を選択

  • 環境の選択でjavaを選択(初回のみ)
  • launch.jsonが生成される(初回のみ)
  • 再度、デバッグ > デバッグの開始を選択(初回のみ)

http://localhost:8080/にアクセスする

ヘッダー・フッターの作成

依存関係の追加

SpringBootのテンプレートエンジンであるthymeleafのLayout Dialect機能を使うために依存関係にthymeleaf-layout-dialectを追加する。ついでにbootstrapとjqueryも追加する。

  • pom.xmlに以下の内容を追加

    <dependency>
	<groupId>nz.net.ultraq.thymeleaf</groupId>
  <artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>

<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>bootstrap</artifactId>
  <version>3.3.7</version>
</dependency>

<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>jquery</artifactId>
  <version>1.12.4</version>
</dependency>

テンプレートを作成

実装

  • src/main/resources/template/layouts/layout.htmlを作成する。

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <title layout:title-pattern="$CONTENT_TITLE | $LAYOUT_TITLE">Thymeleaf de layout</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" media="all" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
    <link rel="stylesheet" media="all" th:href="@{/css/style.css}" />
</head>
<body>
    <div layout:replace="~{layouts/header::header}"></div>

    <div id="content" class="clearfix">
        <div class="container">
            <div layout:fragment="content" th:remove="tag"></div>
        </div>
    </div>
    <div layout:replace="~{layouts/footer::footer}"></div>

    <!-- scripts -->
    <script type="text/javascript" th:src="@{/webjars/jquery/1.12.4/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
</body>
</html>

src/main/resources/template/layouts/header.htmlを作成する。

header.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<body>
    <nav class="navbar navbar-default" layout:fragment="header">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">SpringBoot練習</a>
            </div>
            <div class="collapse navbar-collapse" id="navigation">
                <p class="navbar-text navbar-right">ログイン中</p>
            </div>
        </div>
    </nav>
</body>
</html>

src/main/resources/template/layouts/footer.htmlを作成する。

footer.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<body>
    <div id="footer" layout:fragment="footer">
        <footer class="text-center">
            <small class="text-muted">Copyright(C) koukibuu3, All rights reserved.</small>
        </footer>
    </div>
</body>
</html>

src/main/resources/templates/index.htmlを以下のように修正する。

index.html
<!DOCTYPE html>
<html
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorate="~{layouts/layout}">

<head>
    <title>ホーム</title>
</head>
<body>
    <div layout:fragment="content">
        <p>コンテンツ</p>
    </div>
</body>
</html>

解説

layouts/header.htmlに以下を記入することで、

header.html(一部)
<div layout:fragment="header"><!-- 内容 --></div>

layout.htmlに記入した以下のタグが置き換わる。

layout.html(一部)
<div layout:replace="~{layouts/header::header}"></div>

※ th:replaceの代わりにth:includeを使用することで、layout.htmlのタグの内部を書き換える。

レイアウトを読み込む個別ページ側(index.html)で以下の記述をすることで、layouts/layout.htmlの記述を反映することができる。

index.html(一部)
<html
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorate="~{layouts/layout}">
14
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
14
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?