Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/09/18 14:00

ダウンロード AngularJS_Part12.zip (517.4 KB)

 今回は、前回紹介したディレクティブ機能と、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 プログレスバーの実行例
図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として標準化されていくので、無理に置き換える必要はないであろうというのが理由のようです。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしど...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:AngularJSではじめるJavaScriptフレームワーク開発スタイル

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5