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