初心者から中級者まで、今注目のAngularJS徹底解説 – HTML5Experts.jp https://html5experts.jp 日本に、もっとエキスパートを。 Sat, 07 Jul 2018 03:14:05 +0000 ja hourly 1 https://wordpress.org/?v=4.7.19 AngularJSのControllerとScopeの基礎を学ぼう /canidoweb/16732/ Mon, 07 Sep 2015 01:00:30 +0000 /?p=16732 連載： 初心者から中級者まで、今注目のAngularJS徹底解説 (3)

連載企画「AngularJS徹底解説」の第3回目は、ControllerとScopeの基礎について解説していきます。

AngularJS は MVW(hatever)!!!

AngularJSはMVC(Model-View-Controller)フレームワークと呼ばれることが多いですが、一部の開発者からは MVVM(Model-View-ViewModel)である、という声もあがっていて、ある時期に「一体どっちなんだ！？」という状態になりました。
そこで、そういった経緯に対してAngularJSチームが、そこについての議論は本筋ではないとして、AngularJSはMVW(Model-View-Whatever)である、と明言しています。

今回解説するControllerは、このWhateverの役割にあたる機能です。実際に「Whatever = 何でもいい」とはいっても、”Controller”という名のとおり、MVCパターンとして見れば M-V-“Controller”にあたる機能ですので、その概念から外れることはありません。

Controller の基本

コントローラは以下のように記述します。他にもいくつか書き方があるのですが、今回はこの書き方で解説していきます。

まず、myAppアプリにmyCtrlというコントローラを作成してみます。

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope){
    // ここにコードを書いていく
  }]);

以下の意味になります。 

...
  .controller.('コントローラ名', ['依存サービス', function(依存サービス){
    // ここにコードを書いていく
  }]);

$scopeについては、 ビューにデータなどを渡したり、ビューから発生したイベントを監視するなど、ビューとのやり取りを行うことができる特別なオブジェクトです。（AngularJSでは直接DOM操作をすることは推奨されていないため、この$scopeを通じて行います。そのためほとんどのケースでコントローラを記述する際に定義することになります）

また複数依存するサービスが複数ある場合は、

...
  .controller.('コントローラ名', ['依存サービス1', '依存サービス2' ... , function(依存サービス1, 依存サービス2 ...){
    // ここにコードを書いていく
  }]);

このように、配列に追加していく形で定義することができます。

先ほどの$scopeを利用して、ビューにモデルの値を引き渡します。
テンプレート(HTML)箇所については、前回までに解説した通りです。

<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>Controller</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<div>筆者：{{myName}}</div>

<div>
  エキスパートたち
  <ul>
    <li ng-repeat="expert in expertList">{{expert}}</li>
  </ul>
</div>

<div>
  {{author.name}} ( twitter - {{author.twitter}} )
</div>

<script>
angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope){
    // Model の初期化 ①
    var myName = 'can.i.do.web';
    var expertList = ['Shumpei', 'komasshu', 'yoshikawa_t'];
    var author = { name: 'きゃない', twitter: 'can_i_do_web' };
    // View にバインディング ②
    $scope.myName = myName;
    $scope.expertList = expertList;
    $scope.author = author;
  }]);
</script>
</body>
</html>

$socpeを利用することで、ビューとやりとりすることができます。①で様々な形式のモデルの初期化、②で$scopeにプロパティを追加していくかたちで、 ビューに値を渡すことができます。
上記のほかにも複雑なオブジェクトや、関数などもバインドすることが可能です。

sample1

Controller の適用範囲

コントローラに限らず、ではあるのですが、AngularJSのディレクティブには適用範囲があります。
それは、そのディレクティブを定義したDOMの範囲とイコールです。

...
<body>
  <div ng-controller="myCtrl">
    myCtrl内: {{name}} <!-- ① -->
  </div>
  myCtrl外: {{name}} <!-- ② -->
<script>
angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope){
    $scope.name = 'can.i.do.web';
  }]);
</script>
</body>

