サーブレット&JSPの基本｜Webページが表示されるしくみ

サーブレット&JSPの基本｜Webページが表示されるしくみ

URLを入力してから画面が現れるまで、ブラウザとWebサーバの会話をひも解こう。

私たちは普段、ブラウザのアドレス欄にURLを入力したり、検索結果のリンクをクリックしたりするだけでWebページを表示できます。

操作そのものはとても簡単ですが、その裏側では、ブラウザとWebサーバがネットワークを通じて情報をやり取りしています。ブラウザが必要なページを要求し、その要求を受け取ったWebサーバがHTMLなどのデータを返すことで、私たちの画面にWebページが表示されます。

この一連の流れを理解するうえで、特に重要になる用語がリクエストとレスポンスです。

ブラウザからWebサーバへ送る要求をリクエスト、Webサーバからブラウザへ返される応答をレスポンスといいます。サーブレットやJSPの学習でも何度も登場する言葉なので、ここで役割をしっかり整理しておきましょう。

専門用語が続くと難しく感じるかもしれません。しかし、ブラウザが注文を出し、Webサーバが注文されたデータを返すと考えると、全体の流れをつかみやすくなります。

Webページはブラウザだけで表示しているわけではない

Webページを開くとき、利用者が操作するのはブラウザです。

Google Chrome、Microsoft Edge、Mozilla Firefox、Safariなどのブラウザには、HTMLを読み取り、見出し、文章、画像、リンクなどを画面に表示する機能があります。

ただし、インターネット上のWebページを表示する場合、ブラウザの中に最初からHTMLが保存されているわけではありません。

HTMLや画像などのファイルは、Webサーバと呼ばれるコンピュータに配置されています。ブラウザはネットワークを通じてWebサーバへ接続し、表示したいページのデータを送ってもらいます。

Webページが表示されるまでには、主に次の2つが働きます。

ブラウザはWebページを見るための窓口です。Webサーバは、Webページに必要なファイルを保管し、要求に応じて送り出す役割を持っています。

リクエストとは

ブラウザからWebサーバへ送られる要求をリクエストといいます。

利用者がURLを入力したりリンクをクリックしたりすると、ブラウザはその情報をもとに、どのWebサーバの、どのページが必要なのかを判断します。

そして、Webサーバに対して、指定されたページのデータを送ってほしいと要求します。

たとえば、利用者が地域のレストランを紹介するページを開こうとした場合、ブラウザは次のような意味を持つリクエストを送ります。

「このWebサーバにあるrestaurant-guide.htmlを送ってください」

実際の通信では、ページ名だけでなく、通信方法、ブラウザに関する情報、利用できるデータ形式なども送られます。しかし、最初は、ブラウザが必要なページをWebサーバへ伝えるものがリクエストだと理解しておけば大丈夫です。

レスポンスとは

Webサーバからブラウザへ返される応答をレスポンスといいます。

Webサーバはリクエストを受け取ると、要求されたファイルや情報を探します。目的のHTMLファイルが見つかれば、その内容をブラウザへ返します。

レスポンスには、HTMLのほかにも、処理結果を示す情報が含まれます。

たとえば、要求されたページが見つかった場合は、正常に処理できたことを示す情報とHTMLが返されます。反対に、指定されたファイルが見つからなければ、ページが見つからないことを示す応答が返されます。

リクエストとレスポンスの関係は、次のように整理できます。

この2つは常に対になって考えます。

ブラウザがリクエストを送らなければ、Webサーバはどのページを返せばよいか分かりません。また、Webサーバからレスポンスが返らなければ、ブラウザはWebページを表示できません。

図1：ブラウザとWebサーバの基本的なやり取り

この図から分かること

Webページを表示するときは、最初にブラウザがWebサーバへリクエストを送ります。

Webサーバは、指定されたHTMLファイルを探し、その内容をレスポンスとしてブラウザへ返します。ブラウザは受け取ったHTMLを読み取り、見出しや文章などを画面上に組み立てます。

