connpass
http://connpass.com/event/25154/
場所は渋谷ヒカリエのレバレジーズ本社です。
参加者は60人くらいかな。
先日、Angular2勉強会の勉強会に参加してブログに書きました。
「第1回Angular2勉強会 #ng2Curry」に参加しました
この日は↑の3日後の、また別のAngularの勉強会です。
同日AMには別の所でAngularの勉強会も開催されていたようで、Angularの勉強会が増えてきたのは良いですね。
以下、復習用のメモ。
Angular.jsのきほん
@can_i_do_web 氏
ngTeratail from Kenichi Kanai
Concepts
- SPAに必要だよね、と言われていた機能達を、AngularJSはすべてサポートします。
- めちゃめちゃ特化している
特徴
- フルスタック
- HTML enhanced
- htmlにngなんとかを書いてHTMLを拡張する
- 本家サイトのロゴの下にも書いてある
得意なところ
- CRUD系アプリ
- 管理画面
- ハイブリッドアプリ
- Ionic、OnsenUIではSDKの内部でAngularが使われている。簡単にハイブリッドアプリが作れる。
苦手なこと
- モバイル向けアプリ
- ゲームのグラフィックやエフェクト
- いわゆるWebサイト
- SEO(検索エンジン最適化)を必要とするところはAngularは適していない。そもそもSPA自体が適していない。
- Angular1系は若干遅いが、速度を意識しない場合はぜんぜん採用してよい。
Data-Binding
- 入力したものを出力する。
- <input ng-model = "モデルの名前">
- jQueryを数行書いてたのより遥かに楽。
Built-in Directive
- Angularが元々用意してくれたDirectiveがたくさんある。
- ng-なんとか
Dom操作
- aタグは使えるが、Angularで拡張されたaタグになってる。同じように使える。
- formとかinput属性がすごく拡張されてて、formのvalidation機能が強力。
From Validation
- requirede ・・・ 必須チェック
- min / max ・・・ 最大と最小のレンジ指定
- バリデーションはHTML5の機能としてブラウザに搭載されている機能だが、なんで流行っていないかというと、すごい使い勝手が悪いから。
- 自分自身であれこれバリデーションをしたいので、Angularが用意している。
- ng-pattenは特殊。正規表現で定義できる。あんまりお薦めしない。居所的に使うのがよい。
- URLのチェックしたいなら、<input type="url">と書くだけでバリデーションが走る。
- form[name].input[name].$valid etc
- バリデーションがどういう状態か、我々がわからないとどう処理していいかわからない。
- これ、つらいっすよね。書くと簡単だけど説明するとこーなった。
- form[name].input[name].$valid
- name属性を使って取得するのでname属性で関連づけていくことになる。
- ng-disabled ・・・ フォームのチェックが通るまでボタンが押せなくなる。割とコレが使える。
Filter
- Angularの中身のデータをTemplateエンジンの表示変換で使う。
- dateが一番使う。filterも何でも定義できるのでよく使う。
- サーバから返ってきた日付を、表示形式を変えて出力してください、とかよくある。
- dateフィルタを使って好きなフォーマットに変換して表示できる。
- サーバからもらったデータを加工してしまうと、サーバに返すとき変換しなおす必要があるが、Filerは加工しない。表示するときだけ変換する。
- orderBy ・・・ 並び替え。日付順とかアルファベット順とか。
- limitTo ・・・ ループ処理のディレクティブの検索結果10個のうちの3個だけ出すとかできる。
Custom Directive (Component)
- タグとか属性を勝手に作れる。そのAngular版。
- count upをコンポーネント化しようとするとangularだとこうなる。
- angular.module().componentという書き方が1.5から使えるので使って欲しい。
- コンポーネントの中にコントローラを書いて、カウントアップのコードを書く。
- 何が良いかというと、myCounterがHTMLのタグとして使えるようになる。
- 小さいUIコンポーネントの塊を定義しておくことで、自分のアプリで使える。
- 世の中的にはコンポーネントが流行るに連れて、こーゆうのが増えていく。
- Angularとしても覚えていくと使い回しが効く。
Plugin
- AngularUI ・・・ bootstrapを使ったりもできる。Angularのバージョンアップのときに足枷になるので注意。
- Angular Mdules というサイトでプラグインをいっぱい探せる。
- Angularはフルスタックだけど、こーゆう機能ほしいなぁ。でも、自分で作るの面倒なので、プラグイン無いかなぁ、と探す感じ。
ng-japan 2016
- 3/1申込開始。
- http://ngjapan.org/
ハンズオン
ハンズオン題材はこちら。
https://github.com/can-i-do-web/ngTeratail
講演資料で紹介されたAngularの機能を使ってのハンズオンです。
makopi23がハンズオンで書いたコードをGitHubに上げました。
四苦八苦して書いた糞コードです・・・
https://github.com/makopi23/ngTeratail
実行させるとこんな感じです。

