サーブレット&JSPの基本｜サーブレット・JSPを学ぶ前に

サーブレット&JSPの基本｜サーブレット・JSPを学ぶ前に

ブラウザに映る画面のしくみを知れば、サーブレットとJSPの学びがもっと身近になる。

私たちが日常的に利用しているサービスの多くは、Webアプリケーションとして提供されています。商品を購入するショッピングサイト、メッセージを投稿するSNS、目的地までの経路を調べる乗換案内、予定を管理するカレンダーなど、身近なところに数多くのWebアプリケーションがあります。

企業の仕事でも、顧客情報を管理するシステム、商品の在庫を確認するシステム、社員の勤怠を記録するシステムなどが、ブラウザから利用できる形で提供されています。

サーブレットとJSPは、このようなWebアプリケーションをJavaで開発するための技術です。

ただし、Javaのプログラムを書けるだけでは、Webアプリケーションを完成させることはできません。ブラウザに表示される画面、ブラウザとサーバの通信、Webサーバの役割など、Web特有のしくみも理解する必要があります。

そこで、サーブレットやJSPのプログラムを作り始める前に、まずはWebアプリケーションがどのようなものなのかを確認していきましょう。特に重要なのが、Webアプリケーションの画面を作るHTMLと、それを表示するブラウザの関係です。

最初は覚えることが多いように見えるかもしれません。しかし、それぞれの技術が担当する役割を一つずつ整理すると、Webアプリケーションの全体像が少しずつ見えてきます。

Webアプリケーションとは

Webアプリケーションとは、Webのしくみを利用して動作するアプリケーションです。

利用者はパソコンやスマートフォンに専用のアプリケーションをインストールする代わりに、Google ChromeやMicrosoft Edgeなどのブラウザを使ってWebアプリケーションへアクセスします。

たとえば、オンラインショップで商品を検索するときは、ブラウザから検索条件を送信します。サーバはその条件を受け取り、該当する商品をデータベースから探します。そして、検索結果をWebページとしてブラウザへ返します。

このように、ブラウザとサーバが通信しながら処理を進めることが、Webアプリケーションの大きな特徴です。

デスクトップアプリケーションとの違い

以前は、利用者のパソコンにソフトウェアをインストールして使用するデスクトップアプリケーションが一般的でした。

現在でも、画像編集ソフトや動画編集ソフトなどではデスクトップアプリケーションが広く使われています。一方、複数の利用者が同じ情報を共有するシステムや、さまざまな端末から利用するサービスでは、Webアプリケーションが多く採用されています。

Webアプリケーションはブラウザを利用するため、利用者の端末やOSが異なっていても、同じサービスを提供しやすいという利点があります。

ただし、すべてのブラウザで画面が完全に同じになるとは限りません。HTMLやCSSの書き方、ブラウザが対応している機能などを考慮しながら開発する必要があります。

Webアプリケーションが身近になった理由

Webアプリケーションが急速に普及した背景には、インターネット環境と利用端末の発展があります。

以前と比べると、現在は高速なインターネット回線を手頃な料金で利用できるようになりました。家庭や職場だけでなく、外出先でもモバイル回線やWi-Fiを使ってインターネットへ接続できます。

さらに、スマートフォンやタブレットが普及したことで、利用者は場所を選ばずWebサービスへアクセスできるようになりました。

Webアプリケーションを提供する側にとっても、サーバ上のプログラムを更新することで、多くの利用者に新しい機能を提供できるという利点があります。

Webアプリケーションが利用されている分野は、個人向けサービスだけではありません。

このように、Webアプリケーションは私たちの生活や仕事を支える重要なしくみになっています。

図1：身近なサービスを支えるWebアプリケーション

この図から分かること

Webアプリケーションは、SNSやショッピングサイトのような個人向けサービスだけでなく、顧客管理や在庫管理といった企業の業務にも使われています。

利用者はパソコン、スマートフォン、タブレットなど、さまざまな端末のブラウザからサービスへアクセスします。利用する端末が異なっていても、通信先となるサーバは共通です。

サーバ側にデータや処理を集めることで、複数の利用者が同じ情報を共有しやすくなります。これが、Webアプリケーションが多くのサービスや業務システムで採用される大きな理由です。

Webアプリケーション開発には複数の知識が必要

Webアプリケーションを作るには、Javaだけでなく、さまざまな技術の知識が必要です。

サーブレットは、ブラウザから送られてきたリクエストを受け取り、必要な処理を行うJavaのプログラムです。JSPは、処理結果を利用してブラウザへ返すHTMLを組み立てるために使われます。