①のようにng-controller="myCtrl"と定義したdivタグの内部のみ、初期化されたnameを表示（取り扱う）することができます。 ②はng-controller="myCtrl"が定義されているdivタグの外側にあるため、myCtrlで定義したnameにアクセスすることはできません。

このように、AngularJSではそれぞれの コントローラなどのディレクティブがお互いに干渉しないよう、適用される範囲のみでそれぞれの機能を果たします。そうすることで個々の機能が疎結合になり、保守性が高くなります。

Controller の分割

最初に挙げたサンプルのように画面全体に対して1つのControllerで運用していった場合、かなり多機能なコントローラになってしまいます。

例えば以下のケースだとどうなっているか見ていきましょう。

...
<body ng-controller="myCtrl">
  <header>
    ... <!-- header -->
  </header>
  <main>
    ... <!-- main -->
  </main>
  <footer>
    ... <!-- footer -->
  </footer>
<script>
angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope){
    // いろいろな機能のコード
  }]);
</script>

上記はbody全体に対してのみのコントローラとなっています。ヘッダやフッタに関しては、一般的なアプリケーションでは共通的な機能と言えるでしょう。

それに対して上記の場合は、画面ごとにヘッダやフッタのデータやイベント等の振る舞いを毎回記述しなくてはなりません。先述したとおり、保守性を高めるために、 コントローラを分割すると良いでしょう。

...
<body ng-controller="myCtrl">
  <header ng-controller="headerCtrl">
    ... <!-- header -->
  </header>
  <main ng-controller="mainCtrl">
    ... <!-- main -->
  </main>
  <footer ng-controller="footerCtrl">
    ... <!-- footer -->
  </footer>
<script>
angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope){
    // 画面全体に渡るコード
  }])
  .controller('headerCtrl', ['$scope', function($scope){
    // headerで必要な機能のコード
  }])
  .controller('mainCtrl', ['$scope', function($scope){
    // main で必要な機能のコード
  }])
  .controller('footerCtrl', ['$scope', function($scope){
    // footer で必要な機能のコード
  }]);
</script>

上記のようにコントローラを分割することで、機能の塊を小さくできます。headerCtrlやfooterCtrlを切り分けることによって、アプリケーション全体で共通的なヘッダ、フッタの機能として利用することもできます。

また、メインコンテンツ内も機能的に煩雑になっているようであれば、さらにコントローラを分割して運用していくとよいでしょう。

Scope

スコープはビューとコントローラの間に立って、モデルをビューにバインディングしたり、ビューから発生したイベントを受け取って何かしら振る舞う、といった役割を持ちます。$scopeはそれを実際に行なうためのオブジェクトです。

スコープはDOMツリーと同様ツリー構造になっていて、ng-appを基点にDOMツリーに沿うように構成されます。そしてng-controller と記述している箇所でng-appの子スコープとして新たなスコープが生成されています。Chrome DevToolsなどで該当するDOMを見てみると、ng-scopeというクラス名が自動的に付与されているため、これを元に確認することができます。

最初のサンプルの場合、ng-repeatでも新しくスコープを生成するため、expertListの<li>にも同じように付与されています。

sample1-a

“Controllerの適用範囲” で解説した内容はこのスコープのツリー構造と関わっています。

以下の例を見てみましょう。

...
<body ng-controller="myCtrl">
<p>①親スコープの'name' -> {{name}}</p>
<p>②親から見ようとした 'twitter' -> {{twitter}}</p>

  <div ng-controller="myChildCtrl">
    <p>③myChildCtrl の 'name' -> {{name}}</p>
    <p>④myChildCtrl の 'twitter' -> {{twitter}}</p>
  </div>

<script>
angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope){
    $scope.name = 'can.i.do.web';
  }])
  .controller('myChildCtrl', ['$scope', function($scope){
    $scope.twitter = 'きゃない';
  }]);
</script>

実行してみると、このように表示されます。

scope

スコープはツリー上に構成されるため、スコープの親子関係が生まれます。
原則、子スコープから親スコープの値は参照できますが、その反対はできません。
親であるmyCtrlで定義された、nameというプロパティは、子であるmyChildCtrlのnameとして参照することができるため、表示されています。
反対に、親スコープから子スコープのプロパティを参照できないため、②では何も表示されていません。

