AngularJSとBootstrapを組み合わせてUIコンポーネントを作ってみよう

AngularJSで初めるJavaScriptフレームワーク開発スタイル 第12回

　今回は、前回紹介したディレクティブ機能と、UIフレームワークであるBootstrapを使ってより実践的なコンポーネントを作成します。部品の共有化など、他の人に使ってもらうための部品作りで必要となるAngularJSのディレクティブのノウハウなどを紹介します。

対象読者

• jQueryなどを使っている開発者
• JavaScriptを使った複数人でのプロジェクトに参加している方
• JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方

必要な環境

　この記事では、AngularJS（バージョン1.4）を使用し、Chrome（43.0）、IE11、Firefox（39.0）、Safari（8.0.7）の環境にて確認を行っています。

　また、Bootstrap（バージョン3.3.5）とjQuery（2.1.4）を使用しています。

値の参照のみを行うUIの作成

　まず、最初は前回までの復習をかねて、値の参照のみを行う非常に簡単な部品を作成してみます。最初は図1のようにProgres barを部品化します。

図1　プログレスバーの実行例

　まずはBootstrapのマニュアルにあるProgress barのサンプルコードを元にテンプレートをリスト1のように作成します。

リスト1　progressBarのHTMLテンプレート（ js/directives/ProgressBar.html）

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="{{value}}"
         aria-valuemin="0" aria-valuemax="100" ng-style="{width : value + '%'}">
        <span ng-show="value > 0">{{value}}%</span>
    </div>
</div>

　このテンプレートの0から100までのvalueの値に応じてバーの長さを変えます。実際にこのディレクティブを使う際には、リスト2のように利用します。

　このように、ディレクティブは複雑なタグ要素、または、属性やクラス名などを必要とするHTMLを簡単に管理することができます。

リスト2　progressBarディレクティブの利用方法

<progressbar value="'20'"></progressbar>

　実際に作成したディレクティブ本体のコードがリスト3になります。

リスト3　progressBarディレクティブの実装（js/directives/ProgressBar.js）

(function(){
    angular.module('ui.progressbar',[])
        .directive('progressbar',[ProgressBar]);
    function ProgressBar(){
        return {
            restrict : 'E',
            templateUrl : "js/directives/ProgressBar.html",
            scope : {
                value : '='　 //（1）valueの値はAngularJS式として取得する
            },
            replace : true   //（2）HTMLを置き換える
        }
    }
}());

　前回説明したrestirct、templateUrl、scopeの詳細は割愛しますが、restrictでは要素（E）でのみ指定が可能で、templateUrlは表示するテンプレートのURLです。

　また、（1）のようにscopeでは指定したvalue属性の値をAngular式として値のバインディングができるようにします。これで、コントローラなど上位のスコープの値を参照できますので、リスト1のようにコントローラ側で値を変えればプログレスバーを動かす事ができます。

　続いて（2）replace属性は指定したテンプレートで要素を置き換えるか否かの指定です。replaceがfalseの場合、progressbar要素の内側にテンプレートを挿入しますが、trueの場合にはすべて書き換えるのでDOM上にはprogressbar要素は残りません。ただし、現在、replace指定はDEPRECATEDになっています。理由としては指定した属性やクラス指定などをテンプレート側の親要素とマージしますが、その実装と制約などが複雑になることと、今後、独自タグがWebComponentとして標準化されていくので、無理に置き換える必要はないであろうというのが理由のようです。