fc2ブログ

makopi23のブログ

makopi23が日々の生活で感じたことを気ままに綴るブログです。

「AngularJS入門者向けハンズオン」に参加しました

2016/2/27(土) 「AngularJS入門者向けハンズオン」に参加してきました。

connpass
http://connpass.com/event/25154/

場所は渋谷ヒカリエのレバレジーズ本社です。
参加者は６０人くらいかな。

先日、Angular2勉強会の勉強会に参加してブログに書きました。
「第1回Angular2勉強会 #ng2Curry」に参加しました

この日は↑の３日後の、また別の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個のうちの３個だけ出すとかできる。

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

実行させるとこんな感じです。
20160227_ngTeratail1.jpg

先日、社内のAngular勉強会でAngular1.5のコンポーネント機能を紹介したのですが、良い復習になりました。






質疑応答メモ


エディタ
  • エディタは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ディレクティブで、１ファイル=１モジュールとする。

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について話す機会は貴重でした。

関係者の皆様、ありがとーございました。

-->