つまり、Webページはブラウザだけで作られているのではありません。ブラウザとWebサーバが通信し、それぞれの役割を果たすことで表示されています。

リクエストを送るにはページの場所が必要

Webサーバには、複数のHTMLファイルや画像ファイルが保存されています。

ブラウザが単にWebページを送ってくださいと伝えるだけでは、Webサーバはどのページを返せばよいか判断できません。そのため、ブラウザは表示したいページの場所を具体的に指定する必要があります。

この場所を示すものがURLです。

URLはUniform Resource Locatorの略で、インターネット上にあるWebページや画像などの場所を示します。一般には、Webページの住所にたとえられます。

たとえば、レストラン案内ページに、次のURLが割り当てられているとします。

https://www.sample-town.jp/restaurant-guide.html

ブラウザは、このURLを使って接続先のWebサーバと、必要なHTMLファイルを判断します。

URLを構成する主な情報

URLには、通信方法、接続先、ファイルの場所などが含まれています。

先ほどのURLを分けると、次のようになります。

スキーム

URLの先頭にあるhttpsは、ブラウザとWebサーバが通信するときの方法を示します。

Webページの通信では、主にHTTPまたはHTTPSが使われます。

HTTPSでは、ブラウザとWebサーバの間で送受信する情報が暗号化されます。そのため、現在のWebサイトではHTTPSが広く利用されています。

ホスト名

www.sample-town.jpの部分は、接続先のWebサーバを表すホスト名です。

インターネット上には非常に多くのWebサーバがあります。ホスト名を指定することで、ブラウザはどのWebサーバへ接続すればよいかを判断できます。

実際の通信では、コンピュータを識別するためにIPアドレスが使われます。ただし、IPアドレスは数字の並びで、人間には覚えにくいものです。

そこで、人間が扱いやすいホスト名を利用し、必要に応じてIPアドレスへ変換します。

ファイル名

restaurant-guide.htmlの部分は、Webサーバから取得したいHTMLファイルを表しています。

Webサーバには複数のファイルが保存されているため、ファイル名やフォルダ名を使って、どのデータが必要なのかを指定します。

URLに含まれるファイル名を間違えると、Webサーバは目的のファイルを見つけられません。その場合、ページが見つからないことを示すレスポンスが返されることがあります。

ホスト名とIPアドレスの関係

ネットワークに接続されたコンピュータは、IPアドレスによって識別されます。

しかし、利用者がWebページを見るたびに数字のIPアドレスを入力するのは不便です。そのため、Webではホスト名やドメイン名を使って接続先を指定する方法が一般的です。

ホスト名をIPアドレスへ変換するときには、DNSというしくみが利用されます。

DNSはDomain Name Systemの略で、ホスト名に対応するIPアドレスを調べる役割を持っています。

ブラウザがwww.sample-town.jpへ接続する場合、内部では次のような流れが発生します。

1. ブラウザがホスト名を確認する
2. DNSを使って対応するIPアドレスを調べる
3. 判明したIPアドレスを持つWebサーバへ接続する
4. 必要なHTMLファイルをリクエストする

利用者は通常、この変換を意識する必要はありません。URLを入力すれば、ブラウザやネットワークが必要な処理を自動的に進めます。

図2：URLから接続先とファイルを特定する

この図から分かること

URLは、単なる文字列ではありません。

先頭部分には通信方法、中央部分には接続先となるWebサーバのホスト名、後半には取得したいファイルの場所が含まれています。

ブラウザはURLを読み取り、DNSを使って接続先のIPアドレスを調べます。その後、Webサーバへ接続し、指定されたHTMLファイルをリクエストします。

URLで指定されるパス

Webサーバに保存されているファイルは、すべて同じ場所に置かれているとは限りません。目的や種類ごとにフォルダへ分けて管理されることがあります。

たとえば、URLが次の形になっているとします。

