SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

  • 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として標準化されていくので、無理に置き換える必要はないであろうというのが理由のようです。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
入力コンポーネントを作ってみる(1)

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
AngularJSではじめるJavaScriptフレームワーク開発スタイル連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8927 2015/09/18 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング