そんな今日この頃でして、、、

コード書いたり映画みたり。努力は苦手だから「楽しいこと」を探していきたい。

STAP細胞を作って学ぶAngularJSのデータバインディング

Javascript コーディング

↑に触発されて作ってみた。


f:id:blue1st:20140604010450p:plain

STAP NO.1

中身は単純明快、ひたすら文字列を生成するガチャ。

そんなわけで、ソース見つつ読んでもらえればと。

準備

AngularJS読み込む

当たり前だけど、何は無くともとりあえず読み込んでおく。

<head>
  <meta charset="UTF-8">
  <title>STAP NO.1</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
  <script>

要素をAngularJSと関連付ける

タグにng-appと記述することで、AngularJSのアプリであることを示す。 また、ng-controllerで、後述するアプリケーションと表示とを関連付ける。

<body>
  <div ng-app ng-controller="Ctrl">

アプリケーションの記述

とりあえず作る

AngularJSを読み込んだ後にfunctionを作る。 とりあえず今は何も考えずに$scopeを渡しておこう。

  <script>
    function Ctrl($scope){
      …
    }
  </script>

データと表示を紐付ける

本題。

$scopeに入れる

扱いたいデータは$scope内に格納。

$scope.cells = ['STEP', 'STAP', 'STOP'];
テンプレート側

HTML側でデータを表示する部分は{{[変数名]}}の形で記述しよう。

 {{cells.length}}回 実験しました！

↑なんかは$scope.cells.lengthに対応していて、配列が増えると勝手に表示も更新される。

繰り返し要素

同じ形式のタグが繰り返される場合は、ng-repeatが利用できる。

<button ng-repeat="loop in [1, 10, 100, 1000, 10000]">{{loop}}回 実験する</button>

↑のコードだと、1・10・100・1000・10000のそれぞれのボタンが作成できる。

今回は単純にbuttonタグだけを繰り返しているが、内部にもっと複雑な要素が入ったdivタグなんかも繰り返すことができる。

それぞれの回数はloopという変数に格納されてタグ内でアクセスできる。


ちなみに$scopeの中の配列や連想配列についても同様に使うことができる。

 <span ng-repeat="cell in cells track by $index">{{cell}}細胞</span>

しかし、配列の場合は全くおなじ要素が含まれるとngRepeat:dupesというエラーがでてしまうため、ループを内容ではなくインデックスで管理するようにtrack by $indexをつけてやる。

要素によってclassを変える

例えば今回cellがSTAPだった場合だけbingoというクラスにしたいので、ng-class="{[クラス名]:'条件'}"を使って下記の様に記述する。

 <span ng-class="{bingo:cell == 'STAP'}" ng-repeat="cell in cells track by $index">{{cell}}細胞</span>
クリックによるアクションの記述

ng-click要素に記述することで、function内に指定した動作をさせることができる。

 <button ng-repeat="loop in [1, 10, 100, 1000, 10000]" ng-click="generate(loop)">{{loop}}回 実験する</button>
      $scope.generate = function(loop){
        …諸々の動作…
      }

まとめ

この程度だったら別にAngularJS使うまでもないというか、むしろ毎度ng-repeatでcells展開するせいでcellsが増えると動作が厳しくなってしまってる面はあるのだけど、とにかくデータバインディングによって凄く簡潔にアプリケーションを作成できることは分かったと思う。

jQueryが「HTMLに機能を付加してく」イメージなのに対して、AngularJS使ってると「動作に合わせてHTMLを組んでく」ような印象になるのが興味深い。

AngularJSアプリケーション開発ガイド

AngularJSアプリケーション開発ガイド