https://www.sample-town.jp/gourmet/restaurant-guide.html

この場合、gourmetはWebサーバ内のフォルダに相当し、restaurant-guide.htmlはその中にあるHTMLファイルを表します。

ホスト名の後ろに続く、フォルダ名やファイル名を含む部分をパスと呼びます。

HTMLでリンクを作成するときにも、パスの考え方が必要になります。

リンク先と現在のHTMLファイルの位置関係が正しく指定されていないと、ブラウザは目的のページを見つけられません。

index.htmlが省略されることがある

WebサイトのURLでは、ファイル名が表示されていない場合があります。

たとえば、次のようなURLです。

https://www.sample-town.jp

このURLにはHTMLファイル名が書かれていません。しかし、多くのWebサーバでは、ファイル名が省略されたときに表示する既定のファイルが設定されています。

その代表がindex.htmlです。

Webサーバの設定によっては、次の2つのURLが同じページを示します。

https://www.sample-town.jp

https://www.sample-town.jp/index.html

index.htmlは、Webサイトやフォルダの入口となるページによく使われるファイル名です。

ただし、必ずindex.htmlが使用されるとは限りません。どのファイルを既定のページにするかは、Webサーバの設定によって変わります。

リンクをクリックしたときにもリクエストが送られる

ブラウザのアドレス欄にURLを直接入力したときだけでなく、Webページ内のリンクをクリックしたときにも、新しいリクエストが送られます。

a要素のhref属性には、リンク先のURLやパスが指定されています。

利用者がリンクをクリックすると、ブラウザはhref属性の値を確認し、指定されたページをWebサーバへリクエストします。

一覧ページからプロフィールページへ移動する場合も、次のような流れになります。

1. 一覧ページがブラウザに表示される
2. 利用者がプロフィールへのリンクをクリックする
3. ブラウザがリンク先のURLを確認する
4. ブラウザがプロフィールページをリクエストする
5. WebサーバがプロフィールページのHTMLを返す
6. ブラウザが新しいHTMLを読み取って表示する

ページを移動するたびに、ブラウザとWebサーバの間でリクエストとレスポンスが行われます。

Webサーバが返すのは完成画面ではない

Webサーバからブラウザへ送られるものは、基本的に画面を撮影した画像ではありません。

Webサーバは、HTML、CSS、JavaScript、画像など、Webページを作るためのデータを返します。

ブラウザは受け取ったデータを解釈し、利用者の画面上にWebページを組み立てます。

それぞれのデータには、次のような役割があります。

HTMLからCSSや画像が参照されている場合、ブラウザはHTMLを受け取った後、それらのファイルも追加でリクエストします。

そのため、1つのWebページを表示するときに、リクエストとレスポンスが1回だけとは限りません。

1ページの表示でも複数回通信する

たとえば、HTMLの中でCSSファイルと2枚の画像を利用している場合、ブラウザは次のように複数のファイルを取得します。

1. HTMLファイルをリクエストする
2. HTMLのレスポンスを受け取る
3. HTMLを読み、必要なCSSファイルを見つける
4. CSSファイルをリクエストする
5. CSSのレスポンスを受け取る
6. HTML内で指定された画像をリクエストする
7. 画像のレスポンスを受け取る
8. 取得したデータを組み合わせて画面を表示する

画面上では1つのWebページに見えていても、その裏側では複数のファイルが読み込まれています。

CSSファイルや画像が見つからない場合は、HTMLだけが表示され、見た目が崩れたり、画像部分が空白になったりすることがあります。

レスポンスには処理結果も含まれる

Webサーバからのレスポンスには、HTMLなどのデータだけでなく、リクエストをどのように処理したかを示す情報も含まれています。

この処理結果を表す代表的なものがHTTPステータスコードです。

通常、正常にWebページが表示された場合は200に相当する結果が返されています。

存在しないURLを指定したときに404と表示されることがありますが、これはブラウザが壊れたという意味ではありません。Webサーバには接続できたものの、指定されたページが見つからなかったことを示しています。

