Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

AngularJSのディレクティブ機能でHTMLテンプレートを使いこなそう

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

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

 本連載は、JavaScriptのMVCフレームワークである、AngularJSを使った開発の解説記事です。今回は、ディレクティブ機能を使ってHTMLテンプレートを記述するために、基本的なディレクティブ機能と制御に関わるディレクティブ機能をご紹介します。

目次

はじめに

 AngularJSでは最初から多くのディレクティブ機能が備わっています。このディレクティブ機能を使ってHTMLテンプレートを記述していきますが、慣れないとどのようなディレクティブがどのような動作をするのかがわからなく、リファレンスとコードを行き来することになります。

 また、リファレンスでは用途ごとの整理されているわけではないので、分かりにくい一面もあります。そのため、今回は基本的なディレクティブ機能と制御に関わるディレクティブ機能に限定し紹介します。

対象読者

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

必要な環境

 この記事では、AngularJSを使用し、Chrome(39.0)、IE11、Firefox(35.0)、Safari(8.0.2)の環境にて確認を行っています。

全ての基本となるAngularJS式(Expression)

 多くの場合、テンプレート(HTML)に{{式}}のように記述をしてモデルとのデータバインディングを行います。この「式」の記述方法には、表1(式の記述例)のようにモデルの変数名だけでなく簡単なコードが記述できます。

表1 式の記述例
記述例 結果
{{value1}} 1
{{1+2}} 3
{{value1 + getValue(2)}} 3
{{"sample"}} sample
{{list[0]}} りんご
{{list[1] + "と" + list[2]}} ばななといちご
{{list[getValue(2)]}} いちご
{{items['banana']}} ばなな
{{items.banana}} ばなな

 リスト1はこの実行結果で使用されている変数やメソッドです。

リスト1 実行時の利用されるモデル(js/controllers/expression.jsの抜粋)
$scope.value1 = 1;
$scope.getValue = function(val){
    return val;
};
$scope.list = ["りんご","ばなな","いちご"];
$scope.items = {
    'apple' : 'りんご',
    'banana' : 'ばなな'
};

 記述する式はJavaScriptのコードとして実行しているわけではありませんので、「繰り返し」や「条件」などを用いた複雑な記述はできませんが、かなり柔軟な記述ができます。その分、HTMLコードがわかりにくくなりやすいので、複雑なことはコントローラ側で処理をするように気をつける必要があります。


  • 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