効率的なWebアプリ開発の定石 ～Perl/Ruby/PHPユーザーのためのMVCフレームワーク入門～

第1回

　本稿ではMVCフレームワークの効率的な利用の仕方について考察し、プログラマにとって理想的な構築手法を模索していきます。第1回目となる今回は、現在のWebアプリケーション開発の流れを順を追って見ていきます。また、MVCフレームワークの概要も説明します。

はじめに

　一般的なWebアプリケーション開発では、「Webクリエイター」と「Webプログラマ」という役割が存在します。Webクリエイターは画面表示に関するデザインやマークアップを担当し、Webプログラマは、動的処理機能の構築を担当しています。最終的にそれぞれのリソースの結合が行われ1つのサイトが完成します。

　最近では、“リッチクライアント”というキーワードで語られる豊かなユーザーインターフェースを持ったWebアプリケーションの開発がトレンドとなっており、かつてサーバサイドでの技術を発揮していたプログラマにもクライアントサイドの知識や技術が要求されるようになってきています。こうした状況の中で、Webプログラマが効率的な開発を行い、新しい技術に挑戦するために今までの構築手法や開発工程を見直す必要がでてきました。

　本稿では『システムの構造的に優れた設計』だけではなく、『あらゆるユーザーに配慮された設計へ』シフトしていくための1つの手段として、MVCフレームワークの効率的な利用の仕方について考察し、Webプログラマにとって理想的な構築手法を模索していきます。

※注

　本稿で記載している"Webクリエイター"とは、Webデザイナー・HTML/CSS/JavaScriptなどのクライアントサイド技術のコーダー、Flasherを指し示した表現として使用していくこととします。

現在のWebアプリケーション開発とは？　その1

　はじめに、現在のWebアプリケーション開発の流れをさまざまな角度から眺めることで、現状の開発工程における問題点や課題を探っていきます。

Webプログラマの仕事について

　Webプログラマが担当するプロジェクトは大きく分けて2つのタイプに分類されます。1つは業務系・基幹系といわれる特定のユーザーを対象としたもの、もう1つはコンシューマー向け・一般ユーザー向けのWebアプリケーション開発です。

　この2つを、開発工程・アプリケーションの特徴の観点から比較します。

業務系アプリ開発とコンシューマー向けアプリ開発の違い

　業務系・基幹系開発はシステム化の全貌が工程の初期段階で明確に定義されるため、長期的な計画に基づいて開発が進行する傾向があります。コンシューマー向けサービス開発では、トレンドやユーザーの動向を分析しサイトの内容が更新されるため、短期間での開発を繰り返し行っていく必要があります。

一般的なWebサービスの開発工程について

　一般的なWebサービスの構築を行うには、「Webクリエイター」と「Webプログラマ」という役割が必要です。これからWebクリエイターがどのような工程で作業を行っているのかを示し、その工程に対してWebプログラマはどのように関わっているのかをみていきます。

1）Webクリエイターの作業

Webデザイナー

　Webデザイナーは、「ワイヤーフレーム」と呼ばれる画面仕様書を基に、サイトの色設計・デザインコンセプトの定義を行い、HTMLの文書構造に基づいた一枚画のデザインを作成しています。各ページの構成要素にはヘッダー、フッター、メニュー、入力欄や、企業ロゴイメージ、文章が配置されています。Webデザイナーは、これらの要素をすべて含んだ状態の画面を“1つの画像として”作成しているのです。

図1　Webデザイナーが作成する画像のイメージ

　例えば、「入力⇒確認⇒完了」のような画面遷移のある応募フォームのページを想像してください。入力画面で入力チェックを行う場合、「～は必須項目です」というようなエラーメッセージを表示させることがあります。こういった場合にはエラーメッセージが表示されている状態の画像を作成します。このように機能によって画面の構成が変わってくる場合には、表示が変更されている状態を含めた画面全体の画像を作成します。

　つまりWebデザイナーの担当領域では、画面に表示させる要素についてすべてのページレイアウトのパターンが作成されるのです。

コーダー

　コーダーはWebデザイナーが作成した“一枚画”のデザインをWebページとして実装するために、各要素を切り出しHTML/CSS/JavaScriptなどのクライアントサイドの技術を使用してコーディングを行っていきます。

　一般的にマークアップ言語として使用されるのはHTMLですが、最近ではXML文書を埋め込むことのできるXHTMLも使用されることが多いようです。これらの記述方法についてはW3Cにより策定されたルールに基づいて厳密な構文チェックを行いHTMLファイルを完成させます。HTMLファイルには、視覚的な表現だけではなくアクセシビリティやユーザービリティ、SEOを考慮した、メタ情報が記述されていることはご存知のとおりです。

2）Webプログラマの作業

　Webプログラマの作業の流れとしては、はじめに設計書や仕様書をもとにプログラムを作成していきます。この段階では、構築しているプログラムに対して表示される画面は動的処理部分のみでも問題ないため、テスト用のHTMLファイルをWebプログラマが作成し利用することが多々あります。その後、先ほどのWebクリエイターによる工程で作成されたHTMLファイルに対してサーバサイドのプログラム部分を組み込みます。

　このようにWebクリエイターと共にWebプログラマが開発を行うケースは、コンシューマー向けのアプリケーション開発案件が大半を占めています。一方で業務系アプリケーションの開発の場合、正式なWebページに使用するHTMLファイルの作成もWebプログラマの作業として割り振られることが多く、要件定義などの資料を基にコーディングが行われます。