【簡単】VSCode＋Spring Bootアプリケーション開発手順

そういった疑問に答えます。

補足情報：Spring Bootをつかった開発でVSCode使う理由

本題に入る前に、VSCodeを使う理由について解説します。

結論から話すと理由は「動作が軽い」からです。

そもそも、VSCodeはVisual Studio Codeの略でMicrosoftが提供しているVisual Studioのテキストエディタです。

しかし、IDE（統合開発環境）としても十分利用可能です。
なぜならば、Springコミュニティが提供している拡張機能の導入をすることでSpringをつかった開発を可能にします。

以前に私がツイートした内容です。

実際、個人開発でSTSまたはeclipseを使用してSpring Frameworkアプリケーションの開発をしてましたが、PCの物理メモリがそれほど大きくなかったので、重くなったりすることが多々ありました。

そんなとき、Node.JSを使った開発でVSCodeを使っている人がいて、試しに使ってみたら起動が圧倒的に早い、さらにサクサク動く感じでしたのでそれからは開発環境をVSCodeに切り替えました。

※VSCodeの課題点が見つかりましたら、追記したいと思います。

VSCode＋Spring Bootアプリケーション開発手順

まずは、今回使用する環境についての説明です。

今回用意した環境（バージョン）は以下になります。
VSCodeとJavaは事前にインストールして使える状態にしてください。
※わからない場合はGoogleで検索することをおすすめします。

また、上記のVSCode拡張機能には以下の5つの拡張機能のセットが含まれます。

順番に説明します。

【拡張機能①】Spring Boot Tools

SpringBootのapplication.properties、application.yml、.javaファイルの操作をサポートします。

【拡張機能②】Spring Initializr Java Support

Spring Bootプロジェクトをすばやく生成するための拡張機能です。
以下の特徴があります。

【拡張機能③】Spring Boot Bashboard

サイドバーのエクスプローラーを使用すると、ワークスペースで使用可能なすべてのSpring Bootプロジェクトを表示および管理できます。
また、Spring Bootプロジェクトをすばやく開始、停止、またはデバッグする機能もサポートしています。

特徴は以下です。

サイドバーのエクスプローラーとは以下の赤枠箇所です。

【拡張機能④】Concourse CI Pipeline Editor

この拡張機能は、コンコースパイプラインとタスク構成ファイルを編集するためのバリデーション、コンテンツアシスト（予測変換）、ドキュメントホバー（パラメータの説明）を提供します。

【拡張機能⑤】Cloudfoundry Manifest YML Support

この拡張機能は、Cloud Foundryマニフェストファイルを編集するための基本的なバリデーション、コンテンツアシスト（予測変換）、ホバー情報（パラメータの説明）を提供します。

少し話が長くなりましたが、実際の手順についてこれ以降で解説します。

VSCode＋Spring Bootアプリケーションの開発手順は以下です。

順番に説明します。

【手順①】Spring Tools 4 for Visual Studio Codeをインストール

公式サイト（https://spring.io/tools）よりSpring Tools 4 for Visual Studio Code」をダウンロードします。

上記の画像の赤枠を押します。

そして、上記の画面に遷移するので、さらにか赤枠の「Install」ボタンを押下します。

上記のポップアップが表示される方は「Continue」ボタンを押してください。

上記のポップアップが表示されるので、「Visual Studio Code」を開くを押下して下さい。

そうすると、VScodeが立ち上がり、上記のように拡張機能の画面が表示されます。
次に、「install」ボタンを押下してください。
実際に前述した拡張機能がインストールがされます。（数分かかります）

※VSCodeの拡張機能検索で「Spring Boot Extension Pack」を入力し検索しても上記の画面までいけます。

インストールが完了すると、サイドバーの拡張機能の「Installed（有効）」に前述した5つの拡張機能が追加されます。

以上で、拡張機能のインストール手順は終わりです。

【手順②】Spring Boot アプリケーション作成

次に、実際にSpring Bootを使用したアプリケーション作成手順について説明します。

VSCodeが選択されている状態で、ショートカットキー「Ctrl + Shift + P」を入力してください。
すると、上記の赤枠ようにコマンドパレットが開きます。
そうしたら、「Spring Initializr: Generate a Maven Project」を選択します。

次に、開発言語を選択します。
「Java」、「Kotolin」、「Groovy」が選択可能です。
今回は「Java」を選択します。

次は、作成するアプリケーションの「Group id」を入力します。
今回は「com.example.spring」と入力してます。
入力し終わったら、「Enter」を押してください。

次は「Artifact id」を入力します。
ここで入力した値が実行するjarファイルの名前に含まれます。
今回は「demo」と入力してます。
入力し終わったら、「Enter」を押してください。

※実行するjarファイルの名前：(Artifact id)-(version).jar

次に、使用するSpring Bootのバージョンを選択します。
今回は「2.3.0(SNAPSHOT)」を選択してます。

次に、アプリケーションの依存関係に含めるパッケージを選択します。
ここで選択したパッケージがMavenのパッケージ依存関係を記述するpom.xmlに自動で記述されます。

今回は以下の4つを選択してます。

• Spring Web
• Spring Boot DevTools
• Thymeleaf
• Lombok

そのほかにも、「Spring Session」や「Spring Security」、「Spring　Data JPA」などSpringが公式で提供しているパッケージを選択できたり、サードパーティ製のパッケージ（例えば「MySQL Driver」とか）を選択できます。
自分が使いたいものが存在するかは実際に手を動かして見てみてください。

次に、アプリケーションを作成するディレクトリを選択します。
選択し終えたら、上記のように「Generate into this folder」を押してください。

次は、作成するアプリケーションをワークスペースに含めます。
上記のように、「Add to Workspace」を押してください。

※ワークエウペースに含めなくてもいいですが、ワークスペースからアプリケーションのディレクトリを開けるようになるのでおすすめです。

ここまできてはじめて、指定したMavenプロジェクトのインストールが開始されます。
上記のようにターミナルにインストール状況が表示されます。
数分かかるので気長に待ってください。

あと少しです。
頑張って見ていきましょう。

インストールが完了すると上記の赤枠ように、前述で選択した内容でSpring Bootアプリケーションが作成されます。

今回は簡単に動くWebアプリケーションを作成します。
上記のように、コントローラクラスの「DemoController.java」を作成します。

次はテンプレートエンジンとして「Thymeleaf」を使用しているので、上記のように「demo.html」を作成します。

※ブラウザで表示される内容になります。

【手順③】Spring Boot アプリケーション起動

ここまできたらもうアプリケーションが動く状態です。
実際に動かしてみましょう。

※今回は簡単な文字列を表示されるのみになります。

上記のように、自動で作成された「DemoAplication.java」を右クリックして「Run」を選択し、アプリケーションを動かします。

※サイドバーにある「SPRING-BOOT DASHBOARD」からも起動可能です。

上記のようにデバックコンソールに起動までのログが出力されます。
最後のログで「Stated」が出力されたらアプリケーションの起動に成功したことを表してます。

今回は4秒程度で起動しました。

実際にアプリケーションが起動したかをブラウザ確認します。
今回の場合は「http://localhost:8080/demo」にアクセスすると、上記のように作成した画面が表示されます。
同じように表示されたら成功です。

長い道のりでしたが、今回は以上になります。
快適なSpring Boot 開発ライフを体験してみてください。

人気記事①：【厳選4冊＋α】Spring Framework初心者におすすめな本

人気記事②：現役エンジニアがおすすめするプログラミングスクール5社：無料あり