サーブレットやJSPを使ったWebアプリケーションでは、サーバ側のJavaプログラムで問題が発生し、500に相当するエラーが返されることもあります。

パソコン内のHTMLを開く場合との違い

これまでに作成したHTMLファイルをダブルクリックして開いた場合、ブラウザのアドレス欄にはfileから始まる情報が表示されることがあります。

これは、インターネット上のWebサーバへ接続しているのではなく、パソコン内のファイルを直接読み込んでいることを表します。

HTMLの表示練習であれば、パソコン内のファイルを直接開くだけでも十分です。

しかし、サーブレットやJSPはWebサーバやアプリケーションサーバ上で動作します。そのため、サーブレット・JSPの学習では、URLを使ってサーバへアクセスする形へ進んでいきます。

サーブレット・JSPでは処理結果からHTMLを作る

固定されたHTMLファイルを表示するだけであれば、Webサーバは保存されているファイルをそのまま返せます。

一方、Webアプリケーションでは、利用者の入力内容やデータベースの情報に応じて、表示する内容が変わります。

たとえば、商品検索ページでは、入力された検索語によって結果が異なります。会員ページでは、ログインした利用者によって名前や履歴が変わります。

このような場合は、サーバ側でプログラムを実行し、処理結果からHTMLを作ります。

JavaによるWebアプリケーションでは、サーブレットがリクエストを受け取り、JSPが処理結果を使ってHTMLを生成する構成がよく使われます。

流れを整理すると、次のようになります。

1. ブラウザがURLへアクセスする
2. Webサーバがリクエストを受け取る
3. サーブレットが必要な処理を行う
4. 処理結果をJSPへ渡す
5. JSPがHTMLを生成する
6. 生成されたHTMLをレスポンスとして返す
7. ブラウザがHTMLを表示する

ブラウザから見ると、固定されたHTMLファイルを受け取った場合も、JSPによって生成されたHTMLを受け取った場合も、最終的に受け取るものはHTMLです。

図3：URLの入力からWebページ表示までの流れ

この図から分かること

利用者がURLを入力すると、ブラウザはURLに含まれるホスト名から接続先を調べ、Webサーバへリクエストを送ります。

Webサーバは、要求されたHTMLファイルを探すか、サーブレットやJSPなどを使って必要なHTMLを生成します。そして、用意したデータをレスポンスとしてブラウザへ返します。

ブラウザは受け取ったHTMLを読み取り、必要に応じてCSSや画像も追加で取得しながらWebページを組み立てます。

Webページが表示されないときの見方

Webページが表示されない場合は、リクエストとレスポンスのどの段階に問題があるかを考えると、原因を整理しやすくなります。

ブラウザの画面だけを見るのではなく、どのURLへアクセスしたのか、どのファイルを要求したのか、Webサーバからどのようなレスポンスが返されたのかを考えることが大切です。

リクエストとレスポンスは今後の学習の土台になる

サーブレットやJSPの学習では、ブラウザから送られたリクエストをJavaのプログラムで受け取る方法を学びます。

フォームに入力された文字、選択された項目、クリックされたボタンなども、リクエストに含めてWebサーバへ送れます。

サーブレットはその情報を取り出し、必要な処理を行います。処理が終わったら、JSPなどを利用してHTMLを生成し、レスポンスとしてブラウザへ返します。

これから学習する内容と、リクエスト・レスポンスの関係は次のとおりです。

Webページが表示されるしくみを理解すると、サーブレットがどこで動き、JSPが何を作り、ブラウザが何を受け取っているのかが見えやすくなります。

URLは必要なページの場所を示し、ブラウザはURLをもとにリクエストを送ります。Webサーバは要求されたデータや処理結果をレスポンスとして返し、ブラウザがそれを画面に表示します。

この一連の流れを意識しながら、これからのサーブレット・JSPの学習を進めていきましょう。