次の方法で共有

1. Web 開発の概要

  1. クライアント サイド テクノロジーの概要
  2. サーバー サイド テクノロジーの概要

私たちは日常的にインターネットを利用したさまざまなサービスを利用しています。

たとえば、どこかへ出かけたいときは電車の時刻表を検索し、週末の天気が知りたければいつでも調べることができます。また、お腹がすけばピザを注文し、書店へ足を運ぶ時間がなくても本の宅配を手配できるなど、1 日の中だけでもシチュエーションがたくさん挙げられます。

これらのインターネット上で動作するサービスを総称して、Web アプリケーションと呼びます。

Web アプリケーションは、基本的に Web サーバーとクライアント間のデータの送受信によって動作します。クライアントからの要求は、まずサーバー上のプログラムによって処理されます。サーバー側では、このとき、送信されたデータの登録や、指定されたキーワードなどの情報によってデータベースへの問い合わせなどを行うことになります。また、その結果から動的にコンテンツを生成し、クライアントに応答するのもサーバーの役割です。クライアント側では、Internet Explorer、Firefox のようなインターネット ブラウザーを利用してコンテンツを表示／実行します。

ここでは、このような情報のやりとりを行うために必要な Web 開発技術について、その概要を見ていきます。

ページのトップへ

クライアント サイド テクノロジーの概要

クライアント サイド テクノロジーとは、名前の通り、クライアント上で動作するプログラムの総称です。複雑なビジネス ロジックの制御には不向きで、画面の制御や補助的なロジックの記述が主な用途です。

クライアント サイド テクノロジーは、後述するサーバー サイド テクノロジーと相互補完の関係にあります。たとえば、データ登録などの処理はサーバー サイド技術の役割ですが、その結果を視覚的な効果を伴いながらブラウザー上に表示させるのはクライアント サイド テクノロジーの役割です。

クライアント サイド テクノロジーは、主に JavaScript という言語を利用して実装します。

DHTML (Dynamic HTML)

DHTML (Dynamic HTML) とは、サーバー サイドから供給されたコンテンツを JavaScript などのスクリプトを使って動的に操作する技術のことです。DHTML を利用することで、たとえばエクスプローラーのように折りたたみ式のメニューや、データの入力時に誤りを指摘するというような対話的なしくみの実装が可能になります。JavaScript はこれらのしくみの実装に長い間利用されてきました。

AJAX

もっとも、DHTML による派手な視覚効果は、近年下火の傾向にありました。ブラウザー環境によって同じ挙動を保証しにくい、JavaScript を利用したウィルス被害が多い、あるいは、過度なアニメーションがユーザーによって飽きられた、など、原因はさまざまでしょう。

このため、Web アプリケーションはサーバー サイド テクノロジーが主体、クライアント サイド テクノロジーは補助的なしくみ、というサーバー偏重の状態がしばらく続いてきました。しかし、AJAX 技術の登場によって、その状況が大きく変わりつつあります。

AJAX は Asynchronous JavaScript + XML の略で、2005 年、Jesse James Garrett 氏によって名付けられました。AJAX は、JavaScript を利用してサーバー側と非同期通信を行い、受け取った結果を DHTML (DOM) などの技術を使ってページに反映するしくみです。AJAX 技術を利用することで、サーバー側との通信に際して画面全体をリフレッシュする必要がなくなり、スムーズな画面の更新が可能になります。よりWindows アプリケーションに近い使い勝手を提供するための技術、と言い換えてもよいでしょう。

AJAX 技術は登場以来、急速に浸透しました。その結果、JavaScriptの技術的な位置付けが大きく変わり、クライアント サイド テクノロジーがユーザビリティを向上する技術として、再度見直されることになったのです。

RIA