しかし、サーブレットやJSPが作成した結果を最終的に表示するのはブラウザです。そして、ブラウザがWebページとして表示するためには、HTMLが必要です。

Webアプリケーション開発で関係する主な技術を整理すると、次のようになります。

最初からすべてを完全に理解する必要はありません。

まずは、Webページの基本となるHTMLを知り、その後でブラウザとサーバの通信へ進みます。さらに、サーブレットでリクエストを処理し、JSPで画面を作るという順番で学ぶと、それぞれの技術の役割を理解しやすくなります。

WebページはWebアプリケーションの画面になる

Webアプリケーションを利用するとき、利用者が直接目にするのはブラウザに表示されたWebページです。

ログイン画面、商品一覧画面、入力フォーム、検索結果画面などは、いずれもHTMLを使って作られています。

たとえば、会員登録を行うWebアプリケーションには、氏名やメールアドレスを入力する画面があります。利用者が入力した内容はサーバへ送られ、サーブレットが内容を受け取ります。

サーブレットは入力された値を確認し、問題がなければデータベースへ登録します。登録後はJSPを使って、登録完了を知らせるWebページを生成します。

この一連の流れを考えると、HTMLがWebアプリケーションに欠かせない理由が分かります。

1. HTMLで入力画面を表示する
2. 利用者が情報を入力する
3. 入力内容をサーバへ送信する
4. サーブレットが情報を受け取って処理する
5. JSPが処理結果をHTMLとして生成する
6. ブラウザが生成されたHTMLを画面に表示する

サーブレットとJSPはサーバ側で動作しますが、最終的にブラウザへ返すものはHTMLです。そのため、サーブレットとJSPを学ぶ前に、HTMLの基本を理解しておく必要があります。

HTMLとは

HTMLはHyperText Markup Languageの略で、Webページの内容や構造を記述するための言語です。

HTMLでは、文章のどの部分が見出しなのか、どの部分が段落なのか、どこに画像やリンクを配置するのかをタグによって指定します。

たとえば、次のような要素があります。

Javaのプログラムでは、命令の順序や変数の型などを意識して記述します。一方、HTMLでは、ページ内の情報にどのような役割があるのかをタグで示します。

そのため、Javaとは書き方も考え方も異なります。ただし、HTMLの基本文法は比較的シンプルです。最初はタグの種類が多く見えるかもしれませんが、よく使用するものから少しずつ覚えれば問題ありません。

HTMLとブラウザの関係

HTMLは、そのままではタグを含んだテキストデータです。

ブラウザには、HTMLを読み取り、タグの意味に従って画面を組み立てる機能があります。見出しを大きく表示したり、段落ごとに文章を分けたり、画像を表示したりできるのは、ブラウザがHTMLを解釈しているためです。

HTMLとブラウザの役割は、次のように整理できます。

同じHTMLをGoogle Chrome、Microsoft Edge、Mozilla Firefox、Safariなどで開くと、基本的には同じ内容が表示されます。

ただし、フォントや入力部品の細かな見た目などは、ブラウザやOSによって少し異なる場合があります。

WebページのHTMLを確認する

普段見ているWebページがHTMLで作られていることは、ブラウザの機能を使って確認できます。

Google Chromeでは、Webページ上で右クリックし、表示されたメニューから「ページのソースを表示」を選択します。キーボードでは、Windowsの場合はCtrl+U、macOSの場合はOption+Command+Uでも表示できます。

ソースを表示すると、HTMLタグを含んだテキストが新しい画面に表示されます。

なお、右クリックメニューには「検証」という項目もあります。「ページのソースを表示」と「検証」は似ているように見えますが、確認している内容が少し異なります。

最初の段階では、「ページのソースを表示」を使い、WebページがどのようなHTMLで記述されているかを眺めてみるとよいでしょう。

表示されるタグの意味を、すべて理解する必要はありません。まずは、ブラウザに見えているWebページの裏側にHTMLが存在することを確認するのが目的です。

図2：HTMLのソースをブラウザで確認する

この図から分かること

ブラウザに表示されているWebページと、そのページを構成しているHTMLは、見た目が大きく異なります。

利用者が普段目にしているのは、ブラウザがHTMLを読み取って組み立てた結果です。ページのソースを表示すると、その画面を作るためにサーバから送られてきたHTMLを確認できます。

左側のWebページに表示されている見出しや文章は、右側のHTMLに記述されているh1要素やp要素などをもとに表示されています。

HTMLファイルを見てみよう

ここでは、地域で開催されるイベントを紹介するWebサイトを例にして、HTMLの基本的な形を確認します。

地域イベント案内サイトのHTMLの例