子スコープが新たに生成されるタイミングは、コントローラを定義する（ng-controller）など、一部の（ビルトイン）ディレクティブ などを定義した場合です。
どのディレクティブ が新しくスコープを生成するかや、詳細な挙動については、AngularJS にかなり慣れている必要があります。
しかし、はじめから完璧に理解する必要は全くありません。スコープという概念があり有効範囲や親子関係がある、ということを頭の片隅においておくと良いでしょう。

Controller 間でデータ共有

親子コントローラ間でデータを共有するためには以下のように記述しましょう。

...
<body ng-controller="parentCtrl">

  <div>
    <p>親スコープ</p>
    <input type="text" ng-model="autor.name">
  </div>

  <div ng-controller="childCtrl">
    <p>子スコープ</p>
    <input type="text" ng-model="autor.name">
  </div>

<script>
angular.module('myApp', [])
  .controller('parentCtrl', ['$scope', function($scope){
    // 親スコープ
    var author = {};
    author.name = 'Kanai';
    // bind
    $scope.autor = author;
  }])
  .controller('childCtrl', ['$scope', function($scope){
    // 子スコープ
  }]);
</script>

これまでのサンプルとの違いは、$scope.autor.nameのように、直接$scope.nameとしていない点です。
このように$scopeとバインドしたいプロパティとの間に、オブジェクトを挟むことで、親子間でデータを共有することができます。

こうすることで、親子スコープのどちらのinputでも、片方の入力値を書き換えれば、もう一方のデータも書き変わります。
先述してきたサンプルの場合は、JavaScriptのプロトタイプチェーンの都合上、親子関係が破綻してしまいます。そのため、値を書き換えても相互にデータの書き換えを行なうことができません。
データの書き換えや参照が思ったようにうまくいかない場合は、このことを覚えておくとよいかもしれません。

まとめ

今回は、ControllerとScopeの基礎を解説しました。
特にスコープについては複雑な概念や実装になっていますので、いきなり全てを把握することは難しいです。AngularJS の経験を積むとともに徐々に学んでいきましょう。
次回はサービスについての解説を予定しています。

]]> AngularJSの強力なフォームバリデーションを活用しよう /canidoweb/13708/ Fri, 13 Mar 2015 03:00:44 +0000 /?p=13708 連載： 初心者から中級者まで、今注目のAngularJS徹底解説 (2)

連載企画「AngularJS徹底解説」の第2回目は、Angularが備えている強力なフォームバリデーションについて解説します。

AngularJS の強力なフォームバリデーション

ご存知の通り、HTML5の仕様にもフォームバリデーションがあり、主要なモダンブラウザであれば既に実装されています。しかし、ブラウザに実装されたバリデーション機能は、まだ実践で使うには使い勝手がよいものとは言えません。もうしばらくは、プラグインやライブラリに頼ったり、または、自身で実装していく必要がありそうです。

今回からデモページを用意してみました。実際に動作していることを確認できます。レイアウト調整をしているため、本稿で掲載するサンプルコードとは多少異なること、ご了承ください。

各input要素のバリデーション

まず、Angularでのバリデーションは、双方向バインディングの特性を活かして、入力と同時にチェックを行うことができます。

例えば以下のように 記述することで、それぞれのテキストボックスに対して必須チェック・文字数チェックを行うことができます。

<form>
  <input type="text" ng-model="demoModel" ng-required="true">
  <input type="text" ng-model="demoModel2" ng-maxlength="4">
</form>

まずは、ng-requiredとng-maxlength="4"となっている箇所がバリデーションの定義です。とても簡単に記述することができます。

ただ上記のままでは、チェックがエラーだったとしても、何の変化もおきません。そこで、次はバリデーションチェックエラーの場合にエラーメッセージを出してみます。

先のサンプルに少し書き足して、以下のようなコードにします。

<form name="demoForm" novalidate>
  <input type="text" name="input3" ng-model="demoModel" ng-required="true">
  <p ng-show="demoForm.input3.$error.required">入力必須です</p>

  <input type="text" name="input4" ng-model="demoModel2" ng-maxlength="4">
  <p ng-show="demoForm.input4.$error.maxlength">4文字までです</p>
