普段Reactを触ってる僕がAngularを触ってみた感想を共有する

K. Matsumura (@zuckey_17)

We Are JavaScripters! :)) #82017.06.05

# 自己紹介

松村 和輝(zuckey_17)

- 株式会社ヤプリ- フロントエンド と サーバサイド- React + Reduxで現行の管理画面をリプレース- Laravel ( PHPのFW ) でAPI周りの実装

- Podcast しがないラジオ- 楽しくて仕方がないラジオ- https://shiganai.org- Twitter @shiganaiRadio #しがないラジオ

# What is Angular ?

- Google が OSS で開発している Webフロントエンドフレームワーク- https://angular.io

- AngularJS → Angular- Angular2以降は”Angular”という呼称に変更- ググる時は “Angular2” で検索すると良いらしい

- 日本Angular ユーザー会- https://ng-japan.slack.com/- https://ngjapan.connpass.com/

# 参加してきた

# “Webフロントエンドのフレームワーク”

- Reactは”UIライブラリ”- それぞれが別のDOM構築やデータバインディングなどの機能を持つ

- Reactは多くの他のライブラリと組み合わせて開発することが多い- 実装するために、設計をしっかりめにする必要がある

- Angularはフレームワークに実装に必要な多くの機能を持っている- レールにのってコーディングすることができる

# React

# React

面倒くさい

# Angular

# Angular に含まれるもの

- Angular本体- routingやhttpクライアントなど様々な機能が包括される

- RxJS- 内部的に使われているためデフォルトで入るが、使わなくても良い

- TypeScript- 静的型付けの言語、JavaScriptにコンパイルされる- tslint

# Angular CLI

- npm install -g @angular/cli

# Angular CLI

- ng new 【project name】- プロジェクトを作成

- ng serve- サーバーを立て、localhost:4200などでアクセス可能に

- ng generate- 依存関係を崩さずに色々作ってくれる

- interface- component- service

- ng lint- tslintの実行

# その他

- CSS- コンポーネントのTS : CSS = 1 : 1- コンポーネント単位でのスタイルが半強制的になっている- グローバルなスタイリングも可

- サービス- ジネスロジックはサービスにまとめる- DI(依存注入 : Dependency Injection)

# その他

- テンプレート- JSXで作られる仮想DOMのツリーじゃない

- Lifecycle Hooks- Reactで言うLifecycle Method- いい感じのタイミングで発火

デモ

# まとめ

- Angularは実現したいことに注力できる

- angular-cli で始めるの一択

- ユーザー会がすごく暖かい

- 今後、RxJSも勉強したい

# 参考

- 公式サイト- 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/