• JavaによるWebアプリケーション開発入門

    公開日:2016年09月23日 最終更新日:2022年04月25日

    Java言語を使って出来ることのひとつに「Webアプリケーションの作成」があります。javaをこれから勉強しようとしている人や「Webアプリケーションとは何?」と疑問をお持ちの人向けにJavaで作成するWebアプリケーションの概要について説明します。

    プロエンジニアの無料会員登録はこちら

    目次

    1. Webアプリケーションサーバーとは?

    そもそも「Webアプリケーションサーバー」とは何でしょうか? その仕組みについて簡単に説明します。

    ●Webサーバーとの違い

    「Webサーバー」とはホームページを表示する機能を持ち、他のサーバーとリンクして世界中のどこからでもアクセス可能な状態であるサーバーの事を指します。ユーザーはURLと呼ばれるインターネットアドレスをブラウザーに入力し、サーバー上に保存されているHTML文書などのリソースを取得してページの参照・閲覧をしています。
    HTML文書に記載された文字列だけをそのまま表示するページもあれば、ユーザーのリクエスト(検索やフォームへの入力など)や環境(OSやハードウェアの種類)に応じて表示内容を変えるページが存在します。そのまま表示されるページを「静的コンテンツ」と言い、リクエストに応じて表示内容を変化させるページの事を「動的コンテンツ」と呼びます。この動的コンテンツを表示する仕組みをもったサーバーのことを「Webアプリケーションサーバー」と呼びます。

    ▲ページトップへ戻る

    2. JavaでWebアプリケーションを開発する

    「動的コンテンツ」を作成するために様々な「プラグラミング言語」が使われています。その「プラグラミング言語」の一つに「Java言語」があります。「Webアプリケーションサーバー」は、ユーザー(クライアント)の要求を受け取ると、サーバー上のプログラムでその要求を処理してその結果をブラウザーに表示させます。イメージが付きにくいかもしれませんが、検索やお問い合わせフォームの入力やオンラインショッピングを想像してみて下さい。クライアントからの要求(リクエスト)は多種多様です。ネット検索において、サーバー側では様々な検索文字列を入力として受け取り、またオンラインショップでは選択される商品の種類などもクライアントごとに異なります。それでもサーバー側にあるプログラムが適切な判断をし、検索結果を表示したりお買い物をしたりすることができます。

    ▲ページトップへ戻る

    2.1 Apache Tomcat

    Webアプリケーションサーバーで動くJavaのプログラムの事を「Javaサーブレット(Servlet)」といい、そのプログラムを動かす仕組みを提供するソフトを「WEBコンテナ」、Javaサーブレットを動かすソフトなのでまたの名を「サーブレットコンテナ」と言います。無償で利用可能な「サーブレットコンテナ」として有名なのが「Apache Tomcat」です。その他にもIBMの「WebSphere Application Server」や「Oracle WebLogic Server」などがあります。

    Apache Tomcat公式ページ

    Apache Tomcatフリーランスエンジニア案件情報 | プロエンジニアjavaw1

    ▲ページトップへ戻る

    2.2 サーブレット(Servelt)とJSP

    Javaサーブレットは、サーバー上で動くJavaのプログラムですが、HTML文書の中に埋め込むことの出来る「JSP(JavaServer Pages)」というJavaのプログラムがあります。このJSPも「Apache Tomcat」などのサーブレットコンテナがある環境で動きます。WEBアプリケーションの設計をする際にはクライアントへの表示(View)部分を担うプログラム、それからクライアントから受け取ったデータをコントロール(Control)するプログラム、コントロールから受け取ったデータを処理して返すモデル(Model)を作成するプログラムに分けて書かれることが推奨されています。一般的に「MVCモデル」と呼ばれています。と言われてもJavaやプログラミングの勉強を始めたばかりの人にとって「MVCモデル」という言葉は何のことやらという感じではないでしょうか?
    最初はぼんやりと分かる程度で構いません、勉強と実践を進めていく中で、「ああ、こういうことなんだ!」と分かる日がきますのでそれまではJavaの基礎をしっかりと学んで下さい。

    実際に「TOMCAT」のサンプルプログラムでサーブレットとJSPの動きを見てみることにしましょう。 「XAMPPをインストールしてみよう!」のコラムでXAMPPをインストールした方は「TOMCAT」のサービスを起動※してPC上で実際にサンプルを動かすことができますのでJavaで作成されたWEBアプリケーションのイメージを掴んで下さい。

    ※ただし、「XAMPP」の最低限のセキュリティ設定しかしていない場合は、ネットワークの接続を切った状態でサービスを起動することをおすすめします。XAMPPは便利ですが、各種アプリケーションのセキュリティが脆弱な状態でネットワークにつながると知らず知らずのうちに悪意のあるプログラムの攻撃対象となることもあります。XAMPPは開発環境を自分のPCに作成してネットワークにつなげなくともいろんなアプリケーションの勉強ができる環境を構築する目的で利用するのがよいでしょう。

    HTML文書で単に「Hello World!」と表示するコードを書くと以下の様になります。

    ●HelloWorld.html

    <html lang="ja">
    <head>
    <title>Hello World!</title>
    </head>
    <body>
    <h1>Hello World!</h1>
    </body>
    </html>

    ●ウェブブラウザーの表示

    JavaによるWebアプリケーション開発入門
フリーランスエンジニア案件情報 | プロエンジニアjavaw4-1

    次に、Javaで書かれたページを見てみましょう。
    XAMPPのTOMCATサービスを起動してブラウザーで「http://localhost:8080/examples/」と入力してみて下さい。

    ●Apache Tomcat Examples

    JavaによるWebアプリケーション開発入門