</form>

このように、実際バリデーションを利用するにあたっては、form要素にname属性とnovalidate属性を、各input要素にはname属性とng-model属性を定義することがほぼ必須となります。忘れずに定義するようにしましょう。

form要素のnovalidate属性は、ブラウザに実装されているバリデーション機能をOFFにするためです。またform、input共にname属性がついていますが、こうすることでバリデーションチェックの結果を取得することができます。

実行すると以下のようにエラーメッセージが表示されます。

invalid

ng-showにそれぞれ渡している値がバリデーションチェックの結果です。それぞれの”form名”.”input名”.$errorというオブジェクトに保持されます。$errorの中にあるrequiredやmaxlengthはチェックエラーのときに、trueになります。エラーではない場合はfalseとなるため、これを利用してエラーメッセージの表示切り替えを行うことができます。

上記のサンプルでは、必須チェックのみ、文字数チェックのみでしたが、複数のバリデーションを定義することも可能です。

<form name="demoForm2" novalidate>
  <input type="text" name="input5"　ng-model="demoModel5" ng-required="true" ng-minlength="4" ng-pattern="^[0-9]+$">
  <p ng-show="demoForm2.input5.$error.required">入力必須です</p>
  <p ng-show="demoForm2.input5.$error.minlength">4文字以上です</p>
  <p ng-show="demoForm2.input5.$error.pattern">半角数値のみです</p>

  <p>demoForm.input5.$error.pattern : {{ demoForm.input4.$error }}</p>
</form>

このように、各エラーに対してをエラーメッセージを細かく設定することができます。逆に、エラーメッセージは1つだけ表示させたい場合もあります。以下のように、$invalidを利用すると実現することができます。$invalidは、複数定義したバリデーションのどれかひとつでもエラーであればtrueとなるためです。

<form name="demoForm2" novalidate>
  <input type="text" name="input6"　ng-model="demoModel6"　ng-required="true" ng-minlength="4" ng-pattern="/^[0-9]+$/">
  <p ng-show="demoForm2.input6.$invalid">4文字以上の半角数字のみ（必須）</p>
</form>

取得可能なバリデーションチェックの結果を一部挙げると、

  • “form名”.”input名”.$error
    • 各バリデーションチェックエラーのプロパティを保持
  • “form名”.”input名”.$valid
    • 該当要素のバリデーションチェックが、エラーでないとき true
  • “form名”.”input名”.$invalid
    • 該当要素のバリデーションチェックが、エラーであるとき true
  • “form名”.”input名”.$dirty
    • 該当要素の値が初期値から変更があったとき true
  • “form名”.$valid
    • フォーム内の全要素に対して1つもバリデーションチェックエラーがないとき true
  • “form名”.$invalid
    • フォーム内の全要素に対して1つもバリデーションチェックエラーがあるとき true

となります。 この他にも input 要素が初期値かどうか、form が submit されたかどうかのフラグも取得可能です。

バリデーションによるクラスの付与

先述したとおり、Angular ではエラーであるかどうか等、true/falseのフラグを保持しています。これに加えて、各要素にクラスの付与も同時に行っています。 例えば、ng-requiredを定義すると、ng-invalid-requiredというクラスが要素に付与されます。Google Chrome Developer Tools等から確認することができます。

devtools

自動的にクラスが付与されるため、エラー時に「要素のボーダーを赤くする」など、スタイルを設定しておくこともできます。下記は、.ng-invalid（エラーの場合）のみ場合、初期表示時から赤く表示されてしまいます。

それを回避するために、.ng-dirty（初期値から変更があったかどうか）を併せて記述することで、ユーザが入力するまではエラーとして扱わないようにしています。

.ng-invalid.ng-dirty{
  border: solid 1px red;
}

まとめ

今回はフォームのバリデーション機能について解説しました。自身であれこれ設定しなくても、かなり簡単に実装することがおわかりいただけたかと思います。

もちろん標準の機能では実現できないケースも出てくるでしょう。その際には、AngularUI の UI-Utils を利用することで複雑なバリデーションを実装することも可能です。