RIA (Rich Internet Application) は、HTML だけでは表現できないリッチなユーザー インターフェイスを実現するための技術の総称です。AJAX もRIA 技術の一種と言えますが、その他にも、マイクロソフトの WPF、Silverlight、アドビ システムの Flash、Adobe Flex、Adobe AIR、サン マイクロシステムズ (開発時) の JavaFX などがあります。各技術の方向付けは 3 社それぞれです。マイクロソフトは既存の Windows アプリケーションに対しての RIA を目指し、アドビ システムはデザイナーによる利用に焦点をあて、サンマイクロシステムズは Java 資産の活用を狙っていると言えるでしょう。

WPF (Windows Presentation Foundation) にはスタンド アロンで実行可能なデスクトップ アプリケーションである WPF アプリケーションと、Web ブラウザー上で動作する WPF ブラウザー アプリケーション (XBAP: XAML Browser Application) があります。

Silverlight は Web ブラウザーのプラグインです。Silverlight は当初、WPF のサブセットとして公開されました。WPF が .NET Framework 環境を前提とするのに対して、Silverlight はプラットフォームを選ばないという特長があります。開発言語としては、いずれも Visual Basic、C# などを利用できます。

Flash も、Silverlight と同じく、Web ブラウザーのプラグインです。Flash Player をインストールすることで、ベクター グラフィックスのアニメーションや音声、音楽、効果音などを組み合わせた Web コンテンツを表現可能です。開発言語には ActionScript が用いられます。

Flex は Flash を基盤としたアプリケーション開発のためのフレームワークです。

Adobe AIR は、Flash をさらににデスクトップ環境で動作するためのフレームワークです。従来、ブラウザー上での動作に限定されてきた Flash の用途をより一層広げるための技術とも言えるでしょう。

ページのトップへ

サーバー サイド テクノロジーの概要

クライアント サイド テクノロジーに対して、サーバー サイド テクノロジーは、サーバー サイドでプログラムを動作させる環境の総称です。サーバーの豊富な資源を活用できることから、複雑なビジネス ロジックの実行や、大量データの処理を得意とします。

初期のサーバー サイド テクノロジー - CGI -

サーバー サイド テクノロジーの初期によく使われたのは、Perl ＋ CGI (Common Gateway Interface) や Java サーブレットのような技術です。これらの技術では、プログラムからコンテンツを直接出力する方式を採用していることから、処理ロジックの記述に強い半面、出力結果がわかりづらく、開発生産性が低いという欠点がありました。

以下は、「Hello World」と出力させる、Perl ＋ CGI で書かれたプログラムです。

#!c:\perl\bin\perl
print "Content-type: text/html\n\n";
print "<html>\n";
print "<head>\n<title>Hello world</title>\n</head>\n";
print "<body>\n<h2>Hello world</h2>\n";
print "</body>";
print "</html>"

中期のサーバー サイド テクノロジー - ASP／JSP／PHP -

CGI の欠点を解決するために登場したのが、ASP (Active Server Pages) やJSP (JavaServer Pages)、PHP (Hypertext Preprocessor) のような技術です。これらの技術では、HTML コードの内部にスクリプトを埋め込む、HTML 埋め込み型のスタイルを採用しています。これによって、レイアウト主体に動的なコードを記述できるようになり、出力結果をイメージしながら開発を進めることが可能になりました。

以下に、ASP、JSP、PHP によるプログラムの例を挙げてみましょう。

(1) ASP

以下は、ASP で書かれたプログラム例です。

<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <% Response.Write("Hello World") %>
  </body>
</html>

ASP はコンテンツの動的な生成を実現するテクノロジーの 1 つです。ASP の特長は以下の通りです。

  • マイクロソフトの Web サーバーである Internet Information Services (IIS) で実行可能
  • HTML の中へプログラムの埋め込みが可能
  • JavaScript や VBScript で記述する

(2) JSP

以下は、JSP で書かれたプログラム例です。

<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <%
      String s= "Hello World";
      out.println(s);
    %>
  </body>
</html>

