PR

 二つめの観点は、処理と表現の分割です。

 「アプリケーションのデータ構造や処理」と「画面上の情報の表現・入出力」を分離します。 前者がうまく切り離されていれば、様々なコンポーネントで再利用可能になります。 また、アプリの改修はデータ構造や処理よりも画面のほうが頻繁に起こります。 改修の頻度によってコンポーネントが分離できていると、改修箇所が特定しやすく保守性も向上します。

 今回のアプリは、サーバーから明細データを取得したり、サーバーへ明細データを追加する処理があります。 サーバーとの通信処理をコンポーネントとして切り出しておきましょう。 こうすることで、処理を使い回したり、処理に対する単体テストが書きやすくなります。 hifiveでは、このようなサーバーとの通信やローカルDBの操作、複雑な計算など、 (画面操作を含まない)通信・計算処理を記述するコンポーネントを「ロジック」と呼びます。

 なお、今回は簡単のためにロジックはあらかじめ定義したものを使います(Skeletonに含まれています)。

 各コンポーネント間の関係は下図の通りです。

図3●コンポーネント間の関係
図3●コンポーネント間の関係
[画像のクリックで拡大表示]

 図中にコンポーネント同士を結ぶ矢印がありますが、 これはコンポーネントの依存関係を表しています。 例えばページコントローラーは各ビューのコントローラーやロジックのメソッドを呼び出したり、 プロパティにアクセスするため「依存」しています。 一方で各ビューのコントローラー同士に依存関係はありません。 また、各ビューのコントローラーからロジックへの依存もありません。

 「コンポーネントの役割が明確」かつ「コンポーネント間の依存が少ない」ので、 これは分割の方針に沿った設計になっていることが分かります。

 分割したコンポーネントをhtmlソースコードに落とし込むと下記のようになります。 集計ビュー・明細登録ビュー・明細一覧ビューを、 html上でもそれぞれ独立したdiv領域として確保します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <title>家計簿アプリ</title>

    <!-- cssの読み込み -->
    <link rel="stylesheet" href="../../res/lib/hifive/h5.css">
    <link rel="stylesheet" href="../complete/css/main.css">
  </head>
  <body>
    <div class="head-area">
      <div class="title">家計簿アプリ</div>
    </div>
    <div class="content-area">
      <!-- 集計ビュー -->
      <div class="summary"></div>

      <div class="detail">
          <!-- 明細登録ビュー -->
          <div class="account-form"></div>
          <!-- 明細一覧ビュー -->
          <div class="account-list"></div>
        </div>
      </div>
    </div>
  </body>
</html>

(htmlソースコード - itpro/account/skeleton/index.html)