「ng-mtg#6 AngularJS 勉強会」に行ったけどスタッフだったのでyoutube見ながらブログりましたという流れになりました。
ng-mtg#6 AngularJS勉強会 - AngularJS Japan User Group | Doorkeeper
今回の勉強会のテーマは、Directiveとセキュリティです。聞き応えのある内容だったと思います。はじめにAngularJS Japan User Group管理人の金井さんから挨拶がありましたがAngularJS1.0が出て２周年になり、そのお祝いも兼ねての勉強会です。あとAngularJSの本を執筆中のようで出たら買ってくださいということでした。
アジェンダは次の通りです。
- ディレクティブパターン - 株式会社LIG 林 優一 氏
- Directiveで実現できたこと - 株式会社ピースオブケイク 今 雄一 氏
- そろそろ押さえておきたい AngularJSのセキュリティ html5j Webプラットフォーム部 にしむねあ 氏
（youtubeはこちら）
ng-mtg#6 AngularJS 勉強会 - YouTube
ディレクティブパターン - 株式会社LIG 林 優一 氏
ディレクティブには「指令/命令」という意味があり、「データバインドするモデルやイベントハンドリングするロジックを、DOM に紐付けるためのもの」で、AngularJSで一番強力な機能でありHTMLが持っていない意味合いや振る舞いを加えることができます。
AngularJS Directive なんてこわくない（その１） - AngularJS Ninja
実務でAngularJSを使っている人が結構多いです。ただディレクティブを自作している方は少ないようでした。
パターン分けして見た結果、あまりパターンが無いということです。主にイベントフックパターンが多かったと言うことです。
呼び出しパターンには
- Restrict:A Attribute
- Restrict:C Class
- Restrict:E Element
- Restrict:M Comment
があり、ElementやAttributeの前についている「x-」と「data-」は取り除かれ「:」、「-」や「_」などの区切り文字はキャメルケースへ変換されるようです。実際にサンプルを見ないと難しいのでスライドを確認してください。
複雑な処理がディレクティブ化されていると嬉しいというお話がありましたが、モジュール化することで見通しの良いソースになるというのは良いことだと考えます。
最後にパフォーマンスの話がありましたが、HTTPリクエストの数が増えたら$templateCacheを使ってテンプレートをひとまとめにすると良いとのことです。
スライドはこちらです。
Directiveで実現できたこと - 株式会社ピースオブケイク 今 雄一 氏
note ――つくる、つながる、とどける。 というアプリケーションはRails4.1+nginx+MySQL+AngularJS(1.2系)で作られているそうです。AngularJSは14Controller/33Service/36Directiveという構成で、エンジニア４名、デザイナー２名で作ったということです。
Directive use case in noteとしてDirectiveを使うポイントは
- 機能単位にコンポーネント化
- DOM操作を要するもの
こうすると使い回しができます。そして
- Controllerは極力薄く、Directiveに適切な$scopeを与える
- 機能ごとにDirectiveに追い出す
- なるべくIsolate Directiveにする
- Isolateじゃなくてもng-includeは使わずDirectiveにする
ということです。資料がアップされていないようなので以前使われていたと思われるものを添付します。
資料がアップされてましたので追記します。
そろそろ押さえておきたい AngularJSのセキュリティ html5j Webプラットフォーム部 にしむねあ 氏
お話された内容は主に次の通りです。
angularjs.orgにあった反射型XSSあるのとDOM based XSS発生メカニズムの説明がありました。詳細はスライドをご確認ください。
余談ではありますが、AngularJS UGからセキュリティの話をして欲しいと言われサクッと調べ上げるところはさすがとしか言いようが無いです（すごい！）。
最後に
Web ComponentsやOo()(Object.observe()のこと)が注目される中AngualrJSの構造というのは限りなくWeb標準に近いものではないかと思います。これからのWebアプリケーションということを考えるといまからAngularJSに力を入れるのはごく自然な流れだと考えています。
間違いなくこれから２、３年でJavaScriptフレームワークが淘汰されると思います（JavaScriptフレームワークが多すぎですので）。これから技術選定の一つにWeb標準に近いアーキテクチャ実装できているフレームワークというのも基準の一つにすべきと思います。
Web Componentsについては
Tender Surrender: なぜ Web Components はウェブ開発に革命を起こすのか
白石俊平がいたころ。: Web開発を革命する（かも知れない）Web Componentsという仕様について
Shadow DOM 201: CSS とスタイリング - HTML5 Rocks
Shadow DOM 301: 上級者向けコンセプトと DOM API - HTML5 Rocks
Custom Elements: HTML に新しい要素を定義する - HTML5 Rocks
HTML で利用可能になった Template タグ: クライアントサイドのテンプレートの標準化 - HTML5 Rocks
HTML Imports: ウェブのための #include - HTML5 Rocks
Oo()については
Data-binding Revolutions with Object.observe() - HTML5 Rocks
には目を通しておこう。
最後に一言！「ようつべ」で聞けるのは良いのだが勉強会会場で聞きたかった。。
