Eternal Laboratory (Eternal研究所)教育用資料

普通はeclipseでJavaの開発をするでしょう。しかし所詮ペダンチストの私はもっと軽いもので作成したくてVsCodeを使うことにしました。

VsCodeは Microsoft Visual Studio Codeのことで、各種プログラムの開発、HTMLの開発で使用されています。いままで、PythonやJavaの開発で使ってきましたが、Javaをeclipseでやると私のパソコンでは重すぎて起動だけでもストレス。そこでVsCodeはJavaServletもできるはずだと、ググったら色々でてきて、開発もできそうなのでまとめてみます。

MAVENを(メイヴェン)を使ってみる

MAVENというC言語のmakeのような開発ツールを使います。しかし、VsCodeでJavaを開発しようとすれば当然Extension Pack For Javaを入れていると思います。実はそこにMaven for Javeがすでに入っています。なのでそれを使うことにします。

コマンドプロンプトでもMAVENが使いたい人は、apache mavenをダウンロードして適当なフォルダーに展開し、binフォルダーにPathに通しておけば使えます。

VsCodeでMAVENを起動するには

CTRL+Shift+Pを使うか、表示メニューのコマンドパレットを使ってコマンドを入力します

そこで create mavenと入力して検索させると、Maven: Create Maven Projectと出てくるので、これを選択します。

次の一覧からmaven-archetype-webappを選択すると、今回やろうとしているwebアプリ用の環境を作るウイザードが走ります。

まずフォルダーを作る

ここで質問に答えていくと、ひな形のフォルダーが作成されます。

archetypeのバージョンを選びます。1.4にしました。今回は実験なのでとりあえず最新で。

次にグループIDを求められますが、これはドメイン名の逆さまでいいと思います。自分の所属する会社のドメイン名や架空のドメイン名で、他人との区別ができれば良いです。注意するべきは小文字しか使えないこと。何回も失敗して気づきました。私は架空のjp.co.etlabにしました。

次もまた小文字でartifact Idです。プロジェクトの識別IDです。

次にそのプロジェクトを保存するフォルダーを指定しますが、まだ作ってないはずですから、適当なworkspaceに当たるフォルダーの中にフォルダーを新規で作って実際のフォルダー名とします。これは大文字が入ってもいいです。そしてSelect Distinatinary Folderをクリックします。

すると、ターミナルにするするっとコマンドが流れて、次の画面を出して停止します。

一度、ターミナルの画面の中でクリックして黒いカーソルを出してからEnterキーを押します。

すると、指定した名前等が表示されて、Yと聞いてきます、これはYes?ということですので、yと小文字で入れてEnterキーを押します。

Enterキーを押せば終了です

左の上を見ると今作成されたプロジェクトができているので展開するとこんな風にできています。

当初、これでできたと思った私は何回も失敗することになるのですが、つまりこれは本当にひな形だけでまだ先があったんですね。

しかし、それだけでは足りない

eclipseで作成した時も、すこしフォルダーを修正したと思いますが、今回も修正が必要です。

	\---vsservhello
	|   pom.xml
	|
	\---src
		\---main
			\---webapp
				|   index.jsp
				|
				\---WEB-INF
						web.xml

今回作成されたのはプロジェクト直下にpom.xmlという、得体のしれないxml

そして、srcフォルダーの配下にmain、webappと続き、その中にindex.jsp。これはとりあえずのものです。そして、そのまた配下にWEB-INFがありその中にweb.xmlがあるひな形になります。

ここに、今回のソースを作っていきます

まずsrc\mainの配下にjavaを作ります。

src\main\webappと表示されているエクスプローラーのmainをクリックしてから新しいフォルダーのアイコンをクリックすると、mainの配下にフォルダーを作れますので名前をjavaにします。

javaの配下にjpその配下にcoその配下にetlabのようにグループIDで宣言したドメイン名の逆の階層をを作っていきます。

そして最下位のフォルダーの中にサーブレットのjavaソースを作ります。こんな感じになります。

	\---vsservhello
		|   pom.xml
		|
		+---src
		|   \---main
		|       +---java
		|       |   \---jp
		|       |       \---co
		|       |           \---etlab
		|       |                   ServHello.java
		|       |
		|       \---webapp
		|           |   index.jsp
		|           |
		|           \---WEB-INF
		|                   web.xml

ソースを入力

最下位のフォルダーに新規ファイルを追加、名前を入力すると、自動的にpackage名がつけられてクラスができるので内容を作ります。

