連載第18回以降では家計簿アプリを題材に開発サイクルを回しながら、参照系アプリケーション開発で役立つ要素技術や、使い勝手向上のための観点について解説をしています。

実装(3):適切なタイミングで画面を更新:データバインディング

 前回までに実装したアプリの画面は下図のようになっています。

図1●これまでに実装したアプリの画面
[画像のクリックで拡大表示]

 前回実装した「チャート」の表示によって、内訳の情報は見やすくなりましたが、明細登録ビューで明細を追加するに従って、更新ボタンを毎回押さないと内訳の再計算・グラフの再描画がされないことが不便です。ユーザーがより少ない操作で同じ業務を遂行できれば、アプリの使い勝手も良くなると期待できます。

 また、明細が追加されてからページをリロードするまでの間は、DBに格納されている明細のデータと各ビューの表示内容が一致しない状態になっています。このとき、例えば明細を追加した後でリロードをし忘れたまま集計ビューを読み取ると、ユーザーは誤った情報を得ることになってしまいます。

 データの構造に着目すると、月ごとの明細と内訳は対応しています。つまり、明細が決まれば、そこから内訳を再計算できます。このとき、データの変更が自動的に画面に反映されるようにできれば理想的です。この考え方や、これを実現する技術を「データバインディング」と呼びます。

実装

 今回の場合、明細登録ビューに対する操作(明細データの追加)をきっかけに、集計ビュー、明細一覧ビューそれぞれが更新されるようにします。

このとき、明細登録ビューのコントローラー(フォームコントローラー)が直接他のビューのコントローラーのメソッドを呼び出して連携させることもできますが、このような連携の仕方はコンポーネント同士が密接に結びつく「密結合」な状態を引き起こします。

図2●コンポーネントの密結合
[画像のクリックで拡大表示]

コンポーネントの密結合は下記のようなデメリットがあります。

  • 画面の仕様変更があったときに依存関係が複雑になり、保守が大変になる
  • コンポーネントの再利用が困難になる

 第18回の設計の章で説明した通り、ここでも「コンポーネント間の依存性を低く保つ」ことが重要です。設計したコンポーネント間の関係を改めて見てみましょう。

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

 各ビューのコントローラー間の連携、つまり子コントローラー同士の連携は、全て親コントローラーであるページコントローラーがつかさどります。この関係を守るために、以下のように処理を実装することにします。

  • フォームコントローラーは、フォーム送信の際、「データが追加された」という情報を通知するためのイベント(accountDataAddedイベント)を発行する。
  • ページコントローラーはイベントを検知して、他のビューの更新処理を呼び出す。

 「子コントローラーはイベントを発行する」「親コントローラーがイベントを検知して、子コントローラーの処理を呼び出す」という約束を守る限り、コントローラー間の依存性を低く保つことができ、保守性が向上します。

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら