PR

 それでは、実際の開発に進みましょう。なお、JavaScriptの開発フレームワークとしては、筆者らが開発しているhifiveを使用していきます。また、以降では、特に断りのない限り、WebブラウザーとしてChromeを使用した場合について説明します。

設計

 アプリケーションの規模が大きくなるほど、設計は重要です。

 設計をするときの基本方針は「クラスやソースコードをシンプルなコンポーネント(要素)に分割すること」「それぞれのコンポーネントの役割を明確にすること」、そして「コンポーネント間の依存関係を減らすこと(疎結合)」です。この方針を守ることで、下記に挙げるような様々なメリットが得られます。

  • アプリ全体のコードの複雑度が下がり、読みやすくなります。
  • コンポーネント単位でテストが完結して実行できるため、品質が向上します。
  • 複数人での開発や、開発員のスキルに応じた割当てがしやすくなります。
  • アプリに障害が起こったときの原因究明、つまり問題の切り分けがしやすくなります。
  • コンポーネント単位で差し替えできるので、アプリの改修や改良がしやすくなります。
  • 共通する機能を他のコンポーネントへの依存が低い形でうまく切り出せれば、 異なるアプリを開発する際に同じコンポーネントを使い回すことができ、生産性が向上します。

 コンポーネントの分割はこのようによいことづくめですが、具体的にどうやって分割すればよいのでしょうか。 ここでは2つの観点に沿って分割します。

1.画面機能ごとの分割
2.処理と表現の分割

 一つめの観点は、画面機能ごとの分割です。 画面上で独立したパーツごとにコンポーネントを分割し、そのパーツの制御を担当させます。 もう一度、スクリーンショットを見てみましょう。 アプリが主に3つの画面要素から構成されていることが分かります。

図2●経理アプリケーション(コンポーネント分割後))
図2●経理アプリケーション(コンポーネント分割後))
[画像のクリックで拡大表示]
  • 集計(スクリーンショット上部):1カ月ごとの収支と、科目の小計を集計して表示します。
  • 明細登録フォーム(スクリーンショット中部):明細を登録するフォームです。
  • 明細一覧(スクリーンショット下部):日付、科目、金額、用途を一覧表示します。

 このように、あるまとまった機能を構成する画面要素を「ビュー」と呼ぶことにします。 上記に挙げた3つのビューはそれぞれまとまった役割を持っているので、これらをコンポーネントとして分割できそうです。

 さらに、コンポーネントの分割は階層的に行えます。 例えば、図2の集計ビューは、表と円グラフの2つのコンポーネントから構成される関係にあります。 どこまで細かく分割するかは、現在の画面の複雑さや、切り出した後のコンポーネントが汎用的に使えるかどうかなどを考慮しながら決定していきます。

 hifiveでは、分割したコンポーネント単位にコントローラーを割当て、操作や表示処理を実現します。 そしてコンポーネント間の連携は、全てのコンポーネントを束ねるページコントローラーを定義し、ここで担当させます。 コントローラーの分割の仕方や、コントローラー同士の連携方法についての詳細は 開発者サイトのチュートリアル「コントローラの連携」を参照ください。