しかし、import javax.servlet.ServletException;などと入力するとエラーになります。これはlibが通っていないからです。そこでpom.xmlを開いて次のdependencyをdependenciesの中に追加します

	<dependency>
		<groupId>javax.servlet</groupId>
		<artifactId>javax.servlet-api</artifactId>
		<version>3.1.0</version>
	</dependency>

保存すると、ビルドファイルが書き変わったから作り直す？と聞いてきたらnowを押してください

MAVENのdependenciesの+アイコンから入れる方法もあるのですが、同じ名前の違うものがいっぱいありすぎて難しいので、このようにします。ただしバージョンはTOMCATのバージョンによって違うので調べてください。今回はTOMCAT 8.xなので3.1にしました。

	package jp.co.etlab;

	import java.io.IOException;
	import java.io.PrintWriter;

	import javax.servlet.ServletException;
	import javax.servlet.annotation.WebServlet;
	import javax.servlet.http.HttpServlet;
	import javax.servlet.http.HttpServletRequest;
	import javax.servlet.http.HttpServletResponse;

	@WebServlet("/ServHello")
	public class ServHello extends HttpServlet {
		private static final long serialVersionUID = 1L;
			
		protected void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
			//HTMLを出力
			response.setContentType("text/html; charset=UTF-8");
			PrintWriter out = response.getWriter();
			out.println("<html>");
			out.println("<head>");
			out.println("<title>Hello, world</title>");
			out.println("</head>");
			out.println("<body>");
			out.println("<p>Hello, world</p>");
			out.println("</body>");
			out.println("</html>");
		}
	}

Mavenでコンパイル

ソースが書けたところで、コンパイルをしますが、今回はMavenを使ってみましょう。

手順があります。installしてcompileしてpackageする流れです。

左下の作成したいprojectのMavenを右クリックして最初installします。

続いて、compile、packageします。いずれもBUILD SUCCESSが表示されれば成功です。

packageができたら、プロジェクトのtargetフォルダーの中にwarファイルができています。

	\---vsservhello
		|   pom.xml
		|
		+---src
		|   \---main
		|       +---java
		|       |   \---jp
		|       |       \---co
		|       |           \---etlab
		|       |                   ServHello.java
		|       |
		|       \---webapp
		|           |   index.jsp
		|           |
		|           \---WEB-INF
		|                   web.xml
		|
		\---target
			|   vsservhello.war
			|
			+---classes
			|   \---jp
			|       \---co
			|           \---etlab
			|                   ServHello.class
			|
			+---generated-sources
			|   \---annotations
			+---maven-archiver
			|       pom.properties
			|
			+---maven-status
			|   \---maven-compiler-plugin
			|       \---compile
			|           \---default-compile
			|                   createdFiles.lst
			|                   inputFiles.lst
			|
			+---test-classes
			\---vsservhello
				|   index.jsp
				|
				+---META-INF
				\---WEB-INF
					|   web.xml
					|
					+---classes
					|   \---jp
					|       \---co
					|           \---etlab
					|                   ServHello.class
					|
					\---lib
							javax.servlet-api-3.1.0.jar

TOMCATの起動

VsCodeからTOMCATを起動します。TOMCATの右側の＋アイコンをクリックします。TOMCATを独自にインストールしたかたは、そのTOMCATを指定します。私はXAMPPのTOMCATを流用したので、次のようにします。

xamppのtomcatフォルダーを指定しました。TOMCATの色が緑ならば起動されていますが、赤ならばTOMCATを右クリックしてSTARTしてください。緑になるはずです。

プロジェクトの起動

targetフォルダーにできたwarファイルを右クリックして、メニューの一番下のRUN ON TOMCAT serverをクリックします

TOMCATサーバーの色が赤から緑に変わりますので、tomcatの左の展開アイコンをクリックして展開するとvsservhelloが出てきます

そのWebアプリを選択して右クリックしてopen in browzerをクリックすると、ブラウザーが展開され、Hello worldが表示されますが、これはindex.jspが勝手に出てきています。

次に、urlに/ServHelloを追加してエンターして出てきたものがServLetが表示したものです。

Mavenで勝手にindex.jspが作られているので、こんがらがりますが、index.jspはh2で出ていますから大きいですね

さてこれでVsCodeでもServLetができることがわかりました。

warファイルは使いまわせる

さて今回作ったwarファイルですが、前回やったeclipseで作ったwarファイルと同様に、xamppのTOMCATに配置できます。やってみると同じになります。そりゃそうです、今回使ったTOMCATはxamppのTOMCATですから。次はデータベースともつないでみましょう

VsCodeでJavaServlet

VsCodeでJavaServletを開発できるか