普段Reactを触ってる僕が Angularを触ってみた感想を共有する
- 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/