VSCodeでJSPを開発することは可能です。
ただし、VSCodeだけではJSPを実行できません。
JSPはサーバー側で動作する仕組みなので、VSCodeに加えてJDKやApache Tomcatなどの環境を用意する必要があります。
基本的には、次のような構成で開発します。
- Visual Studio Code
- JDK
- Extension Pack for Java
- Maven
- Apache Tomcat
- JSP
- Servlet
- HTML
- CSS
- JavaScript
新しくJSP開発を始めるのであれば、Mavenを使ってプロジェクトを管理し、Tomcat上で実行する構成が分かりやすいでしょう。
JSPとは
JSPは、Javaを使って動的なWebページを生成するための技術です。
従来は「JavaServer Pages」と呼ばれていましたが、現在のJakarta EEではJakarta Pagesとして扱われています。
ただし、実際の開発現場や技術記事では、現在でも「JSP」という名称が広く使われています。
JSPファイルは通常、
sample.jsp
のような拡張子で作成します。
ブラウザからJSPへアクセスすると、TomcatなどのServletコンテナがJSPを処理し、最終的にHTMLを生成してブラウザへ返します。
JSP開発で必要なJDKをインストールする
JDKとは
JDKはJava Development Kitの略で、Javaプログラムを開発するために必要な環境です。
JSPやServletはJavaで動作するため、VSCodeでJSPを開発するときもJDKが必要です。
Tomcat 11ではJava 17以降が必要
Apache Tomcat 11を使用する場合は、Java 17以降が必要です。
そのため、例えばJDK 17やJDK 21などを利用できます。
JDKをインストールしたら、ターミナルで次のコマンドを実行します。
java -version
続けて、
javac -version
も確認します。
正常にバージョン情報が表示されれば、Javaを利用できる状態です。
VSCodeにJava拡張機能をインストールする
Extension Pack for Javaを導入する
VSCodeでJava開発を行う場合は、Microsoftが提供している「Extension Pack for Java」を導入すると便利です。
VSCodeの拡張機能画面を開き、
Extension Pack for Java
と検索してインストールします。
Windowsの場合は、
Ctrl + Shift + X
で拡張機能画面を開けます。
Extension Pack for Javaで利用できる主な機能
Extension Pack for Javaをインストールすると、Java開発に必要なさまざまな機能を利用できます。
主なものは次のとおりです。
- Javaコードの補完
- エラー検出
- デバッグ
- Javaプロジェクト管理
- Mavenプロジェクト管理
- テスト実行
- リファクタリング
JSP開発ではServletなどのJavaコードを書くため、これらの機能があると開発しやすくなります。
Apache Tomcatをインストールする
JSPを実行するにはTomcatなどが必要
JSPはHTMLファイルとは異なり、ファイルを直接ブラウザで開いても正常に実行できません。
JSPを処理するServletコンテナが必要です。
代表的なのがApache Tomcatです。
処理の流れは、次のようになります。
ブラウザ
↓
Tomcat
↓
Servlet・JSP
↓
HTMLを生成
↓
ブラウザへ返す
VSCodeはコードを書くための環境であり、JSPそのものを実行するサーバーではありません。
Tomcatのバージョンに注意する
JSP開発では、Tomcatのバージョンが非常に重要です。
特に注意したいのが、Tomcat 9以前とTomcat 10以降の違いです。
Tomcat 9以前では、Servlet関連のパッケージとして、
javax.servlet
が使われていました。
一方、Tomcat 10以降では、
jakarta.servlet
へ変更されています。
例えばTomcat 11では、
import jakarta.servlet.http.HttpServlet;
と記述します。
古い教材では、
import javax.servlet.http.HttpServlet;
となっている場合があるため、そのままコピーするとエラーになることがあります。
MavenでJSPプロジェクトを作成する
Mavenを使うメリット
JSP開発では、Mavenを利用すると依存関係やビルドを管理しやすくなります。
例えば、次のような構成にできます。
jsp-sample/
├─ pom.xml
└─ src/
└─ main/
├─ java/
│ └─ com/
│ └─ example/
│ └─ HelloServlet.java
│
└─ webapp/
├─ index.jsp
└─ WEB-INF/
主な役割は次のとおりです。
src/main/java
Java・Servletを配置
src/main/webapp
JSP・HTML・CSS・JavaScriptを配置
WEB-INF
Webアプリケーション関連の設定ファイルを配置
pom.xml
Mavenの設定ファイル
参考サイト
VScodeでMVN, Tomcat, JSP/ServletでWebアプリ開発メモ – Qiita
pom.xmlを作成する
Tomcat 11向けの基本設定
Tomcat 11を使用する場合は、Servlet 6.1に対応した依存関係を設定できます。
例えば、次のようなpom.xmlを作成します。
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.example</groupId>
<artifactId>jsp-sample</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<properties>
<maven.compiler.release>17</maven.compiler.release>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>
<dependencies>
<dependency>
<groupId>jakarta.servlet</groupId>
<artifactId>jakarta.servlet-api</artifactId>
<version>6.1.0</version>
<scope>provided</scope>
</dependency>
</dependencies>
<build>
<finalName>jsp-sample</finalName>
</build>
</project>
packagingをwarにする
JSPやServletを使ったWebアプリケーションでは、
<packaging>war</packaging>
と指定します。
WARファイルは、JavaのWebアプリケーションをまとめた形式です。
Mavenでビルドすると、
jsp-sample.war
のようなWARファイルを生成できます。
scopeをprovidedにする理由
Servlet APIには、
<scope>provided</scope>
を指定しています。
Servlet APIはTomcat側が提供するため、通常はWARファイルの中へ含める必要がありません。
JSPファイルを作成する
index.jspを作成する
次の場所にJSPファイルを作ります。
src/main/webapp/index.jsp
例えば、次のように記述します。
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JSP Sample</title>
</head>
<body>
<h1>JSP Sample</h1>
<p>Hello JSP!</p>
</body>
</html>
Tomcat上でアプリケーションを実行し、このJSPへアクセスするとHTMLがブラウザへ返されます。
Servletを作成する
Servletで処理を行う
JSPへ直接Javaコードを書くこともできますが、現在の一般的な設計では、処理はServletなどのJava側へまとめる方が管理しやすくなります。
例えば、
src/main/java/com/example/HelloServlet.java
を作成します。
package com.example;
import java.io.IOException;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
@Override
protected void doGet(
HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
request.setAttribute("message", "Hello JSP!");
request.getRequestDispatcher("/hello.jsp")
.forward(request, response);
}
}
ServletからJSPへ値を渡す
ELを使って値を表示する
Servlet側では、
request.setAttribute("message", "Hello JSP!");
として値を設定しています。
JSP側では、ELを使って値を表示できます。
src/main/webapp/hello.jspを作成し、次のように記述します。
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello JSP</title>
</head>
<body>
<h1>${message}</h1>
</body>
</html>
Tomcatを起動した状態で、
http://localhost:8080/jsp-sample/hello
へアクセスすると、
Hello JSP!
と表示されます。
JSPへJavaコードを直接書きすぎない
スクリプトレットは使用できる
JSPでは、次のようにJavaコードを書くこともできます。
<%
String name = "Taro";
%>
このような記述方法はスクリプトレットと呼ばれます。
また、
<%= new java.util.Date() %>
のようにJavaの値を直接表示することもできます。
現在はELなどを利用する方が管理しやすい
スクリプトレット自体は利用できますが、JSPにJavaコードを大量に書くと可読性や保守性が低下します。
例えば、
<%
// データベース接続
// SQL実行
// 業務処理
// 複雑な条件分岐
%>
のような構成は避けた方がよいでしょう。
基本的には、
Servlet
↓
処理を担当
JSP
↓
画面表示を担当
と分けます。
JSPとServletをMVCとして設計する
MVCの基本構成
JSPとServletを使ったWebアプリケーションでは、MVCという考え方で役割を分けることがあります。
例えば、
Model
JavaBeans
Service
DAO
Controller
Servlet
View
JSP
という構成です。
処理の流れは、
ブラウザ
↓
Servlet
↓
Service
↓
DAO
↓
データベース
↓
Servlet
↓
JSP
↓
ブラウザ
のようになります。
このように分離すると、画面表示と処理ロジックを整理しやすくなります。
MavenでWARファイルを作成する
mvn clean packageを実行する
プロジェクトのルートディレクトリで、次のコマンドを実行します。
mvn clean package
正常にビルドされると、
target/
ディレクトリの中に、
jsp-sample.war
が生成されます。
例えば、
jsp-sample/
├─ pom.xml
├─ src/
└─ target/
└─ jsp-sample.war
という構成になります。
TomcatへWARファイルをデプロイする
webappsフォルダへ配置する
Tomcatを、
C:\apache-tomcat-11
へインストールしている場合は、
C:\apache-tomcat-11\webapps
があります。
ここへ、
jsp-sample.war
をコピーします。
Tomcatの通常の初期設定では、起動時にWARファイルが展開され、
webapps/
└─ jsp-sample/
のようなディレクトリが生成されます。
ただし、Tomcat側の設定によってはWARの自動展開が無効になっている場合もあります。
Tomcatを起動する
Windowsの場合
Tomcatのbinディレクトリへ移動します。
例えば、
cd C:\apache-tomcat-11\bin
とします。
起動するときは、
startup.bat
を実行します。
停止するときは、
shutdown.bat
を実行します。
macOSやLinuxの場合
起動するときは、
./startup.sh
を実行します。
停止するときは、
./shutdown.sh
を実行します。
実行権限がない場合は、必要に応じて権限を設定します。
ブラウザからJSPへアクセスする
Tomcatを起動し、アプリケーションをデプロイしたら、ブラウザからアクセスします。
例えば、
http://localhost:8080/jsp-sample/
へアクセスします。
index.jspが正常に表示されれば、JSP開発環境の基本設定は完了です。
web.xmlは必ず必要ではない
WebServletアノテーションを利用できる
以前のServlet開発では、
WEB-INF/web.xml
へServletを登録する方法が一般的でした。
現在は、
@WebServlet("/hello")
のようなアノテーションでServletを登録できます。
そのため、単純なServlet登録だけであれば、web.xmlは必須ではありません。
web.xmlを使用する場合もある
ただし、次のような設定ではweb.xmlを利用することがあります。
- セキュリティ設定
- エラーページ
- セッション設定
- Servlet設定
- Filter設定
- Listener設定
そのため、「web.xmlは不要」ではなく、「構成によっては必須ではない」と考えるのが適切です。
JSTLを利用する
JSTLとは
JSTLは、JSPで条件分岐や繰り返し処理などを記述するためのタグライブラリです。
例えば、
<c:if>
や、
<c:forEach>
などを利用できます。
JSTLを使う場合は依存関係が必要
JSTLのタグを利用するときは、Servlet APIとは別にJakarta Tags関連のライブラリをMavenへ追加する必要があります。
一方、ELについては、
${message}
のようにJSP内で利用できます。
JSPの中へJavaコードを直接書くよりも、ELやJSTLを活用した方が画面側のコードを整理しやすくなります。
CSSやJavaScriptも利用できる
JSPを使っている場合でも、CSSやJavaScriptは通常のWebページと同じように利用できます。
例えば、
src/main/webapp/
├─ index.jsp
├─ css/
│ └─ style.css
├─ js/
│ └─ main.js
└─ images/
└─ logo.png
という構成にできます。
JSPからCSSを読み込む場合は、
<link rel="stylesheet"
href="${pageContext.request.contextPath}/css/style.css">
のように記述できます。
JavaScriptも、
<script src="${pageContext.request.contextPath}/js/main.js"></script>
のように読み込めます。
contextPathを利用すると、アプリケーションのコンテキスト名が変わった場合でもパスを管理しやすくなります。
VSCodeからTomcatを操作する方法
サーバー連携用拡張機能を利用できる場合がある
VSCodeでは、サーバー連携用の拡張機能を追加することでTomcatなどを操作できる場合があります。
例えば、Community Server Connectorsなどが選択肢として挙げられます。
ただし、こうした拡張機能はJSP開発に必須ではありません。
まずは、
VSCodeでコードを編集
↓
MavenでWARを作成
↓
Tomcatへデプロイ
↓
ブラウザで確認
という基本的な流れを理解してから導入すると分かりやすいでしょう。
VSCodeでJSPを開発するときの注意点
JSPの補完機能はJavaほど強力ではない場合がある
VSCodeはJavaコードの補完やデバッグには優れています。
一方、JSP固有のタグやEL、JSTLなどについては、Javaコードほど強力な補完が利用できないことがあります。
必要に応じてJSP対応の拡張機能を利用できますが、導入する際は更新状況や対応バージョンを確認するとよいでしょう。
古いJSP教材には注意する
JSPやServletには長い歴史があるため、インターネット上には古いサンプルコードも多数あります。
特に、
javax.servlet
を使用しているコードは、Tomcat 10以降ではそのまま動作しない可能性があります。
Tomcat 10以降では、基本的に、
jakarta.servlet
を使用します。
古い教材を参考にするときは、利用しているTomcatのバージョンを必ず確認しましょう。
TomcatのバージョンとServletの関係
代表的な対応関係は、次のようになります。
| Tomcat | Servlet | JSP・Jakarta Pages | Javaパッケージ |
|---|---|---|---|
| Tomcat 9 | Servlet 4.0 | JSP 2.3 | javax.* |
| Tomcat 10.1 | Servlet 6.0 | Jakarta Pages 3.1 | jakarta.* |
| Tomcat 11 | Servlet 6.1 | Jakarta Pages 4.0 | jakarta.* |
新しくJSP開発を始める場合は、TomcatのバージョンとJavaのバージョンを合わせて環境を構築することが重要です。
VSCodeでJSPを開発するときのおすすめ構成
新しく学習用のJSP環境を構築する場合は、例えば次のような構成が分かりやすいでしょう。
VSCode
│
├─ Extension Pack for Java
│
├─ JDK 17以上
│
├─ Maven
│
└─ JSPプロジェクト
│
├─ Servlet
├─ JSP
├─ HTML
├─ CSS
└─ JavaScript
↓
WARファイル
↓
Apache Tomcat 11
↓
ブラウザ
Tomcat 11を利用する場合はJava 17以降が必要です。
初めてJSPを学ぶ場合のおすすめ手順
最初は小さなプロジェクトから始める
学習目的であれば、まず次のようなプロジェクトを作ると理解しやすくなります。
jsp-sample/
│
├─ pom.xml
│
└─ src/
└─ main/
├─ java/
│ └─ com/
│ └─ example/
│ └─ HelloServlet.java
│
└─ webapp/
├─ index.jsp
├─ hello.jsp
├─ css/
│ └─ style.css
└─ WEB-INF/
開発の流れは、
VSCodeでコードを書く
↓
Mavenでビルドする
↓
WARファイルを作成する
↓
Tomcatへデプロイする
↓
ブラウザで確認する
となります。
この基本を理解したあとで、
JSP
Servlet
EL
JSTL
JavaBeans
セッション
フォーム送信
ログイン処理
JDBC
データベース
MVC
などを学んでいくと、JSPを使ったWebアプリケーション開発を理解しやすくなります。
まとめ
VSCodeでJSPを開発する場合は、VSCodeだけでなく、JDKやApache Tomcatなどの環境が必要です。
基本的な構成は、
VSCode
+
JDK
+
Extension Pack for Java
+
Maven
+
Apache Tomcat
となります。
特に重要なのは、TomcatのバージョンとServlet APIのパッケージを混同しないことです。
Tomcat 9以前では、
javax.servlet
が使われていましたが、Tomcat 10以降では、
jakarta.servlet
を使用します。
また、JSPへJavaコードを直接大量に書くのではなく、
Servlet
↓
処理
JSP
↓
画面表示
と役割を分け、ELやJSTLを利用すると管理しやすくなります。
初めてJSPを開発する場合は、小規模なServletとJSPを作成し、MavenでWARを生成してTomcatへデプロイする流れから覚えるとよいでしょう。
以上、VSCodeでJSPを開発するために必要なものについてでした。
最後までお読みいただき、ありがとうございました。