AngularUIのようにAngular用のプラグインも豊富に存在しているので、これらについても今後紹介していきたいと思います。

ng-japan 開催！

ngjapan 2015/3/21に日本で初めてとなる Angularのカンファレンス、ng-japanを開催します。 Angularの開発チームメンバーを招き、直接学ぶことができる場です（逐次通訳あります）。

そこで、CodeIQ さんから Angular について出題 させてもらいました。 ぜひ、解いてみてください。 codeiq

HTML5 Experts.jpでも、特集企画を組んでその内容をお伝えする予定です。

3/5～3/6に開催された本家 ng-conf では、Angular 2などのセッションが話題になっており、これからも注目すべきフレームワークの1つと言えるでしょう。

]]> これから始めるAngularJS /canidoweb/11543/ Wed, 10 Dec 2014 01:00:15 +0000 /?p=11543 連載： 初心者から中級者まで、今注目のAngularJS徹底解説 (1)

これから始めるAngularJS

HTML5の普及とともに、より表現豊かなWebアプリケーションを開発できるようになりました。その反面、Webアプリケーションの開発は、より複雑に、より大規模になってきています。こうした問題を解決するために、数多くのフレームワークが生まれてきました。 Backbone.jsやKnockout、最近であれば、Vue.jsやFacebook社が発表したReactなどが挙げられます。

本連載では、数多くあるフレームワークの中でも、今注目されているAngularJSについて幅広く紹介していきます。今回は、AngularJSに触れたことのない方に向けての入門編です。

AngularJS ロゴ

AngularJSとは

AngularJSはGoogle社製のフレームワークで、冒頭で挙げたフレームワークと違い、フルスタックであることが特徴の1つです。 データバインディングやルーティング、テンプレート機能をはじめとする、Webアプリケーションを開発していく上で必要とされる機能が一通り揃っています。

Backbone.jsなどの場合は、最低限の機能しかしないため、不足する機能については、サードパーティ製のプラグインやライブラリと組み合わせて開発していくのが定石です。

一方、AngularJSでは、機能的な面でサードパーティ製のプラグインを導入することはほとんどありません。標準で用意されている機能だけでも充分な役割を果たしてくれます。

また、スクリーンショットにHTML enhanced(HTML拡張 ) とあるように、HTMLのような記述方法を採用しているのも大きな特徴です。

AngularJSの標準機能を挙げてみます。

  • 双方向データバインディング
  • シンプルなルーティング機能
  • HTML ベースのテンプレート機能
  • 非同期通信のサポート
  • 数多くのビルトインディレクティブ
  • フィルタ機能
  • Dependency Injectionによるモジュール管理
  • セキュリティ対策
  • テスト

などなど。

他のフルスタックといわれるフレームワークでも、ここまで幅広く包括的に用意されているものはなかなかありません。それゆえに、他のフレームワークに比べると、学習コストが高いとされています。

また、どんなフレームワークにも得意／不得意があります。フルスタックとはいえAngularJSも例に漏れません。AngularJSが得意とすることは、CRUD系のアプリケーションや、ルーティング機能を活かしてのSPA(Single Page Application)などです。

CRUD系のアプリケーションというのは、Webサイトの管理画面、マイページなどが該当します。他にもエンタープライズ向けのシステムもCRUD系アプリケーションの典型と言えるでしょう。

SPAで代表的なものは、ハイブリッドアプリ、Chrome Extension、Firefox OSアプリなどが該当します。ただし、SPAの中でも、ゲームで用いるような派手なエフェクトや、canvasを利用してのグラフィック処理などは得意ではありません。このようなケースで AngularJSを採用するのは控えた方がよいでしょう。

Hello World

まずは、Hello Worldを試してみましょう。

公式サイトからダウンロードします。今回はCDNを利用します。

AngularJS Download

現在は1.3系（最新版）と1.2系（レガシー版）の2つのバージョンが存在しています。この2つの違いは、IE8以下のブラウザをサポートするかしないかです。1.3系ではIE8以下のブラウザはサポートされませんので、採用する際はこれを判断基準にするとよいでしょう。特に意識しなくてよい場合は、1.3系をオススメします。