フリーランスエンジニア案件情報 | プロエンジニアjavaw2

    JavaサーブレットとJSPのサンプル集のリンクページが表示されますので、「Servlets examples」のリンクをクリックして下さい。

    ●Javaサーブレットのサンプル一覧

    JavaによるWebアプリケーション開発入門
フリーランスエンジニア案件情報 | プロエンジニアjavaw3

    するとサンプル一覧のページに飛びます。一番上のHello Worldの「Execute」リンクをクリックしてみて下さい。

    ●Javaサーブレットのページ

    JavaによるWebアプリケーション開発入門
フリーランスエンジニア案件情報 | プロエンジニアjavaw4

    一見するとHTMLで書いたページとなんら変わりないように見えますが、サンプル一覧のページに戻って今度は「Source」リンクをクリックするとJavaサーブレットのコードを確認することができます。

    ●Javaサーブレットのコード

    JavaによるWebアプリケーション開発入門
フリーランスエンジニア案件情報 | プロエンジニアjavaw5

    HTMLではなく、Java言語でHTMLの文書を作成しブラウザーに表示しています。

    ●JSPのサンプル一覧

    JavaによるWebアプリケーション開発入門
フリーランスエンジニア案件情報 | プロエンジニアjavaw6

    次にサンプルリンクページ「http://localhost:8080/examples/」に戻って、「JSP Examples」をクリックしてJSPのサンプル一覧を表示して下さい。「Hello World Tag」の「Execute」リンクをクリックすると、今度はJSPで書かれたページが表示されます。

    ●JSPで書かれたページ

    JavaによるWebアプリケーション開発入門
フリーランスエンジニア案件情報 | プロエンジニアjavaw7-1

    このページで見てほしいのは「Result: Hello, World!」の「Hello, World!」の部分です。

    ●JSPのコード

    JavaによるWebアプリケーション開発入門
フリーランスエンジニア案件情報 | プロエンジニアjavaw7

    JSPのページを表示しているコードはいきなり難しくなったように感じますが、ここで注目するのは「<mytag:helloWorld/>」だけです。JSPのページでブラウザーに表示されている「Hello, World!」という文字は、JSPの「<mytag:helloWorld/>」の部分になります。HTMLやJavaサーブレットと違い文字列をそのまま表示しているわけではありません。 JSPタグと呼ばれるもので「Hello, World!」という文字はサーバー上の別の「Javaプログラム」から受け取った文字列が表示されます。

    ●「Hello, World!」を表示するJavaプログラム

    JavaによるWebアプリケーション開発入門
フリーランスエンジニア案件情報 | プロエンジニアjavaw8

    細かい仕組みはここでは説明しませんが、ブラウザーでデータを表示するにはいろんな方法があるということを理解してもらえれば構いません。
    大雑把な説明になりますが、JSPは「Javaプログラム」の「getJspContext().getOut().write( "Hello, world!" );」から「Hello, world!」という文字列を受け取ってブラウザーに表示しています。クライアントがアクセスできるのはJSPのコードが書かれた文書で、Javaのプログラムにアクセスすることはできません。WEBアプリケーションでは、このようにWEBサーバーの表示部分とそれをコントロールするプログラムを分離することでサイトのセキュリティーを強化しています。

    最後に「XAMPP」のサービスを起動した方はサービスの停止(STOP)ボタンを押してWEBサービスを停止させてから、パソコンをインターネットに接続して下さい。

    ▲ページトップへ戻る

    月額単価60万円〜70万円
    勤務地 東京都 千代田区
    月額単価60万円〜70万円
    勤務地 東京都 千代田区
    月額単価80万円〜90万円
    勤務地 東京都 港区
    月額単価60万円〜70万円
    勤務地 東京都 千代田区

    フリーランスの方でこのようなお悩みありませんか?

    • 定期的に案件を紹介してほしい
    • 完全フルリモートワークや、週1出勤など、働き方を選びたい
    • 単価交渉など営業周りが苦手なので、誰かに任せたい

    プロエンジニアにお任せください!

    プロエンジニアはほとんどEND直案件!高額単価案件ならお任せください。
    完全フルリモートや、週1出勤など、希望に合わせた働き方ができる案件を多数ご用意しています。
    単価や契約交渉などは弊社キャリアコンサルタントに全てお任せください。

    無料登録して、あなたの希望に合った案件をチェック!

    簡単60秒!無料登録はこちらから

    おすすめ記事

  • ピックアップ

    フリーランス

    【Java】フルスタックエンジニア★バーコード決済アプリの開発

    大手企業の受託開発をメインに展開している企業にて、Javaエンジニアを募集いたします。 大手小売業顧...

    月額単価:60万円〜70万円

    フリーランス

    【Java】システムエンジニア★CMS製品を利用した社内ポータルサイト構築

    大手企業の受託開発をメインに展開している企業にて、Java エンジニアを募集いたします。 Azure AD に...

    月額単価:60万円〜70万円

    フリーランス

    【Java】システムエンジニア★認証基盤エンハンス開発

    Salesforce や AWS 等のクラウドサービスを用いた開発を行っている企業にて、Javaエンジニアとしてご参...

    月額単価:80万円〜90万円

    フリーランス

    【Java】フルスタックエンジニア★金融系営業支援システムの改善

    大手企業の受託開発をメインに展開している企業にて、Javaエンジニアを募集いたします。 金融系の勘定...

    月額単価:60万円〜70万円

SCROLL TOP