サーブレット&JSPの基本｜開発環境の基本操作を学ぼう
HTMLを作ってTomcatから表示する。Webアプリケーション開発の基本操作を実際に体験しよう
開発環境の基本操作を学ぼう
次から始まるサーブレットやJSPの開発では、Eclipseでファイルを作成し、Apache Tomcatを起動して、ブラウザから動作を確認するという操作を何度も繰り返します。
そのため、本格的なプログラムを作り始める前に、インストールした開発環境の基本的な使い方を一度体験しておきましょう。
ここでは、動的Webプロジェクト study の中にHTMLファイルを作成し、Tomcatを経由してブラウザにWebページを表示します。まだサーブレットやJSPは使用しませんが、HTMLファイルをTomcat上で表示することで、今後のWebアプリケーション開発につながる基本的な流れを確認できます。
今回体験する操作は、次の4段階です。
| 手順 | 操作内容 |
|---|---|
| 1 | 動的Webプロジェクト study にHTMLファイルを作成する |
| 2 | Apache Tomcatを起動する |
| 3 | ブラウザにURLを入力してHTMLファイルをリクエストする |
| 4 | 作成したWebページが表示されることを確認する |
一つひとつの操作は難しくありません。ただし、HTMLファイルを保存する場所、ブラウザに入力するURL、Tomcatの状態などを正しく理解しておくことが大切です。
HTMLファイルを直接開く場合との違い
HTMLファイルは、ファイルをダブルクリックするだけでもブラウザで表示できます。しかし、今回行うのは、HTMLファイルを直接開く方法ではありません。
Apache Tomcatを起動し、ブラウザからTomcatへリクエストを送り、TomcatからHTMLファイルを返してもらいます。
直接開く場合とTomcatを利用する場合では、ブラウザにページが表示されるという結果は同じように見えます。しかし、表示されるまでの仕組みは異なります。
| 表示方法 | ブラウザのアクセス先 | Tomcatの使用 |
|---|---|---|
| HTMLファイルを直接開く | コンピュータ内のファイル | 使用しない |
| URLを使って表示する | Tomcat上のWebアプリケーション | 使用する |
サーブレットやJSPは、HTMLファイルのように単純にダブルクリックして実行するものではありません。Tomcatなどのアプリケーションサーバー上で動作します。
そのため、今回の操作では、今後の学習と同じようにTomcatを経由してページを表示します。
図1：開発環境を体験する4つの手順
この図から分かること
WebページをTomcat上で表示するには、HTMLファイルを作成するだけではなく、Tomcatの起動とブラウザからのリクエストが必要です。
EclipseはHTMLファイルを作成するための開発環境であり、Tomcatはブラウザからのリクエストを受け取るアプリケーションサーバーです。ブラウザは、指定されたURLを使ってTomcatへリクエストを送ります。
このように、それぞれのソフトウェアには異なる役割があります。今回の操作を通して、Eclipse、Tomcat、ブラウザがどのようにつながっているのかを確認していきましょう。
studyにHTMLファイルを作成する
最初に、動的Webプロジェクト study の中へHTMLファイルを作成します。
パッケージ・エクスプローラーで study を選択し、右クリックします。表示されたメニューから 新規 → HTMLファイル を選択してください。
HTMLファイルの作成画面が表示されたら、保存場所とファイル名を指定します。
今回作成するファイル名は welcome.html とします。保存場所には、初期状態で選択されている src/main/webapp を使用します。
HTMLファイルの作成手順
| 手順 | 操作 |
|---|---|
| 1 | パッケージ・エクスプローラーで study を選択する |
| 2 | study を右クリックする |
| 3 | 新規 → HTMLファイル を選択する |
| 4 | 保存場所が src/main/webapp になっていることを確認する |
| 5 | ファイル名に welcome.html と入力する |
| 6 | 完了 をクリックする |
ファイルを作成するときは、study プロジェクト自体を選択してから操作します。別のプロジェクトやフォルダを選択していると、意図しない場所にHTMLファイルが作成されることがあるので注意しましょう。
HTMLファイルを保存する場所
HTMLファイルは、基本的に src/main/webapp 以下へ保存します。
src/main/webapp は、ブラウザから公開されるWebコンテンツを配置するための場所です。HTML、CSS、JavaScript、画像、JSPなど、Webページの表示に関係するファイルを配置します。
動的Webプロジェクトの構成は、次のようなイメージになります。
| 場所 | 主な用途 |
|---|---|
| src/main/java | サーブレットなどのJavaソースを保存する |
| src/main/webapp | HTML、CSS、JavaScript、画像、JSPなどを保存する |
| src/main/webapp/WEB-INF | ブラウザから直接アクセスさせないファイルを保存する |
| src/main/webapp/META-INF | Webアプリケーションの管理情報などを保存する |
今回作成する welcome.html は、src/main/webapp の直下へ保存します。
WEB-INF や META-INF の中にHTMLファイルを作成すると、ブラウザからURLを指定して直接表示できません。これらは、外部から直接アクセスさせないファイルを置くための特別な場所です。
今回のようにブラウザから直接表示したいHTMLファイルは、WEB-INF や META-INF の外側へ配置しましょう。
HTMLファイル名の付け方
HTMLファイル名には、半角英数字を使用するのが基本です。必要に応じて、アンダーバーやハイフンも使用できます。
| 使用できる文字 | 例 |
|---|---|
| 半角英字 | welcome、guide、menu |
| 半角数字 | page01、lesson2 |
| アンダーバー | user_guide |
| ハイフン | web-menu |
| 拡張子 | .html または .htm |
ファイル名では、大文字と小文字が区別されることがあります。
たとえば、welcome.html と Welcome.html は、異なるファイル名として扱われる可能性があります。入力ミスによるエラーを防ぐため、教材では基本的に小文字で統一すると分かりやすくなります。
HTMLの内容を編集する
HTMLファイルを作成すると、Eclipseのエディタにファイルの内容が表示されます。
Eclipseの設定によっては、DOCTYPE宣言やhtmlタグ、headタグ、bodyタグなど、HTMLの基本構造が自動的に記述されます。その場合は、すべてを最初から入力し直す必要はありません。
titleタグには、ブラウザのタブに表示するページタイトルを記述します。bodyタグには、ブラウザの画面内に表示する内容を記述します。
ここでは、開発環境の動作確認にふさわしい内容へ変更してみましょう。
HTMLファイルの記述例
ファイル名：welcome.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>開発環境の動作確認</title>
</head>
<body>
<h1>開発環境の準備ができました</h1>
<p>EclipseとTomcatからWebページを表示しています。</p>
</body>
</html>このHTMLでは、h1タグを使って大きな見出しを表示し、pタグを使って説明文を表示しています。
titleタグに記述した 開発環境の動作確認 は、通常、ブラウザのタブ部分に表示されます。bodyタグ内に記述した内容は、Webページの本文として表示されます。
記述している主な要素
| 要素 | 役割 |
|---|---|
| DOCTYPE宣言 | HTML5の文書であることを示す |
| htmlタグ | HTML文書全体を囲む |
| lang属性 | ページで使用する主な言語を示す |
| headタグ | ページに関する設定を記述する |
| metaタグ | 文字コードなどの情報を指定する |
| titleタグ | ブラウザのタブに表示する名前を指定する |
| bodyタグ | ブラウザ画面に表示する内容を記述する |
| h1タグ | ページ内の大きな見出しを作る |
| pタグ | 文章の段落を作る |
編集が終わったら、ファイルを保存します。Windowsでは Ctrl + S、macOSでは Command + S を使うと保存できます。
保存しないままブラウザで確認すると、変更前の内容が表示されることがあります。ブラウザで確認する前に、必ず保存できているかを確認しましょう。
Apache Tomcatを起動する
HTMLファイルが準備できたら、次にApache Tomcatを起動します。
Eclipseのサーバー ビューを開き、Tomcat11_Java25 を選択します。右クリックして 開始 を選ぶと、Tomcatが起動します。
すでに起動している場合は、新たに開始する必要はありません。ただし、プロジェクトを追加した直後や設定を変更したあとで反映されない場合は、再開 を選んでTomcatを再起動します。
Tomcatを起動する手順
| 手順 | 操作 |
|---|---|
| 1 | Eclipseのサーバー ビューを表示する |
| 2 | Tomcat11_Java25 を選択する |
| 3 | 右クリックする |
| 4 | 開始 を選択する |
| 5 | 状態が 起動済み になることを確認する |
Tomcatが起動すると、コンソール ビューに起動処理のメッセージが表示されます。
コンソールには多くの文字が表示されますが、すべてを細かく読む必要はありません。まずは、赤い文字で重大なエラーが表示されていないか、サーバーが正常に起動したことを示すメッセージが出ているかを確認しましょう。
図2：EclipseでHTMLを作成してTomcatを起動する
この図から分かること
HTMLファイルは study の src/main/webapp 以下へ配置し、Tomcatを起動してからブラウザで確認します。
Eclipseでは、ファイル作成、ソースコード編集、サーバー操作、起動メッセージの確認を一つの画面内で行えます。
study の中に welcome.html が存在すること、Tomcat11_Java25 が 起動済み になっていること、コンソールに重大なエラーが出ていないことが、ブラウザで確認する前の重要なチェックポイントです。
ブラウザからHTMLファイルをリクエストする
Tomcatが起動したら、ブラウザを開いて welcome.html をリクエストします。
ここで、パッケージ・エクスプローラーの welcome.html をダブルクリックしてはいけません。ダブルクリックすると、EclipseのエディタでHTMLファイルが開くだけです。
また、WindowsのエクスプローラーなどからHTMLファイルを直接開くと、Tomcatを経由しない表示になります。
今回は、ブラウザのアドレスバーにURLを入力し、Tomcatに対してHTMLファイルを要求します。
Webアプリケーション内のファイルへアクセスするURLは、次のような構成になります。
今回の環境では、次のURLを使用します。
ブラウザの表示例
URLを構成する要素
| URLの部分 | 今回の値 | 意味 |
|---|---|---|
| 通信方式 | http | HTTP通信を使用する |
| ホスト名 | localhost | 自分が操作しているコンピュータを表す |
| ポート番号 | 8080 | Tomcatがリクエストを受け付ける番号 |
| アプリケーション名 | study | 動的Webプロジェクトの名前 |
| ファイルのパス | welcome.html | src/main/webappから見たファイルの場所 |
URLは、ファイルが保存されているコンピュータ上の場所をそのまま書くものではありません。
src/main/webapp の部分はURLに含めません。src/main/webapp は、Webアプリケーションの公開領域の起点として扱われるためです。
そのため、次のように対応します。
| Eclipse内の保存場所 | ブラウザで指定するURL |
|---|---|
| src/main/webapp/welcome.html | http://localhost:8080/study/welcome.html |
| src/main/webapp/guide/start.html | http://localhost:8080/study/guide/start.html |
| src/main/webapp/images/logo.png | http://localhost:8080/study/images/logo.png |
src/main/webapp より下にフォルダを作成した場合は、そのフォルダ名をURLにも含めます。
たとえば、guideフォルダの中に start.html を保存した場合は、study の後ろに guide/start.html を付けます。
localhostが表しているもの
localhostは、自分自身のコンピュータを表す特別なホスト名です。
Tomcatとブラウザを同じコンピュータ上で動かしている場合、ブラウザから localhost を指定すると、そのコンピュータ内で動作しているサーバーへアクセスできます。
今回のURLにある localhost は、インターネット上の別のWebサーバーを表しているのではありません。現在操作しているコンピュータの中で動作しているTomcatを表しています。
学習環境では、Eclipse、Tomcat、ブラウザが同じコンピュータで動いているため、localhostを使用します。
8080はポート番号
localhostの後ろにある 8080 は、ポート番号です。
一つのコンピュータでは、Webサーバー、メールサーバー、データベースなど、複数のサービスが同時に動作することがあります。そのため、ホスト名だけでは、どのサービスへリクエストを届ければよいか判断できません。
ポート番号は、コンピュータ内で動作しているどのサービスへリクエストを届けるのかを指定する番号です。
localhostを建物の住所にたとえるなら、8080は建物内の部屋番号のようなものです。
| 指定内容 | 役割 |
|---|---|
| localhost | どのコンピュータに接続するかを指定する |
| 8080 | そのコンピュータ内のどのサービスに接続するかを指定する |
| localhost:8080 | 自分のコンピュータで動作するTomcatへ接続する |
Tomcatでは、初期設定として8080が使われることが一般的です。そのため、学習中は localhost:8080 を一まとまりとして覚えておくと分かりやすいでしょう。
HTTPでは、ポート番号を省略すると通常は80が使用されます。しかし、今回のTomcatは8080で待ち受けているため、URLには :8080 を付ける必要があります。
リクエストとレスポンスの流れ
ブラウザにURLを入力して実行すると、ブラウザからTomcatへリクエストが送られます。
TomcatはURLを確認し、study の中から welcome.html を探します。対象のファイルが見つかると、その内容をレスポンスとしてブラウザへ返します。
ブラウザは返されたHTMLを読み取り、見出しや文章として画面に表示します。
この流れは、今後サーブレットやJSPを実行するときにも基本的に同じです。
| 順番 | 動作 |
|---|---|
| 1 | ブラウザにURLを入力する |
| 2 | ブラウザがTomcatへリクエストを送る |
| 3 | Tomcatがstudy内の対象を探す |
| 4 | TomcatがHTMLをレスポンスとして返す |
| 5 | ブラウザがHTMLを画面に表示する |
ブラウザに 開発環境の準備ができました と表示されれば、Eclipseでのファイル作成、Tomcatの起動、URLによるアクセスが正しくできています。
ファイルを直接開く場合とURLで開く場合
HTMLファイルを直接開いた場合、ブラウザのアドレスバーには、次のようにファイルの場所が表示されることがあります。
file:///C:/pleiades/2026-03/workspace/study/src/main/webapp/welcome.html
この場合、ブラウザはコンピュータ内のHTMLファイルを直接読み込んでいます。Tomcatへリクエストを送っているわけではありません。
一方、今回使用するURLは次の形式です。
この場合は、ブラウザがTomcatへリクエストを送り、TomcatからHTMLを受け取っています。
| 確認する部分 | ファイルを直接開いた場合 | Tomcatから表示した場合 |
|---|---|---|
| URLの先頭 | file | http |
| localhost | 含まれない | 含まれる |
| ポート番号 | 含まれない | 8080が含まれる |
| Tomcat | 使用しない | 使用する |
今後のサーブレット&JSP学習では、アドレスバーが http://localhost:8080 から始まっていることを確認する習慣を付けましょう。
404ページが表示されたとき
ブラウザにURLを入力しても、作成したWebページではなく 404 と表示されたページが出ることがあります。
404は、ブラウザが要求した対象をサーバー内で見つけられなかったことを示すHTTPステータスコードです。
Tomcat自体が応答している場合でも、URLに対応するファイルや処理が存在しなければ404が返されます。
たとえば、実際のファイル名が welcome.html なのに、次のように入力すると404になる可能性があります。
welcome.html と Welcome.html では、先頭の文字の大文字と小文字が異なります。環境によっては別のファイルとして扱われるため、正しいファイルを見つけられません。
404が表示されたときの確認項目
| 確認する項目 | 確認内容 |
|---|---|
| プロジェクト名 | URLが study になっているか |
| ファイル名 | welcome.html と正しく入力しているか |
| 大文字と小文字 | 実際のファイル名と完全に一致しているか |
| フォルダ名 | ファイルがサブフォルダ内にある場合、URLにも含めているか |
| 保存場所 | src/main/webapp 以下に保存されているか |
| Tomcatの状態 | 起動済み になっているか |
| サーバーへの追加 | study がTomcatに追加されているか |
| ファイルの保存 | Eclipseで編集内容を保存しているか |
404ページは、Tomcatが完全に壊れていることを示すものではありません。
むしろ、Tomcatはリクエストを受け取ったものの、指定された対象を見つけられなかったと考えられます。そのため、まずはURLとファイルの配置を見直すことが大切です。
図3：ブラウザからのリクエストと404エラー
この図から分かること
ブラウザは、URLを使ってTomcatへリクエストを送ります。URLが正しく、対応するファイルが存在すれば、TomcatはHTMLをレスポンスとして返し、ブラウザにWebページが表示されます。
一方、URLに入力したプロジェクト名、フォルダ名、ファイル名などが間違っていると、Tomcatは対象を見つけられず、404を返します。
404が表示された場合は、すぐに難しい問題だと考える必要はありません。まずはURLとファイル名を一文字ずつ比較し、ファイルの保存場所も確認してみましょう。
404以外のHTTPエラー
Webアプリケーションの開発では、404以外のHTTPステータスコードが表示されることもあります。
| ステータスコード | 主な意味 | よくある原因 |
|---|---|---|
| 404 | 対象が見つからない | URL、ファイル名、パスの間違い |
| 405 | 許可されていないリクエスト方法 | GETとPOSTの扱いが合っていない |
| 500 | サーバー内部でエラーが発生した | Javaプログラムの例外や設定ミス |
HTMLファイルを表示する今回の操作では、URLの間違いによる404が起こりやすいでしょう。
今後サーブレットを作成するようになると、405や500も見かけるようになります。エラー画面が表示されたときは、ステータスコードを手がかりにして原因を探します。
表示できないときの確認順序
Webページが表示されない場合は、手当たり次第に設定を変更するのではなく、順番を決めて確認すると原因を見つけやすくなります。
まず、Eclipseのパッケージ・エクスプローラーで welcome.html が src/main/webapp 以下にあることを確認します。
次に、ファイル名が小文字の welcome.html になっていることを確認し、編集内容を保存します。
そのあと、サーバー ビューで Tomcat11_Java25 が 起動済み になっているかを確認します。study がTomcatに追加されていることも確認しましょう。
最後に、ブラウザのURLを見直します。
このURLと実際のプロジェクト名、フォルダ名、ファイル名が一致していれば、ページを表示できるはずです。
この確認方法は、今後サーブレットやJSPが動作しないときにも役立ちます。ファイルの場所、サーバーの状態、URL、コンソールのエラーという順番で確認する習慣を付けておくと、開発中のトラブルにも落ち着いて対応できるようになります。