ファイル名：event-guide.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>まちのイベント案内</title>
</head>
<body>
  <header>
    <h1>まちのイベント案内</h1>
    <p>休日に楽しめる地域の催しを紹介します。</p>
  </header>

  <main>
    <section>
      <h2>今週のおすすめ</h2>

      <article>
        <h3>駅前サマーマーケット</h3>
        <p>地元のお店が集まる期間限定のマーケットです。</p>
      </article>

      <article>
        <h3>親子ものづくり体験</h3>
        <p>木材を使って小さな収納箱を作ります。</p>
      </article>
    </section>
  </main>

  <footer>
    <p>まちのイベント案内事務局</p>
  </footer>
</body>
</html>

ブラウザの表示例

HTMLでは、タグを使ってページの構造を表します。

最初のDOCTYPE htmlは、このファイルがHTMLで記述されていることをブラウザへ伝えるための宣言です。

html要素は、HTML文書全体を囲んでいます。lang属性にjaを指定することで、このページの主な言語が日本語であることを示しています。

head要素には、ページ自体に関する情報を記述します。文字コード、画面表示に関する設定、ブラウザのタブに表示されるタイトルなどが含まれます。

body要素には、ブラウザの画面に表示する内容を記述します。

この例では、ページをheader、main、footerの3つに分けています。

h1、h2、h3は見出しです。

h1にはページ全体を表す「まちのイベント案内」を記述しています。h2にはページ内の大きな内容を表す「今週のおすすめ」を記述し、h3には個別のイベント名を記述しています。

p要素は文章の段落を表します。

ブラウザでこのHTMLファイルを開くと、DOCTYPE htmlやhtmlといったタグは画面にそのまま表示されません。ブラウザがそれぞれのタグを解釈し、見出しや段落として表示します。

HTMLは特別な形式ではなくテキストデータ

HTMLファイルの内容は、テキストエディタで開いて編集できる文字データです。

Word文書や画像ファイルのように、専用のアプリケーションでなければ内容を確認できない形式ではありません。Windowsのメモ帳やVisual Studio Codeなどのテキストエディタを使って作成できます。

ファイルの拡張子にはhtmlを使用します。

たとえば、次のようなファイル名を付けられます。

• index.html
• login.html
• product-list.html
• contact.html
• event-guide.html

index.htmlは、Webサイトやフォルダの最初のページとしてよく使用されるファイル名です。

HTMLファイルをWebサーバに配置すると、ブラウザからURLを指定してアクセスできるようになります。

ローカル環境に保存したHTMLファイルをブラウザで直接開くこともできますが、その段階ではサーバとの通信は発生していません。HTMLの表示を練習するときには十分ですが、サーブレットやJSPを動作させるにはWebサーバやアプリケーションサーバが必要になります。

静的なWebページと動的なWebページ

HTMLファイルをそのままブラウザへ返すページは、静的なWebページと呼ばれます。

静的なWebページでは、基本的に誰がアクセスしても同じ内容が表示されます。会社案内、施設案内、利用規約など、内容が頻繁に変化しないページに適しています。

一方、アクセスした利用者や入力された条件によって内容が変化するページは、動的なWebページと呼ばれます。

オンラインショップの商品検索では、利用者が入力したキーワードによって表示される商品が変わります。ログイン後の会員ページでは、利用者ごとに氏名や注文履歴が異なります。

このようなページを、すべて固定されたHTMLファイルとして用意するのは現実的ではありません。

そこで、サーブレットが検索条件やログイン情報を処理し、JSPが処理結果に応じたHTMLを生成します。

たとえば、利用者が商品検索画面でノートパソコンと入力した場合、サーブレットはデータベースから該当する商品を検索します。JSPは検索された商品の名前や価格をHTMLの一覧として組み立てます。

別の利用者がキーボードと入力すれば、同じJSPを使いながら、異なる商品一覧を表示できます。

このように、必要なタイミングでHTMLを組み立てることが、動的なWebページの基本です。

サーブレットとJSPの役割

サーブレットとJSPは、どちらもJavaによるWebアプリケーション開発で使用されますが、得意とする役割が異なります。

サーブレットが担当すること

サーブレットは、主にブラウザから送られてきた情報を受け取り、必要な処理を行います。

代表的な処理には、次のようなものがあります。

• 入力フォームの値を受け取る
• 入力内容が正しいか確認する
• ログイン情報を確認する
• データベースを検索する
• データを登録、更新、削除する
• 処理結果をJSPへ渡す
• 次に表示する画面を決める

サーブレットは、Webアプリケーションの処理を進める中心的な役割を持っています。