続いて、以下のようにマークアップします。

<!doctype html>
<html ng-app><!-- ① -->
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
  <!-- ② -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body>
  Hello <span ng-bind="myModel"></span> !!!<!-- ③ -->
  <div><input type="text" ng-model="myModel"></div><!-- ④ -->
</body>
</html>

AngularJSはカスタムタグやカスタム属性を記述して、対応する機能を呼び出します。このサンプルコードで行われている AngularJSに関わる設定は以下の4つです。

  • ① ng-app
    • AngularJSを利用することの宣言をおこないます。
  • ② AngularJSを読み込みます。
  • ③ ng-bind
    • 指定した”myModel”をデータバインドします。
  • ④ ng-model
    • モデル名の宣言をします。

ブラウザで動かしてみましょう。

Hello World

テキストボックスに文字を入力するのと同時にHelloの後に入力した文字が表示されます。通常であればJavaScriptでテキストボックスの入力植を取得して、Helloの後に出力する、といった処理が必要になりますが、AngularJSでは、モデルとそのデータバインディングの指定をおこなうだけで同様の処理がおこなわれます。

ビルトインディレクティブ

Hello Worldのサンプルでは、カスタム属性としてng-appなどを記述しました。AngularJSの仕組みで作られたカスタム要素やカスタム属性をディレクティブと呼び、特に標準で用意されているディレクティブをビルトインディレクティブと呼びます。

一部を除いて「ng-」で始まっているのが特徴で、70個程度のビルトインディレクティブが標準機能として用意されています。aや formなどもAngularJSによって拡張されているため、ただのHTMLの要素ではなく、これらもビルトインディレクティブとして扱われます。

以降、サンプルで使用したビルトインディレクティブの他に、よく利用するディレクティブをいくつか紹介します。

ng-show / ng-hide / ng-if

Hello Worldに以下のコードを少し追加して確認してみます。このディレクティブはいずれも、ng-show=”条件”のように記述します。条件が trueとみなされた時にそれぞれの役割を果たします。名前からもわかる通り、ng-showとng-ifはtrueのときに表示、ng-hideはtrueのときには非表示となります。

ng-showとng-ifの違いは、前者は{ display: none; }で表示の切り替えをおこなっているのに対し、ng-ifは条件がtrueの時は、DOMに追加、falseのときはDOMから削除しています。

<body>
  Hello <span ng-bind="myModel"></span> !!!
  <div><input type="text" ng-model="myModel"></div>

  <div ng-show="myModel">こんにちわ</div>
  <div ng-hide="myModel">入力してください！</div>
  <div ng-if="myModel==='World'">Hello World 完成！</div>
</body>

ng-class

ng-classは、動的にCSSのclassの付け替えをおこなうことができます。記述方法はいくつかあるのですが、{ class 名 : 条件 } と記述するのが使いやすいです。条件については先ほどと同様です。

<style>
  .notEmpty { background-color: red; }
</style>
<body ng-class="{ notEmpty : myModel }">
  Hello <span ng-bind="myModel"></span> !!!
  <div><input type="text" ng-model="myModel"></div>
</body>

ng-repeat

このディレクティブはテンプレート上で配列のループ処理を行うためのものです。情報を一覧表示する際に必ず使いますので、覚えておいていただきたいです。

<body>
  <ul ng-init="items = ['html5', 'experts', 'jp']">
    <li ng-repeat="item in items">
      <p ng-bind="item"</p>
    </li>
  </ul>
</body>

ng-initはモデルの初期化をおこなうディレクティブです。今回はサンプルのために使用しましたが、実際のアプリケーションを開発する際は、あまり使用することはないでしょう。

まとめ

今回は、AngularJSの基本についてと、ビルトインディレクティブについて紹介しました。これらは特にDOMを操作するためのディレクティブです。

AngularJSにはほかにもクリックなどのイベントの定義をするものや、form要素の拡張をおこなった強力なバリデーション機能を持つものもあります。こちらについては次回以降、順を追って紹介していく予定です。

おまけ

AngularJSの本、共著で書きました。

book

]]>