We Are JavaScripters! :)) #8での発表資料です。

1. 普段Reactを触ってる僕が
Angularを触ってみた感想を共有する
K. Matsumura (@zuckey_17)
We Are JavaScripters! :)) #8
2017.06.05

2. # 自己紹介
松村 和輝(zuckey_17)
- 株式会社ヤプリ
- フロントエンド と サーバサイド
- React + Reduxで現行の管理画面をリプレース
- Laravel ( PHPのFW ) でAPI周りの実装
- Podcast しがないラジオ
- 楽しくて仕方がないラジオ
- https://shiganai.org
- Twitter @shiganaiRadio #しがないラジオ

4. # What is Angular ?
- Google が OSS で開発している Webフロントエンドフレームワーク
- https://angular.io
- AngularJS → Angular
- Angular2以降は”Angular”という呼称に変更
- ググる時は “Angular2” で検索すると良いらしい
- 日本Angular ユーザー会
- https://ng-japan.slack.com/
- https://ngjapan.connpass.com/

5. # 参加してきた

6. # “Webフロントエンドのフレームワーク”
- Reactは”UIライブラリ”
- それぞれが別のDOM構築やデータバインディングなどの機能を持つ
- Reactは多くの他のライブラリと組み合わせて開発することが多い
- 実装するために、設計をしっかりめにする必要がある
- Angularはフレームワークに実装に必要な多くの機能を持っている
- レールにのってコーディングすることができる

7. # React

8. # React

9. 面倒くさい

10. # Angular

11. # Angular に含まれるもの
- Angular本体
- routingやhttpクライアントなど様々な機能が包括される
- RxJS
- 内部的に使われているためデフォルトで入るが、使わなくても良い
- TypeScript
- 静的型付けの言語、JavaScriptにコンパイルされる
- tslint

12. # Angular CLI
- npm install -g @angular/cli

13. # Angular CLI
- ng new 【project name】
- プロジェクトを作成
- ng serve
- サーバーを立て、localhost:4200などでアクセス可能に
- ng generate
- 依存関係を崩さずに色々作ってくれる
- interface
- component
- service
- ng lint
- tslintの実行

14. # その他
- CSS
- コンポーネントのTS : CSS = 1 : 1
- コンポーネント単位でのスタイルが半強制的になっている
- グローバルなスタイリングも可
- サービス
- ジネスロジックはサービスにまとめる
- DI(依存注入 : Dependency Injection)

15. # その他
- テンプレート
- JSXで作られる仮想DOMのツリーじゃない
- Lifecycle Hooks
- Reactで言うLifecycle Method
- いい感じのタイミングで発火

16. デモ

17. # まとめ
- Angularは実現したいことに注力できる
- angular-cli で始めるの一択
- ユーザー会がすごく暖かい
- 今後、RxJSも勉強したい

18. # 参考
- 公式サイト
- https://angular.io/
- ReactとAngular2の選択で迷ったときに考えたいこと
- http://qiita.com/kmszk/items/2e3d6d2a71ae774d080a
- Tour of Heroes(Angular 公式チュートリアルの日本語版)
- https://github.com/ng-japan/hands-on/tree/master/courses/tutorial
- gemba.fm #0 React vs Angular - あるいは Functional JavaScript
- https://genba.fm/react-vs-angular/