頭脳一式 
脱Eclipse!!
この記事では、WindowsPC向けに、VSCodeを使ってJava（Tomcat＋Maven）のWebアプリケーション開発を始めるための開発環境構築手順を説明していきます。
「Extention Pack for Java」のインストール
まず初めに、VSCodeに「Extention Pack for Java」という拡張機能をインストールする必要があります。
この拡張機能は、以下の拡張機能を1つにまとめたパッケージになっています。
いずれもMicrosoftやRedHatが開発した拡張機能なので安心してインストールしてください。
- Visual Studio IntelliCode
- Language Support for Java
- Debugger for Java
- Maven for Java
- Test Runner for Java
- Project Manager for Java
「Extention_Pack_for_Java」のインストール
VSCodeを開き、拡張機能のMarketPlaceより「java ex」と打ち始めると検索結果に「Extention Pack for Java」が表示されるのでインストールします。
「Extention_Pack_for_Java」のインストール2
拡張機能のインストールが完了したらVSCodeを再起動します。
Javaのインストール
続いて、Javaのインストールを行います。
VSCodeを起動し、コマンドパレットに「Configure Java Runtime」と入力します。
「Installed JDKs」タブより、インストールしたいJavaのJDKバージョンを選択し、インストールします。
今回は「OpenJDK11」を選択します。
OpenJDK11を選択する
DownloadボタンをクリックするとJDKのインストーラ（msi）のダウンロードが始まるので、ダウンロード完了後、インストールを行います。
インストールが完了したらVSCodeは一旦アプリを終了させておきます。
環境変数の設定
続いては環境変数JAVA_HOMEの設定です。
スタートメニューより、「コントロールパネル」＞「システム」＞「システムの詳細設定」＞「環境変数」と進みます。
システム環境変数の一覧を確認し、「JAVA_HOME」の文字が見当たらない場合は、「新規」ボタンより以下のように入力し、設定します。
Java_homeの環境設定png
システム環境変数の一覧に「JAVA_HOME」が追加されていることを確認したら、次はユーザ環境変数の設定を行います。
一覧より「Path」の設定を選択し、「編集」をクリックします。
新しい行に「%JAVA_HOME%bin」と入力し、OKをクリックします。。
Java_homeの環境設定2
再度VSCodeを開くと以下のように、インストールしたJDKのパスとバージョンが表示されるようになります。
環境変数設定後にVSCodeを再起動
Javaの実行
試しに、VSCode上でJavaが実行できるかどうか動かしてみます。
任意のJavaファイルを作成し、print文を出力するコードを書いて動かしてみました。
VSCodeでJavaを実行
はい、コンソールに「インストール完了！」と文字が出力されることを確認できました。
これでJavaのインストールは完了です。
Mavenのインストール
次はMavenのインストールです。
今回は公式サイトより「apache-maven-3.8.2-bin.zip」をダウンロードしました。
zipファイルを展開し、任意の場所に格納します。
展開したmavenをローカルの任意のディレクトリに配置する
環境変数の設定
Mavenも環境設定が必要です。
先程と同様に、スタートメニューより、「コントロールパネル」＞「システム」＞「システムの詳細設定」＞「環境変数」と進みます。
ユーザ環境変数の一覧より「Path」の設定を選択し、「編集」をクリックします。
以下のように「<展開した格納先>\bin」を指定します。
maven用の環境変数を設定
VSCodeでMavenプロジェクトを作成する
VSCodeを開き、コマンドパレットより、「Maven: Create Maven Project」を選択します。
VSCodeを開き、コマンドパレットより、「Maven: Generate from Maven Archetype」を選択します。
mavenプロジェクトの作成1
今回はWebアプリを作成したいので、「maven-archetype-webapp」を選択します。
mavenプロジェクトの作成2
バージョンやディレクトリ情報を任意に設定して進めます。
コンソール上で様々なダウンロードが進んでいくと途中で入力を求められるので任意に入力し進めます。
mavenプロジェクトの作成3
「BUILD SUCCESS」の文字が見えたら成功です。
インストール
プロジェクトを作成したら次は「インストール」をします。
mavenプロジェクトの作成4
コンソール上で次々と進んでいきます。
mavenプロジェクトの作成5
「BUILD SUCCESS」の文字が見えたら成功です。
コンパイル
次は「コンパイル」を行います。
mavenプロジェクトの作成6
これは一瞬で終わります。
mavenプロジェクトの作成7
「BUILD SUCCESS」の文字が見えたら成功です。
パッケージコマンド
mavenプロジェクトの作成8
Tomcatのインストール
次はTomcatのインストールです。
今回は公式サイトより「apache-tomcat-10.0.11」をダウンロードしました。
zipファイルを展開し、任意の場所に格納します。
展開したtomcatをローカルの任意のディレクトリに配置する
続いて、VSCodeの拡張機能「Tomcat for Java」をインストールしておきます。
VSCodeの拡張機能「Tomcat_for_Java」をインストールする
先程ビルドして生成した「demoapp.war」ファイルを右クリックし、「Run on Tomcat Sever」を選択します。
Tomcatの起動1
フォルダを選択するように求められるので、先程展開した「apache-tomcat-10.0.11」のパスを指定します。
展開した「apache-tomcat-10.0.11」のパスを指定する
「apache-tomcat-10.0.11」のアイコンが緑になっていることを確認し、右クリックから「Open in Browser」を選択します。
右クリックから「Open in Browser」を選択する
ブラウザに「Hello World!」と表示されていればアプリは正常に起動しています。
TomcatでMavenプロジェクトを起動する
これで起動完了です！
サーバーを停止したいときは
サーバーを停止させたいときは、右クリックから「Stop」を選択します。
Tomcatの停止させる
以下のように赤色になっていればサーバは停止しています。
Tomcatサーバを停止させた状態
以上で記事の解説はお終い！
もっとJavaやSpringを勉強したい方にはUdemyがオススメ！同僚に差をつけよう！
