読者です 読者をやめる 読者になる 読者になる

albatrosary's blog

Webアプリケーション開発に関すること

「ng-mtg#6 AngularJS 勉強会」に行ったけどスタッフだったのでyoutube見ながらブログりましたという流れ

セミナー

「ng-mtg#6 AngularJS 勉強会」に行ったけどスタッフだったのでyoutube見ながらブログりましたという流れになりました。

ng-mtg#6 AngularJS勉強会 - AngularJS Japan User Group | Doorkeeper

今回の勉強会のテーマは、Directiveとセキュリティです。聞き応えのある内容だったと思います。はじめにAngularJS Japan User Group管理人の金井さんから挨拶がありましたがAngularJS1.0が出て2周年になり、そのお祝いも兼ねての勉強会です。あとAngularJSの本を執筆中のようで出たら買ってくださいということでした。

アジェンダは次の通りです。

  • ディレクティブパターン - 株式会社LIG 林 優一 氏
  • Directiveで実現できたこと - 株式会社ピースオブケイク 今 雄一 氏
  • そろそろ押さえておきたい AngularJSのセキュリティ html5j Webプラットフォーム部 にしむねあ 氏

youtubeはこちら)


ng-mtg#6 AngularJS 勉強会 - YouTube

 

ディレクティブパターン - 株式会社LIG 林 優一 氏

ディレクティブには「指令/命令」という意味があり、「データバインドするモデルやイベントハンドリングするロジックを、DOM に紐付けるためのもの」で、AngularJSで一番強力な機能でありHTMLが持っていない意味合いや振る舞いを加えることができます。

AngularJS Directive なんてこわくない(その1) - AngularJS Ninja

実務でAngularJSを使っている人が結構多いです。ただディレクティブを自作している方は少ないようでした。

  • 呼び出しパターン
  • 実装パターン
    • テンプレートパターン
    • 共通パーツパターン
    • イベントフックパターン
    • jQueryプラグインパターン

パターン分けして見た結果、あまりパターンが無いということです。主にイベントフックパターンが多かったと言うことです。

呼び出しパターンには

  • 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という構成で、エンジニア4名、デザイナー2名で作ったということです。

Directive use case in noteとしてDirectiveを使うポイントは

こうすると使い回しができます。そして

  • 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に力を入れるのはごく自然な流れだと考えています。

間違いなくこれから2、3年でJavaScriptフレームワークが淘汰されると思います(JavaScriptフレームワークが多すぎですので)。これから技術選定の一つにWeb標準に近いアーキテクチャ実装できているフレームワークというのも基準の一つにすべきと思います。

Web Componentsについては

Tender Surrender: なぜ Web Components はウェブ開発に革命を起こすのか

白石俊平がいたころ。: Web開発を革命する(かも知れない)Web Componentsという仕様について

Shadow DOM 101 - HTML5 Rocks

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

には目を通しておこう。

 

最後に一言!「ようつべ」で聞けるのは良いのだが勉強会会場で聞きたかった。。