先日開催した mg-mtg#5 AngularJS 勉強会 - AngularJS Japan User Group | Doorkeeper で使った 資料(?) を公開しようと思ったんだけど、これでは伝わる気がしない、ということでまとめてみました。
今回の勉強会は、
- ３〜４人のグループ作る
- 出題されたテーマについてディスカッションする
- 結果を発表する
- みんなであれこれ話して結論を出す
これを時間が許す限りやってみようという企画。そこで発表すると時間かかると思い、急遽 GoogleDocs でドキュメント共有 して 3. の結果を書いてもらうようにしました。結果的になんか楽しい感じになったので良かったのかなと。
上のドキュメントのリンクをみて頂ければわかるのですが、何のことだかわからんと思います。なので、振り返ってみます。ドキュメントと合わせて見てください。「」で囲んでいるのが共有ドキュメント内のキーワードになってます。
テーマ#1
Controller 間でデータを共有する方法を検討してみてください。
まずはウォーミングアップ問題。
ボクとしては記入してもらった１つの、「Service に保持して各コントローラに inject する」みたいなのを期待してたんですが、「そもそもあまり共有しないのでは」というバッサリとしたご意見も。他にネタっぽいのもありますね。
１点注意ですが、この中の「$rootScopeを使う」はお勧めしません、というよりbad practice なので、最愛の人が人質にされているようなケース以外はやめましょう。
テーマ#2
Provider, Service, Factory のそれぞれが、適役である具体的なケース・機能を検討してみてください。
第２問。難しいことを聞いてみました。
難しかったようで、具体的なケースまでには至らず。Provider については「providerはconfigフェーズで設定が必要な場合に使う。」で概ね一致しました。その後に「factoryとserviceはfactory使っとけばいいんじゃない？」でちょっとした紛争が。。。
Factory しか使わない派 vs Service しか使わない派
これ、簡単に言ってしまうと function 返すか、new したオブジェクト返すかなんです。まさか AngularJS の話してるのに、new する/しない 紛争みたいなものに巻き込まれそうになるとは思いませんでした。
結果としては、「OOPっぽく書くならService、関数マシマシで書くならFactory」で落ち着きました。いやー、盛り上がった（笑）
テーマ#3
directiveをつくる時の判断基準
これは総じて同じような意見でした。テンプレートをコンポーネント化する場合は、restrict: 'E' で、振る舞いのようなものを割り当てたい場合は restrict: 'A' を使うと直感的かなと思います。ちなみに、restrict: 'C' を使っている方はいなかったです。
「<markdown-editor ng-model=”data”>とかどう作るんだ」が宿題に。
ボクやりますと言ってはみましたが、後からコレじゃね？と tweet してくれた人がいたので、そのリンクを貼っておきます。
JavaScript - 自作directive内でng-modelをきちんと動作させる - Qiita
このことじゃなかったら詳しく聞いて更新します。
あと、この記事を書いた方、会場にいたような・・・そんな気がした。
テーマ#4
パフォーマンスについて、改善や工夫したことはありますか？
1.2.x 系は IE8 をサポートしているのですが、実際にIE8で動作させるとかなり遅くなるケースがあったそうです。
ちなみに、現状のバージョンについては、1.2.x 系が legacy 版、と 1.3.x 系 が latest 版という位置づけになっています。
vue.js については以前、ホントにちょっと見たことがあって、そのときの第一印象を言っただけなので、合ってるかどうかは実際に調べてみてください。あと間違ってたら教えてください。
「データを表示に合わせて整形する処理...」については、ほぼ全員がケースバイケースだという意見でした。これについてはサーバ処理やサーバ自体のスペックなど色々な状況から判断する必要があると思います。
「$destroy 使ってる？」といった質問がありました。document にイベントリスナをつけるような directive を作る場合は、$destroy を使って明示的に外すようにしているとのこと。これについてはメモリリークの心配もあるので、確かにやっておいた方が良いかも、と新しい発見でした。
テーマ#5
SEO どうしてますか？
これが最後のテーマになりました。
個人的には「 そもそもSEOが必要なのアプリはSPAにしない」が正しいと思います。
とはいえ、そうもいかない事情もあるのだなぁと。note の ogp 対策が話題にあがりました。
そういった背景含め、 @hokaccha さんから頂いたテーマについてディスカッションしました。
https://gist.github.com/hokaccha/a4c09e5663dbabb56fec
「Directiveで囲んで、compile走る前に持ってくるとか」が一番 AngularJS らしい SEO 対策としてのアプローチではないでしょうか。
以上で時間いっぱいとなりました。ディスカッション形式、初めての試みだったのでどうなるか全然読めませんでしたけど、蓋を開けてみると、みなさん積極的で良かった良かった。あとは楽しんでもらえてたらより嬉しいです。ニーズがあればまたこの形式でもやってみようと思います。進行下手とかだったらすみません、がんばります。
とりあえず次回のイベントは AngularJS ２周年記念イベントですかね。