LoginSignup
8
8

More than 3 years have passed since last update.

@brgd(brgd)

Visual Studio CodeでJava + SpringでWebAPP開発環境構築

Last updated at Posted at 2020-06-14

Visual Studio CodeでJava + SpringでWebAPP開発環境構築

今回の記事でVSCodeを利用してSpring Webアプリケーション開発環境構築について説明します。
手順は以下の通りです。

１、Java実行環境構築

前提条件としてVSCodeにJava実行環境必要なのでまだできてない方は記事Visual Studio CodeでJavaプログラム開発環境構築を参照して構築してください

２、拡張機能インストール

Ctrl+Shift+xで拡張機能検索画面を開き、Spring Boot Extension Pack拡張機能を検索してインストールする
image.png

３、Spring Mavenプロジェクト作成

VSCodeで表示 -> コマンドパレットの順番でコマンドパレットを開く
ショートカットキー：Ctrl+Shift+P
spring:と入力してSpring Initializr Generate a Maven Projectを選択
image.png

Javaを選択
image.png

パッケージ名を入力して -> Enter
image.png

プロジェクト名を入力して -> Enter
image.png

SpringBootバージョンを選択
image.png

ここでSpringWebアプリ開発に必要な依存関係を選択する
今回の記事で単純な例として説明しているのでSpring WebとThymeleafのみ追加する

  • Spring Webを追加する
    image.png

  • Thymeleafを追加する

image.png

上記の二つの依存関係を追加したらselecled 2 dependenciesになります、これをクリック
保存先を選択
image.png
demoという名前のSpring プロジェクトが作られました

image.png

image.png

４、プロジェクト実装

XXApplication.javaがあるパッケージの中にControllerクラスを作成
私の場合：src/main/java/com/example/demo/DemoApplication.java
パッケージ選択 -> 右クリック -> 新規ファイル -> DemoController.java -> Enter
image.png

DemoControllerクラスが作られる
image.png
DemoController.java中身を編集する

image.png

resources/templatesの配下にHTMLファイル作成する
templatesの右クリック -> 新規ファイル -> index.html -> Enter
image.png

htmlの中身を適当に編集する
例：
　bootstrap4を利用したHTML作りたい場合Visual Studio Codeでhtml + bootstrap4の書き方を参照する
image.png
画面開く：http://localhost:8080
image.png
コントロールクラスのindexメソッド呼び出しされて、index.htmlの内容が画面に表示していますよね
これでSpring Web開発環境構築は成功です

終わり

今後の記事ではDB接続、他の依存関係追加、設計ファイル編集などについて書いて行く予定です。

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