こんにちは。2015年度新卒のWEBガーデン仙台所属エンジニアの赤池です。
今回、技術的なノウハウのコラムを書かせていただくことになりました。Webページを制作する際に大量のデータを手作業でコピー＆ペーストしていることをもっと楽にもっと簡単に手作業なく実現できる方法を紹介させていただきます。
Webページへのデータの反映
統計のデータを表にしたい時に多くの場面では、HTMLのtableタグを使って、ひとつひとつのデータをコピー＆ペーストをして挿入しています。
手作業でコピー＆ペーストしていると必ず挿入する箇所や順序を間違えてしまうことがあります。
日本政府観光局（JNTO）の「2015年8月訪日外客数（JNTO推計値）」を使用して動的に表を制作する方法を紹介します。
*左(スマホは上)：データをコピー＆ペーストで挿入したHTML
*右(スマホは下)：HTMLをWebブラウザで表示した状態
そこで私が紹介するのは、AngularJSです。Google社が開発しているJavaScriptのアプリケーションフレームワークです。AngularJSはMVWフレームワークと呼ばれるデザインパターンを採用しており、Webページとデータを表示・操作する仕組みを実現してくれます。
同じような機能を提供してくれるJavaScriptアプリケーションフレームワークは、「Knockout.js」や「Backbone.js」などありますがどれも依存関係や値の反映などAngularJSより劣ります。なおかつ、AngularJSであれば、JavaScriptの記述を簡略化出来ます。
今回は、AngularJSの仕組みではなく、その使い方についてご説明します。
AngularJSを利用する準備
以下の環境で、制作します。
- JavaScriptフレームワーク: AngularJS
- テキストエディタ: Sublime Text 3
- サーバー環境: nginx
- OS: Mac OS X
AngularJSを利用するには、ダウンロードまたはCDNで利用できます。今回はダウンロードして利用します。
AngularJSには、現行のバージョン1と開発途上のバージョン2があります。
バージョン1をAngularJSのWebページよりダウンロードします。
参考：AngularJS — Superheroic JavaScript MVW Framework
参考：コンテンツデリバリネットワーク – Wikipedia
*左(スマホは上)：AngularJSのトップページ
*右(スマホは下)：ダウンロードのモーダル
「Download AngularJS 1」をクリックし、表示されたモーダル内の「Download」ボタンよりダウンロードできます。
AngularJSを利用して、Webページを作る方法
AngularJSを利用してデータをWebページに表示するには、表示するページと表示したいデータを連携させる設定が必要です。
まずは、表示したいデータを作ります。
JSONと呼ばれるデータ形式で表示したいデータを作ります。
「2015年8月訪日外客数（JNTO推計値）」の「月」を「month」、「平成27年」を「heisei_27」、「平成26年」を「heisei_26」、「伸率」を「change」としてJSONを制作します。
ファイル名：inbounds.json
参考：JavaScript Object Notation – Wikipedia
データを表示するための雛形としてHTMLを作ります。
ファイル名：index.html
データ（JSON）と表示する雛形（HTML）を連携させるためのJavaScriptを作ります。
ファイル名：controllers.js
注：JavaScriptの記述は、AngularJSの記法に則った記述です。
解説1 JavaScriptの読み込み
HTML:
こちらで、WebページにAngularJSとデータとHTMLを連携させるためのcontroller.jsを読み込んでいます。
解説2 AngularJSと連携
HTML:
JavaScript:
それぞれに記述したこの行の'inboundApp'でAngularJSがHTMLと連携されます。
記述したこの文字をコントローラ名といいます。
解説3 表示する箇所を指定
HTML:
JavaScript:
HTMLの"inbound in inbounds"とJavaScriptの$scope.inboundsで値を表示する場所が連携されます。
この表示する場所を設定することをバインディングといいます。
また、HTMLの{{inbound.month}}をエクスプレッションと呼びJavaScriptの$scope.inboundsをプロパティ名と呼びます。
解説4 表示する箇所を指定
JavaScript:
JavaScriptの'inbounds.json'でJSONのファイルを指定してします。
ここでは、Ajaxという手法を用いて、ファイルの読み込みをおこないます。読み込まれたJSONはバインディングした箇所へ表示されます。
AngularJSを利用して出力されるWebページ
このように大量のデータを一つ一つコピー＆ペーストせずとも表示してくれます。
また、データの順序を変更することが可能です。
次のようにJSONでchangeと名前を付けたデータを昇順に変更したい場合は、HTMLの下記の行を
次のように変更を加えると
たった数文字追加することで、下記のように伸率が昇順に変更できます。
AngularJSでは、データの表示順序を昇順・降順にすることも楽におこなえます。
まとめ
このようにAngularJS を使うことで、多くの手作業を省くことができます。
たとえば、表示したいデータを検索して表示することやユーザーが入力した情報の整合性チェックなども簡単に実装することが出来ます。
今回は、データを簡単に表示できることをご紹介しました。しかし、AngularJSには他にもさまざまな機能を備えています。人が手作業をしていた冗長的な作業をAngularJSが代わりに担ってくれます。利用するのも簡単なので、試してみてください。
■コラム執筆者
赤池泰平(あかいけたいへい)
2015年度 株式会社メンバーズ入社
部署 第3ビジネスユニット-アカウントサービス第4ユニット
WEB構築・アプリ開発の経験があり、技術を更に高めるため日々精進しています。
ABテスト実施中の担当者向け資料
