【AngularJSの要】Directive初学者のための入門ロードマップ



AngularJSのDirectiveについて、初学者が進める時に、みておくとよい記事をロードマップ的にまとめました。上から順番に見ていけば、Directiveの基礎はひと通り理解できることと思います。



# **事前知識**

以下がわかればひとまずおーけーです。

* <a href="https://docs.angularjs.org/guide/databinding" target="_blank">AngularJS: Developer Guide: Data Binding</a>
* <a href="https://docs.angularjs.org/guide/scope" target="_blank">AngularJS: Developer Guide: Scopes</a>
* <a href="https://docs.angularjs.org/guide/controller" target="_blank">AngularJS: Developer Guide: Controllers</a>



# **4つのステップ**

参考になった記事をピックアップし、これから勉強を始めてみようと思う人がスムースに学べるよう、以下の4つのステップを用意してみました。

1. **<a href="#1-概要を理解する">概要を理解する</a>**
2. **<a href="#2-link-functionを理解する">Link Functionを理解する</a>**
3. **<a href="#3-directive同士の間での連携を理解する">Directive同士の間での連携を理解する</a>**
4. **<a href="#4-directiveにおけるscopeを理解する">DirectiveにおけるScopeを理解する</a>**



## **1. 概要を理解する**

はじめに、Directiveの概要をざっくりと理解しましょう。基本的にDirectiveは「DOMの操作をコンポーネント化する」のにつかうものです。

* <a href="https://docs.angularjs.org/guide/directive" target="_blank">AngularJS: Developer Guide: Directives</a>
* <a href="http://js.studio-kingdom.com/angularjs/guide/directive" target="_blank">ディレクティブ | AngularJS 1.2 日本語リファレンス</a>
* <a href="https://thinkster.io/egghead/first-directive/" target="_blank">AngularJS - First Directive - Thinkster</a>・・・（動画）
* <a href="http://qiita.com/Quramy/items/dd4e7d2693c32d92048c" target="_blank">JavaScript - AngularJSのDirectiveを理解する. - Qiita</a>
* <a href="http://qiita.com/tanishi/items/048568d81ee7a3bf2ae4" target="_blank">AngularJS の custom directive まとめ - Qiita</a>



## **2. Link Functionを理解する**

概要で理解したように、Directive（Custom Directive）では、DOMに対するひとつの機能をカプセル化できます。その中でも、Link FunctionはDOM操作の要となります。

* <a href="https://thinkster.io/egghead/useful-behaviors/" target="_blank">AngularJS - Useful Behaviors - Thinkster</a>・・・（動画）
* <a href="http://www.slideshare.net/KonYuichi/0725-directive-innote" target="_blank">Directiveで実現できたこと</a>・・・（スライド）
* <a href="http://qiita.com/_rdtr/items/5edffeb96a9663fa1b1c" target="_blank">JavaScript - Angular.js入門 (4)ディレクティブ その1 - Qiita</a>
* <a href="http://www.slideshare.net/itokami1123/angularjs-directive-fff20140228" target="_blank">AngularJSのDirectiveで俺俺タグつくっちゃお</a>・・・（スライド）


## **3. Directive同士の間での連携を理解する**

Directive同士の間での連携を学びます。次のScopeの理解にもつながってくるので、丁寧にみてゆきたいところです。

### **a. 連携について**

* <a href="http://qiita.com/_rdtr/items/590ccb7be16dc8ed9be3#2-2" target="_blank">JavaScript - Angular.js入門 (5)ディレクティブ その2 - Qiita</a>
* <a href="https://thinkster.io/egghead/directive-to-directive-communication/" target="_blank">AngularJS - Directive to Directive Communication - Thinkster</a>・・・（動画）
* <a href="https://thinkster.io/egghead/directive-communication/" target="_blank">AngularJS - Directive Communication - Thinkster</a>・・・（動画）

### **b. Directive同士の連携において重要になってくるTransclusionについての解説**

* <a href="https://thinkster.io/egghead/transclusion-basics/" target="_blank">AngularJS - Transclusion Basics - Thinkster</a>・・・（動画）
* <a href="https://thinkster.io/egghead/components-and-containers/" target="_blank">AngularJS - Components and Containers - Thinkster</a>・・・（動画）



## **4. DirectiveにおけるScopeを理解する**

DirectiveのScopeについて学びます。Isolated Scope・Binding Scope・Expressionを理解して、Directiveをコントローラーと連携してみましょう。

### **a. 記事**

* <a href="http://etc9.hatenablog.com/entry/2014/05/26/012249" target="_blank">AngularJS Directive チュートリアル STEP1〜STEP5 - A Memorandum</a>・・・（こちらの記事の「Step4」以降）
* <a href="http://lab.hisasann.com/AngularJSTutorial/" target="_blank">AngularJS's tutorial - あなたとともにAngularJS</a>・・・（こちらの記事の「directiveを複雑に使ってみる」のセクション）
* <a href="http://qiita.com/_rdtr/items/590ccb7be16dc8ed9be3#2-3" target="_blank">JavaScript - Angular.js入門 (5)ディレクティブ その2 - Qiita</a>
* <a href="http://qiita.com/armorik83/items/72f12cb3a6f040fb8364" target="_blank">ここらでDirective Scopeの@=&をまとめておきたいと思う - Qiita</a>

### **b. 動画**

* <a href="https://thinkster.io/egghead/understanding-isolate-scope/" target="_blank">AngularJS - Understanding Isolate Scope - Thinkster</a>
* <a href="https://thinkster.io/egghead/isolate-scope-at/" target="_blank">AngularJS - Isolate Scope "@" - Thinkster</a>
* <a href="https://thinkster.io/egghead/isolate-scope-eq/" target="_blank">AngularJS - Isolate Scope "=" - Thinkster</a>
* <a href="https://thinkster.io/egghead/isolate-scope-am/" target="_blank">AngularJS - Isolate Scope "&" - Thinkster</a>
* <a href="https://thinkster.io/egghead/isolate-scope-review/" target="_blank">AngularJS - Isolate Scope Review - Thinkster</a>

### **c. 実例**

* <a href="http://jsfiddle.net/simpulton/VJ94U/" target="_blank">AngularJS Sticky Notes - JSFiddle</a>
* <a href="http://jsfiddle.net/maxisam/QrCXh/" target="_blank">AngularJS Isolated Scope Experiment - JSFiddle</a>



# **まとめ**

AngularJsのDirectiveについて、初学者が学習しやすい4つのステップと参考になる記事を紹介しました。

1. **<a href="#1-概要を理解する">概要を理解する</a>**
2. **<a href="#2-link-functionを理解する">Link Functionを理解する</a>**
3. **<a href="#3-directive同士の間での連携を理解する">Directive同士の間での連携を理解する</a>**
4. **<a href="#4-directiveにおけるscopeを理解する">DirectiveにおけるScopeを理解する</a>**

以上を理解すれば、あとは実際に動かすのを繰り返してゆくのみとなります。参考になれば幸いです。