JSP の最初の仕様は、サン マイクロシステムズによって 1998 年に発表されました。JSP の特長は以下の通りです。

  • さまざまなプラットフォームで実行可能
  • HTML の中へプログラムの埋め込みが可能
  • Java 文法での記述が可能

Java アプリケーションの実行には仮想マシン、コンパイラやデバッガなどといった必要最低限のツールが提供されている J2SE (Java 2 Standard Edition) が必要です。また、この J2SE 上で動作するアプリケーション フレーム ワークとして、J2EE (Java 2 Enterprise Edition) があります。JSP & サーブレットは、この J2EE の中の一部として位置付けられます。

(3) PHP

以下は、PHP で書かれたプログラム例です。

<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <?php
      echo 'Hello World!';
    ?>
  </body>
</html>

PHP は 1995 年に Rasmus Lerdorf 氏によって開発されたオープン ソースのサーバー サイド スクリプト言語です。2004 年 7 月には PHP 5 が公開されました。PHP のプログラムはその Web サーバーにアクセス可能な Web クライアントさえあれば実行可能です。PHP の開発は C 言語をベースに作られており、言語構造は簡単で理解しやすいことが特長です。

また、PHP は最近注目を集めている LL (Lightweight Language) と呼ばれる軽量言語の中のひとつでもあります。LL はインタプリタ言語で、変数の型が厳格ではなく、初学者でも簡単に利用できるのが特長です。他に代表的なものとして、Perl、Ruby、Python などがあります。

サーバー サイド テクノロジーの現在

もっとも、HTML埋め込み型のスタイルも、サーバー サイドで行うべき処理が複雑になるにつれ、限界が指摘されることも多くなってきました。ビジネス ロジックとレイアウトが複雑にからみ合うことで、プログラムのメンテナンスが難しくなってきたからです。

そこで最近では、ロジックとレイアウトを明確に分離するために、さまざまな枠組み (フレームワーク) を利用する機会が多くなっています。

Java 環境であれば Struts や JSF、PHP であれば symphony や cakePHP、Zend Framework などがそれです。ASP の後継である ASP.NET は、そうしたフレームワークの代表格と言えるでしょう。

ASP.NET では、コード ビハインド (分離コード) というしくみによって、デザインとコードとを明確に分離し、開発生産性とアプリケーションの保守性を大きく向上させています。また、サーバー コントロールに基づくイベント駆動型のプログラミング モデルを採用し、Windows アプリケーションを開発するのと同じ要領でアプリケーションを開発できるのも特長のひとつです。

たとえば、ボタンをクリックすると画面に「Hello World」と表示されるようにするには、以下のようなコードを記述します。

<%@ Page Language="C#" AutoEventWireup="true"
  CodeBehind="Default.aspx.cs" Inherits="HelloWorld._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <form id="form1" runat="server">
      <div>Hello World</div>
      <p>
        <asp:Button id="Button1" runat="server"
                    onclick="Button1_Click" Text="Button" />
        <asp:Label id="Label1" runat="server" Text="Label">
        </asp:Label>
      </p>
    </form>
  </body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace HelloWorld
{
  public partial class _Default : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
      Label1.Text = "Hello World";
    }
  }
}

もっとも、いつも ASP.NET が最適の選択であるというわけではありません。たとえば、ASP.NET のようなユーザー インターフェイス (UI) 中心の開発では、処理ロジック単体のテストが難しいという問題もあります。

これらの問題を解決するために、最近では ASP.NET MVC というフレームワークも提供されています。ASP.NET MVC は、MVC (Model-View-Controller) と呼ばれるデザイン パターンに則って設計されたフレームワークです。MVC は、Java、PHP などの環境でも採用されているスタンダードなアーキテクチャのひとつです。ASP.NET MVC では UI と処理ロジックとの関係を薄くすることで、テストの自動化を容易にしています。

このように、なにが最適とは一概には言えませんが、今後はより一層、その場そのときに応じたフレームワークの選定が重要になっていくでしょう。

ページのトップへ

  • Last updated on