前回までは、日報アプリケーションを題材に解説をしました。 特に「入力系」のアプリケーション開発の際に役立つ フォーム要素について解説するとともに、 実装に役立つツールを紹介してきました。

 今回からはさらに一歩進んで、 アプリケーションのクラス設計についても触れていきます。 複雑な画面も、複数の要素に適切に分割されていれば、 アプリを改修・メンテナンスしやすく保つことができ、 さらに再利用性も上がります。

 また、今回は入力したデータを閲覧する「参照系」のアプリを 題材に、開発を進めていきます。 参照系のアプリに求められる、 データ可視化に役立つ「チャート」「グリッド」について紹介するとともに、 日々大量のデータを参照、処理する企業Webシステムにおいて どの様に表示、操作をスムーズに行っていくかのノウハウを解説します。

 今回は、題材となるアプリケーションの紹介と開発の進め方を説明した後に、 「開発環境の準備」「設計」「基本的な機能の実装」までを進めていきます。

家計簿アプリケーションを作る

 データの可視化をおこなう「チャート」や「グリッド」などの部品は、計画業務や経理など、参照系のシステムでよく使われます。今回はそのようなアプリをイメージしつつ、HTML5の要素を学ぶためのエッセンスを抽出して機能を簡略化した「家計簿アプリ」を作っていきます。図1のような画面を持つアプリです。

図1●経理アプリケーション
図1●経理アプリケーション
[画像のクリックで拡大表示]

 このアプリでは日々の収支の記録を入力し、それらを一覧表示できます。 さらに月ごとの収支の合計値を、費目ごとに確認できます。

開発の進め方

 業務システム開発の一般的なスタイルであるウォーターフォールモデルでは綿密に設計を行い1回のサイクルの中でアプリを完成させますが、今回は段階的に解説を進めるために、実装のサイクルを複数まわしながらアプリを徐々に上図のような完成形に近づけていきます。それぞれの実装サイクルでは、異なる観点で実装や改修を行います。

  • 開発環境の準備
  • 設計
  • 実装(1):基本的な機能の実現
  • 実装(2):チャート表示で一覧性向上
  • 実装(3):適切なタイミングで画面を更新:データバインディング
  • 実装(4):パフォーマンス向上のための工夫

開発環境の準備

 今回の内容は、あらかじめ用意されたひな形を基に実装を加えながら、動作や実装方法を確認できるようにしています。Zip形式の圧縮ファイルをこちらのサイトからダウンロードし、 任意の場所で展開してください。 ダウンロードしたフォルダー内のitpro/account/skeletonにひな型となるソースコードが置いてあります。

 また、今回のアプリはNode.jsを使って書かれています。以下の記事を参考に、Node.jsを実行するための準備をしてください。展開したフォルダーのitproに移動し、「npm start」とコマンドを実行するとサーバーが起動します。

 参考記事:手軽にHTML5/JavaScript開発を始めるための環境構築法

 サーバーが起動できたらhttp://localhost:8080/itpro/accountなどのURLに移動し、アプリ画面を表示できれば準備完了です。