脱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」のインストール](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/「Extention_Pack_for_Java」のインストール.png?resize=880%2C353&ssl=1)
「Extention_Pack_for_Java」のインストール
VSCodeを開き、拡張機能のMarketPlaceより「java ex」と打ち始めると検索結果に「Extention Pack for Java」が表示されるのでインストールします。
![「Extention_Pack_for_Java」のインストール2](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/「Extention_Pack_for_Java」のインストール2.png?resize=532%2C99&ssl=1)
「Extention_Pack_for_Java」のインストール2
拡張機能のインストールが完了したらVSCodeを再起動します。
Javaのインストール
続いて、Javaのインストールを行います。
VSCodeを起動し、コマンドパレットに「Configure Java Runtime」と入力します。
「Installed JDKs」タブより、インストールしたいJavaのJDKバージョンを選択し、インストールします。
今回は「OpenJDK11」を選択します。
![OpenJDK11を選択する](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/OpenJDK11を選択する.png?resize=793%2C671&ssl=1)
OpenJDK11を選択する
DownloadボタンをクリックするとJDKのインストーラ(msi)のダウンロードが始まるので、ダウンロード完了後、インストールを行います。
インストールが完了したらVSCodeは一旦アプリを終了させておきます。
環境変数の設定
続いては環境変数JAVA_HOMEの設定です。
スタートメニューより、「コントロールパネル」>「システム」>「システムの詳細設定」>「環境変数」と進みます。
システム環境変数の一覧を確認し、「JAVA_HOME」の文字が見当たらない場合は、「新規」ボタンより以下のように入力し、設定します。
![Java_homeの環境設定png](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_Java_homeの環境設定png.png?resize=653%2C165&ssl=1)
Java_homeの環境設定png
システム環境変数の一覧に「JAVA_HOME」が追加されていることを確認したら、次はユーザ環境変数の設定を行います。
一覧より「Path」の設定を選択し、「編集」をクリックします。
新しい行に「%JAVA_HOME%bin」と入力し、OKをクリックします。。
![Java_homeの環境設定2](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_Java_homeの環境設定2png.png?resize=527%2C501&ssl=1)
Java_homeの環境設定2
再度VSCodeを開くと以下のように、インストールしたJDKのパスとバージョンが表示されるようになります。
![環境変数設定後にVSCodeを再起動](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_環境変数設定後にVSCodeを再起動.png?resize=880%2C215&ssl=1)
環境変数設定後にVSCodeを再起動
Javaの実行
試しに、VSCode上でJavaが実行できるかどうか動かしてみます。
任意のJavaファイルを作成し、print文を出力するコードを書いて動かしてみました。
![VSCodeでJavaを実行](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_VSCodeでJavaを実行.png?resize=608%2C361&ssl=1)
VSCodeでJavaを実行
はい、コンソールに「インストール完了!」と文字が出力されることを確認できました。
これでJavaのインストールは完了です。
Mavenのインストール
次はMavenのインストールです。
今回は公式サイトより「apache-maven-3.8.2-bin.zip」をダウンロードしました。
zipファイルを展開し、任意の場所に格納します。
![展開したmavenをローカルの任意のディレクトリに配置する](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_展開したmavenをローカルの任意のディレクトリに配置する.png?resize=341%2C96&ssl=1)
展開したmavenをローカルの任意のディレクトリに配置する
環境変数の設定
Mavenも環境設定が必要です。
先程と同様に、スタートメニューより、「コントロールパネル」>「システム」>「システムの詳細設定」>「環境変数」と進みます。
ユーザ環境変数の一覧より「Path」の設定を選択し、「編集」をクリックします。
以下のように「<展開した格納先>\bin」を指定します。
![maven用の環境変数を設定](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_maven用の環境変数を設定.png?resize=528%2C503&ssl=1)
maven用の環境変数を設定
VSCodeでMavenプロジェクトを作成する
VSCodeを開き、コマンドパレットより、「Maven: Create Maven Project」を選択します。
VSCodeを開き、コマンドパレットより、「Maven: Generate from Maven Archetype」を選択します。
![mavenプロジェクトの作成1](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_mavenプロジェクトの作成1.png?resize=585%2C55&ssl=1)
mavenプロジェクトの作成1
今回はWebアプリを作成したいので、「maven-archetype-webapp」を選択します。
![mavenプロジェクトの作成2](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_mavenプロジェクトの作成2.png?resize=596%2C49&ssl=1)
mavenプロジェクトの作成2
バージョンやディレクトリ情報を任意に設定して進めます。
コンソール上で様々なダウンロードが進んでいくと途中で入力を求められるので任意に入力し進めます。
![mavenプロジェクトの作成3](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_mavenプロジェクトの作成3.png?resize=715%2C511&ssl=1)
mavenプロジェクトの作成3
「BUILD SUCCESS」の文字が見えたら成功です。
インストール
プロジェクトを作成したら次は「インストール」をします。
![mavenプロジェクトの作成4](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_mavenプロジェクトの作成4.png?resize=553%2C422&ssl=1)
mavenプロジェクトの作成4
コンソール上で次々と進んでいきます。
![mavenプロジェクトの作成5](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_mavenプロジェクトの作成5.png?resize=585%2C144&ssl=1)
mavenプロジェクトの作成5
「BUILD SUCCESS」の文字が見えたら成功です。
コンパイル
次は「コンパイル」を行います。
![mavenプロジェクトの作成6](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_mavenプロジェクトの作成6.png?resize=552%2C430&ssl=1)
mavenプロジェクトの作成6
これは一瞬で終わります。
![mavenプロジェクトの作成7](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_mavenプロジェクトの作成7.png?resize=393%2C126&ssl=1)
mavenプロジェクトの作成7
「BUILD SUCCESS」の文字が見えたら成功です。
パッケージコマンド
![mavenプロジェクトの作成8](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_mavenプロジェクトの作成8.png?resize=611%2C561&ssl=1)
mavenプロジェクトの作成8
Tomcatのインストール
次はTomcatのインストールです。
今回は公式サイトより「apache-tomcat-10.0.11」をダウンロードしました。
zipファイルを展開し、任意の場所に格納します。
![展開したtomcatをローカルの任意のディレクトリに配置する展開したtomcatをローカルの任意のディレクトリに配置する](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_展開したtomcatをローカルの任意のディレクトリに配置する.png?resize=439%2C94&ssl=1)
展開したtomcatをローカルの任意のディレクトリに配置する
続いて、VSCodeの拡張機能「Tomcat for Java」をインストールしておきます。
![VSCodeの拡張機能「Tomcat_for_Java」をインストールする](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_VSCodeの拡張機能「Tomcat_for_Java」をインストールする.png?resize=545%2C72&ssl=1)
VSCodeの拡張機能「Tomcat_for_Java」をインストールする
先程ビルドして生成した「demoapp.war」ファイルを右クリックし、「Run on Tomcat Sever」を選択します。
![Tomcatの起動1](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_Tomcatの起動1.png?resize=545%2C464&ssl=1)
Tomcatの起動1
フォルダを選択するように求められるので、先程展開した「apache-tomcat-10.0.11」のパスを指定します。
![Tomcatの起動2](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_Tomcatの起動2png.png?resize=880%2C375&ssl=1)
展開した「apache-tomcat-10.0.11」のパスを指定する
「apache-tomcat-10.0.11」のアイコンが緑になっていることを確認し、右クリックから「Open in Browser」を選択します。
![Tomcatの起動3](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_Tomcatの起動3.png?resize=554%2C160&ssl=1)
右クリックから「Open in Browser」を選択する
ブラウザに「Hello World!」と表示されていればアプリは正常に起動しています。
![Tomcatの起動5](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_Tomcatの起動5.png?resize=424%2C169&ssl=1)
TomcatでMavenプロジェクトを起動する
これで起動完了です!
サーバーを停止したいときは
サーバーを停止させたいときは、右クリックから「Stop」を選択します。
![Tomcatの停止1](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_Tomcatの停止1.png?resize=554%2C283&ssl=1)
Tomcatの停止させる
以下のように赤色になっていればサーバは停止しています。
![Tomcatサーバを停止させた状態](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/10/20211016_Tomcatの停止2.png?resize=554%2C85&ssl=1)
Tomcatサーバを停止させた状態
![](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2022/11/pcpengin.jpg?resize=80%2C80&ssl=1)
以上で記事の解説はお終い!
もっとJavaやSpringを勉強したい方にはUdemyがオススメ!同僚に差をつけよう!