JSPが担当すること

JSPは、主にブラウザへ返す画面を作ります。

サーブレットから受け取ったデータをHTML内に埋め込み、商品一覧、会員情報、検索結果などを表示します。

JSPのファイルには、HTMLを中心として画面の構造を記述します。必要に応じて、サーブレットから渡された値を表示するための記述を追加します。

一般的なWebアプリケーションでは、サーブレットが処理を担当し、JSPが画面表示を担当するように役割を分けます。

サーブレットだけでHTMLを生成することもできますが、JavaのプログラムとHTMLが混在しやすくなります。

JSPを利用して画面表示を分離すると、処理部分と表示部分の役割が分かりやすくなり、プログラムの修正や管理もしやすくなります。

ブラウザとサーバのやり取り

Webアプリケーションでは、ブラウザがサーバに対してリクエストを送り、サーバがレスポンスを返します。

リクエストは、ブラウザからサーバへの要求です。レスポンスは、サーバからブラウザへ返される結果です。

たとえば、利用者がログインボタンを押した場合、次のような流れで処理が進みます。

1. ブラウザがユーザーIDとパスワードをサーバへ送る
2. Webサーバがリクエストを受け付ける
3. サーブレットが入力内容を受け取る
4. サーブレットが登録情報と照合する
5. 処理結果をJSPへ渡す
6. JSPがログイン結果を表すHTMLを生成する
7. 生成されたHTMLがブラウザへ返される
8. ブラウザがHTMLを読み取り、画面に表示する

この流れの中で、利用者が直接操作するのはブラウザです。サーブレットやJSPはサーバ側で動いているため、利用者の画面から直接見ることはできません。

利用者が確認できるのは、サーバ側の処理によって生成された最終的なHTMLです。

図3：HTMLからサーブレット・JSPへ進む学習の流れ

この図から分かること

サーブレットとJSPは、HTMLやブラウザとは独立した技術ではありません。

HTMLでWebページの構造を作り、ブラウザがHTMLを読み取って画面に表示します。ブラウザとサーバはHTTPを使ってリクエストとレスポンスをやり取りします。

サーバ側では、サーブレットがリクエストを受け取って処理を行います。そしてJSPが処理結果を使ってHTMLを生成し、ブラウザへ返します。

このため、HTML、ブラウザ、HTTP、サーブレット、JSPの順番で学ぶと、Webアプリケーション全体のつながりを理解しやすくなります。

最初にHTMLを学ぶ理由

サーブレットやJSPの学習を始めると、Javaのコードだけでなく、HTMLのタグが頻繁に登場します。

特にJSPは、HTMLを基本として記述します。HTMLの構造が分からない状態では、JSPが生成する画面を理解することが難しくなります。

また、サーブレットでは、処理後にどのJSPを表示するのかを決めたり、JSPへ表示用のデータを渡したりします。表示される画面を考えるためにも、HTMLの知識が必要です。

最初に身に付けておきたいHTMLの基礎は、次のような内容です。

• HTML文書の基本構造
• 開始タグと終了タグ
• 見出しと段落
• リンクと画像
• リストと表
• 入力フォーム
• 属性の指定方法
• ファイルの保存とブラウザでの表示

すべてのHTML要素を暗記する必要はありません。まずは基本的なタグを使って、簡単なWebページを自分で作れるようになることを目指します。

分からないタグが出てきたときに調べながら使える状態になれば、サーブレットやJSPの学習にも十分進めます。

Webページの正体を意識してみよう

普段Webページを利用するとき、HTMLの存在を意識することはほとんどありません。

しかし、ブラウザに表示される見出し、文章、ボタン、入力欄、表、画像、リンクなどは、HTMLによって構造が定義されています。

Webアプリケーションの画面も同じです。

サーブレットがどれほど複雑な処理を行っても、利用者に結果を伝えるには画面が必要です。JSPが画面を生成しても、最終的にはHTMLとしてブラウザへ送られます。

サーブレット・JSPの学習では、Javaのプログラムだけを見るのではなく、次の3点を結び付けて考えることが大切です。

• ブラウザから何が送信されたのか
• サーバ側でどのような処理を行うのか
• 処理結果をどのようなHTMLとして返すのか

この3点を意識すると、Webアプリケーションの動作を理解しやすくなります。

まずは簡単なHTMLファイルを作成し、ブラウザで表示してみましょう。その後、ブラウザからサーバへ情報を送る方法を学び、サーブレットによる処理とJSPによる画面表示へ進んでいきます。

Webページの裏側にあるHTMLの存在を理解することが、JavaによるWebアプリケーション開発の最初の一歩です。