こんにちは、制作担当の奥田です。
今期オススメのアニメは「櫻子さんの足下には死体が埋まっている」です。
（もちろんごちうさ２期は欠かさず観ています。）
さて、最近ではJavascript界隈でReactJSが人気ですが、見積もりフォームなどワンソースでフロントエンドをさくっと構築したい際にはAngularJSがとても便利です。
Table of contents
AngularJSとは
AngularJS
AngularJS（アンギュラージェイエス）は、Googleとコミュニティによって開発されているオープンソースのJavaScriptフレームワークである。
ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としている。
MIT Licenseでライセンスされたフリーソフトウェアである。https://ja.wikipedia.org/wiki/AngularJS
とあります。
要するにJavaScriptのフレームワークなのですが、AngularJSは双方向データバインディングを採用しており、より、インタラクティブなフロントエンド実装を可能にしています。
ハイブリッドアプリ開発のフレームワーク「OnsenUI」にもAngularJSが使われています。
はじめに
まずは完成イメージをお見せします。
今回は簡単にBootstrapを使用してコーディングしています。
架空商品の色やオプションの選択で即座に結果が出るような見積もりフォームをイメージしています。
ロジック部分の実装の前にビューの部分をコーディングしてしまいます。
ではまずはじめにAngularJSを読み込みます。
以下の公式サイトからダウンロードしても構いませんが今回はデモですのでCDNを使用します。
公式サイト
head内（もしくはbody閉じタグ直前）に以下のソースを貼り付けます。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
次にhtmlタグにng-appを追加します。
これはおまじないみたいなものと考えてください。
<html ng-app="App">
次にng-appで指定した名前をangular.moduleで定義します。
(カッコ内の第２引数はその他のモジュールを指定する配列ですが今回は指定せず空の配列[]を指定します。)
<script>
var app = angular.module("App", []);
</script>
次に、コントローラーを指定します。この中のデータをAngularJSが支配します。
今回は「itemController」という名前にしています。
#contentsに「ng-controller」というアトリビュートを追加し、itemControllerを指定する。
<div id="contents" ng-controller="itemController">
app.controller()に「itemController」を指定する。
この時、第二引数の配列内に指定した「$scope」がAngularJSのデータバインディングの変数になります。
var app = angular.module("App", []);
app.controller('itemController', ['$scope',function($scope){
}]);
JSONデータの用意
では次にデータを用意します。
実際はサーバーサイドでデーターベースなどから取得した値をJSON形式で出力し、Ajaxなどで取得するという処理が必要ですが、フロントエンドでの仮データを作成しておけば実際にサーバーサイドでどのような値が必要なのかが整理でき、バックエンドの実装もスムーズです。
簡単なデータですが、オプション選択ごとにpriceにchargeを足すような感じのイメージです。
colors : [
{
slag : 'white',
name : 'ホワイト',
charge : 0
},
...
fonts : [
...
{
slag : 'serif',
name : 'セリフ',
charge : 200
},
...
データの表示
手始めに$scopeにitemnameという値を代入し、表示してみます。
$scope.itemname = 'AngularJSから変更しました';
html側で表示する際は$scopeのkey名を{{}}で囲むと表示されます。
<h3 class="mb30 item-title">
「{{itemname}}」
</h3>
ではJSONデータを$scopeに代入し、ビューに渡してみます。
注意すべき点はimgタグのsrc属性に記述すると404エラーを吐いてしまいます。
これは$scopeに代入するまでの間に読み込みが開始されてしまうためです。
そのためng-src属性に指定します。
こうすることで$scopeが定義されてから、src属性を設定して画像を読み込んでくれます。
<img ng-src="{{selected.img}}">
var defaultColorKey = 0, defaultFontKey = 0;
$scope.keys = {color :defaultColorKey,font :defaultFontKey};
$scope.item = item;
/**
* アイテムを変更
*/
var selectItem = function(colorKey,fontKey){
$scope.keys = {color :colorKey,font :fontKey};
//画像のURLを整形
var url = 'img/' + item.colors[colorKey].slag + '/' + item.fonts[fontKey].slag + '.png';
//選択中のアイテムを代入
$scope.selected = { color: item.colors[colorKey], font : item.fonts[fontKey],img : url};
//金額の計算
$scope.result = result();
}
/**
* 金額合計を出す
*/
var result = function(){
return separate($scope.item . price + $scope.selected.color.charge + $scope.selected.font.charge);
}
/**
* 数値をカンマ区切りにして返す。
*/
var separate = function(num){
return String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
}
//初期アイテムを代入
selectItem( defaultColorKey , defaultFontKey );
このようにたった数行でビューに渡したい値を整形し表示することが出来ました。
今回はここまでにして、次回はJSONデータをリピートして表示したり、
clickイベントの対応など実際の動きの部分を構築していきます。