先日、社内のAngular勉強会でAngular1.5のコンポーネント機能を紹介したのですが、良い復習になりました。
AngularJS 1.5から入る方はもうdirective覚えずcomponentから覚えてもらったらいいと思います #ng_jp
— はちさん (@armorik83) 2016年2月27日
ハンズオン題材で $scope が一度も登場しないのは斬新でした。Angular2を意識してのことだそうです。
— makopi23 (@makopi23) 2016年2月27日
#ng_jp
質疑応答メモ
エディタ
- エディタはVisual Studio Codeを使うと、ng-なんちゃらとか補完してくれる。
SPA
- SPAはデータの管理が楽。フロントエンド側で完結するので。
- Ajaxが使えると、非同期で画面を一部書き換えられるので、通信を最小限に抑えることができ、レスポンスが早くなる。
Angular vs React
- AngularはRouterがデフォルトで組み込まれている。RouterはURLと描画を結びつける。
- いくつかのページを跨いだアプリはReactよりAngularの方が良い。
Angular 2
- なぜAngularJSの後継としてAngular 2が登場したのか?
- AngularJSはJavaScriptで出来ることだけで工夫するというライブラリ。でも、それだけじゃGoogleの満足じゃない。
- Angular2は、AngularJSの「JS」が名称から外れている。
- TypeScript、ES6、Dartなど、最新の技術を駆使したのがAngular 2。あと、1より高速化している。
- Angular 2は、AngularJSにパッチを当ててる領域じゃないレベルの改変が入っている。
ControllerやComponentの粒度
- Q: JavaScriptのサイズはどのくらい?
- A: ケースバイケース。1ディレクティブで、1ファイル=1モジュールとする。
Angular 2とTypeScript
- Angular 2の開発がTypeScriptで行われている。
- 公式ドキュメントもTypeScriptが多い。
- 個人的にはTypeScriptを使うと安心する。
- でも、Angular2はTypeScript専用ではなく、ES5でもES2015でも行ける。
- ただ、Googleチームで議論したら、TypeScriptで書く、という結論になったらしい。
- ES5は古い仕様で、陳腐化していく。
- ⇒ ES2015でも書けるようにしよう。
- ⇒ それに型を加えたTypeScriptで書けるようにしよう。
- ⇒ 将来、ES2015で書けるようになるならそうしよう。
- Babelを使うくらいならTypeScriptの方が良いかな。
- Angular 2のDIで、TypeScriptだと型を元にDIできる。Type-Based DI。これはBabelでは出来ない。
Directiveの粒度
- Directiveは、一番多くても150程度だった。管理が大変。
- 粒度は、自分の直感を信じて大丈夫。
- ただ、ng-repeatを使っている場合は問題になる。
- ng-repeatの中の要素にDirectiveが3~4個あるとすると、100回の繰り返しでDirectiveが300~400回も使われる。
- Directiveは1回で5ms~10msかかるので、ng-repeatで数秒かかってしまう。
- なので、ng-repeatの中のDirectiveは極力小さくすべし。
Angularの速度
- 普通の使い方をする分には気にしなくて良い。
- 気にしないといけないのは、アニメーションとかレンダリングとか。
- 数msの世界で戦うアプリにはAngularはおすすめしない。
- 多少遅くても、インタラクティブにしたいならば、レスポンシブなCSSを適用してAngularを使えば良い。
- フリックに対して何かのイベントが発火して、のようなスマホ特有のものはAngularオススメ。
- 速度 vs 書きやすさ、で天秤にかける。
- Angularがモバイルに向いてないのは、遅いから。モデルの数に比例して遅くなる。
- Angular 2では速度が劇的に速くなるので、モバイルでもOK。
感想
まず、メンターによるサポートが充実してて、ハンズオンの時はとても助かりました。
やっぱ実際に手を動かして動作させてみるのが一番理解が早くて、楽しいですね。
あと、途中からお酒飲みながら、という進行も良いですね。
最後の懇親会も、いろんな方とAngularについて話す機会は貴重でした。
関係者の皆様、ありがとーございました。