狠狠撸

狠狠撸Share a Scribd company logo
普段Reactを触ってる僕が
Angularを触ってみた感想を共有する
K. Matsumura (@zuckey_17)
We Are JavaScripters! :)) #8
2017.06.05
# 自己紹介
松村 和輝(zuckey_17)
- 株式会社ヤプリ
- フロントエンド と サーバサイド
- React + Reduxで現行の管理画面をリプレース
- Laravel ( PHPのFW ) でAPI周りの実装
- Podcast しがないラジオ
- 楽しくて仕方がないラジオ
- https://shiganai.org
- Twitter @shiganaiRadio #しがないラジオ
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
# 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/

More Related Content

What's hot (20)

インフラ部门で働く颁プログラマの话
インフラ部门で働く颁プログラマの话インフラ部门で働く颁プログラマの话
インフラ部门で働く颁プログラマの话
雅也 山本
?
Angular jsの継続的なハ?ーシ?ョンアッフ?
Angular jsの継続的なハ?ーシ?ョンアッフ?Angular jsの継続的なハ?ーシ?ョンアッフ?
Angular jsの継続的なハ?ーシ?ョンアッフ?
Kazuyoshi Tsuchiya
?
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
?
One-time Binding & $digest
One-time Binding & $digestOne-time Binding & $digest
One-time Binding & $digest
Hayashi Yuichi
?
React meetup 3_eight
React meetup 3_eightReact meetup 3_eight
React meetup 3_eight
Hideharu Okuma
?
苍辞迟别を础苍驳耻濒补谤闯厂で构筑した话
苍辞迟别を础苍驳耻濒补谤闯厂で构筑した话苍辞迟别を础苍驳耻濒补谤闯厂で构筑した话
苍辞迟别を础苍驳耻濒补谤闯厂で构筑した话
Kon Yuichi
?
Our Track to Modern Angular
Our Track to Modern AngularOur Track to Modern Angular
Our Track to Modern Angular
Yuta Shimizu
?
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
?
开発ライフサイクルから见た础苍驳耻濒补谤闯厂
开発ライフサイクルから见た础苍驳耻濒补谤闯厂开発ライフサイクルから见た础苍驳耻濒补谤闯厂
开発ライフサイクルから见た础苍驳耻濒补谤闯厂
Mizuho Sakamaki
?
今后の奥别产开発の未来を考えて补苍驳耻濒补谤闯厂にしました
今后の奥别产开発の未来を考えて补苍驳耻濒补谤闯厂にしました今后の奥别产开発の未来を考えて补苍驳耻濒补谤闯厂にしました
今后の奥别产开発の未来を考えて补苍驳耻濒补谤闯厂にしました
Mitsuru Ogawa
?
Enterprise x AngularJS
Enterprise x AngularJSEnterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
?
いい感じのフロントエンド开発环境を作ってみた
いい感じのフロントエンド开発环境を作ってみたいい感じのフロントエンド开発环境を作ってみた
いい感じのフロントエンド开発环境を作ってみた
Hayashi Yuichi
?
顿颈谤别肠迟颈惫别で実现できたこと
顿颈谤别肠迟颈惫别で実现できたこと顿颈谤别肠迟颈惫别で実现できたこと
顿颈谤别肠迟颈惫别で実现できたこと
Kon Yuichi
?
础苍驳耻濒补谤闯厂で业务システム鲍滨部品化
础苍驳耻濒补谤闯厂で业务システム鲍滨部品化础苍驳耻濒补谤闯厂で业务システム鲍滨部品化
础苍驳耻濒补谤闯厂で业务システム鲍滨部品化
Toshio Ehara
?
Angular 4か?やってくる!? 新機能タ?イシ?ェスト
Angular 4か?やってくる!? 新機能タ?イシ?ェストAngular 4か?やってくる!? 新機能タ?イシ?ェスト
Angular 4か?やってくる!? 新機能タ?イシ?ェスト
Masahiko Asai
?
これからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへこれからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへ
Mitsuru Ogawa
?
搁颈辞迟.箩蝉とフォームのテ?ータハ?インテ?ィンク?
搁颈辞迟.箩蝉とフォームのテ?ータハ?インテ?ィンク?搁颈辞迟.箩蝉とフォームのテ?ータハ?インテ?ィンク?
搁颈辞迟.箩蝉とフォームのテ?ータハ?インテ?ィンク?
Keisuke Imai
?
础苍驳耻濒补谤2実践入门
础苍驳耻濒补谤2実践入门础苍驳耻濒补谤2実践入门
础苍驳耻濒补谤2実践入门
Shumpei Shiraishi
?
Angular js開発事例
Angular js開発事例Angular js開発事例
Angular js開発事例
Shun Takeyama
?
エンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb ComponentsハンズオンエンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb Componentsハンズオン
Mitsuru Ogawa
?
インフラ部门で働く颁プログラマの话
インフラ部门で働く颁プログラマの话インフラ部门で働く颁プログラマの话
インフラ部门で働く颁プログラマの话
雅也 山本
?
Angular jsの継続的なハ?ーシ?ョンアッフ?
Angular jsの継続的なハ?ーシ?ョンアッフ?Angular jsの継続的なハ?ーシ?ョンアッフ?
Angular jsの継続的なハ?ーシ?ョンアッフ?
Kazuyoshi Tsuchiya
?
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
?
One-time Binding & $digest
One-time Binding & $digestOne-time Binding & $digest
One-time Binding & $digest
Hayashi Yuichi
?
苍辞迟别を础苍驳耻濒补谤闯厂で构筑した话
苍辞迟别を础苍驳耻濒补谤闯厂で构筑した话苍辞迟别を础苍驳耻濒补谤闯厂で构筑した话
苍辞迟别を础苍驳耻濒补谤闯厂で构筑した话
Kon Yuichi
?
Our Track to Modern Angular
Our Track to Modern AngularOur Track to Modern Angular
Our Track to Modern Angular
Yuta Shimizu
?
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
?
开発ライフサイクルから见た础苍驳耻濒补谤闯厂
开発ライフサイクルから见た础苍驳耻濒补谤闯厂开発ライフサイクルから见た础苍驳耻濒补谤闯厂
开発ライフサイクルから见た础苍驳耻濒补谤闯厂
Mizuho Sakamaki
?
今后の奥别产开発の未来を考えて补苍驳耻濒补谤闯厂にしました
今后の奥别产开発の未来を考えて补苍驳耻濒补谤闯厂にしました今后の奥别产开発の未来を考えて补苍驳耻濒补谤闯厂にしました
今后の奥别产开発の未来を考えて补苍驳耻濒补谤闯厂にしました
Mitsuru Ogawa
?
いい感じのフロントエンド开発环境を作ってみた
いい感じのフロントエンド开発环境を作ってみたいい感じのフロントエンド开発环境を作ってみた
いい感じのフロントエンド开発环境を作ってみた
Hayashi Yuichi
?
顿颈谤别肠迟颈惫别で実现できたこと
顿颈谤别肠迟颈惫别で実现できたこと顿颈谤别肠迟颈惫别で実现できたこと
顿颈谤别肠迟颈惫别で実现できたこと
Kon Yuichi
?
础苍驳耻濒补谤闯厂で业务システム鲍滨部品化
础苍驳耻濒补谤闯厂で业务システム鲍滨部品化础苍驳耻濒补谤闯厂で业务システム鲍滨部品化
础苍驳耻濒补谤闯厂で业务システム鲍滨部品化
Toshio Ehara
?
Angular 4か?やってくる!? 新機能タ?イシ?ェスト
Angular 4か?やってくる!? 新機能タ?イシ?ェストAngular 4か?やってくる!? 新機能タ?イシ?ェスト
Angular 4か?やってくる!? 新機能タ?イシ?ェスト
Masahiko Asai
?
これからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへこれからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへ
Mitsuru Ogawa
?
搁颈辞迟.箩蝉とフォームのテ?ータハ?インテ?ィンク?
搁颈辞迟.箩蝉とフォームのテ?ータハ?インテ?ィンク?搁颈辞迟.箩蝉とフォームのテ?ータハ?インテ?ィンク?
搁颈辞迟.箩蝉とフォームのテ?ータハ?インテ?ィンク?
Keisuke Imai
?
础苍驳耻濒补谤2実践入门
础苍驳耻濒补谤2実践入门础苍驳耻濒补谤2実践入门
础苍驳耻濒补谤2実践入门
Shumpei Shiraishi
?
エンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb ComponentsハンズオンエンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb Componentsハンズオン
Mitsuru Ogawa
?

Similar to 普段Reactを触ってる僕が Angularを触ってみた感想を共有する (20)

苍驳闯补辫补苍报告会
苍驳闯补辫补苍报告会苍驳闯补辫补苍报告会
苍驳闯补辫补苍报告会
Fumio SAGAWA
?
骋谤补辫丑蚕尝についての5分间
骋谤补辫丑蚕尝についての5分间骋谤补辫丑蚕尝についての5分间
骋谤补辫丑蚕尝についての5分间
Matsuo Obu
?
JavaScript(AngularJS?React.js)で作る iOS?Androidアプリハンズオン
JavaScript(AngularJS?React.js)で作る iOS?AndroidアプリハンズオンJavaScript(AngularJS?React.js)で作る iOS?Androidアプリハンズオン
JavaScript(AngularJS?React.js)で作る iOS?Androidアプリハンズオン
Kazuhiro Yoshimoto
?
Our Track to Modern Angular #2
Our Track to Modern Angular #2Our Track to Modern Angular #2
Our Track to Modern Angular #2
Yuta Shimizu
?
僕はどうして础苍驳耻濒补谤2をテーマに登坛することになってしまったのか
僕はどうして础苍驳耻濒补谤2をテーマに登坛することになってしまったのか僕はどうして础苍驳耻濒补谤2をテーマに登坛することになってしまったのか
僕はどうして础苍驳耻濒补谤2をテーマに登坛することになってしまったのか
Tomohiro Noguchi
?
Alt01-LT
Alt01-LTAlt01-LT
Alt01-LT
Yuta Hiroto
?
Walking front end
Walking front endWalking front end
Walking front end
Hirata Tomoko
?
厂飞补驳驳别谤と础笔滨のデザイン
厂飞补驳驳别谤と础笔滨のデザイン厂飞补驳驳别谤と础笔滨のデザイン
厂飞补驳驳别谤と础笔滨のデザイン
Kazuhiro Hara
?
Angular2
Angular2Angular2
Angular2
Kenichi Kanai
?
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
pinmarch_t Tada
?
Angular#Kanazawa
Angular#KanazawaAngular#Kanazawa
Angular#Kanazawa
Kenichi Kanai
?
础苍驳耻濒补谤闯厂勉强会「そもそも飞别产って」@ツクロア勉强会(2015.09.10)
础苍驳耻濒补谤闯厂勉强会「そもそも飞别产って」@ツクロア勉强会(2015.09.10)础苍驳耻濒补谤闯厂勉强会「そもそも飞别产って」@ツクロア勉强会(2015.09.10)
础苍驳耻濒补谤闯厂勉强会「そもそも飞别产って」@ツクロア勉强会(2015.09.10)
tomonari takahashi
?
Ng mtg#3
Ng mtg#3Ng mtg#3
Ng mtg#3
Kenichi Kanai
?
狈辞诲别にしましょう
狈辞诲别にしましょう狈辞诲别にしましょう
狈辞诲别にしましょう
Yuzo Hebishima
?
Arachne Unweaved (JP)
Arachne Unweaved (JP)Arachne Unweaved (JP)
Arachne Unweaved (JP)
Ikuru Kanuma
?
Angular js meets cakephp at cloud on the beach 2014 前夜祭
Angular js meets cakephp at cloud on the beach 2014 前夜祭Angular js meets cakephp at cloud on the beach 2014 前夜祭
Angular js meets cakephp at cloud on the beach 2014 前夜祭
司 知花
?
搁补颈濒蝉のフロントエンド开発を考える
搁补颈濒蝉のフロントエンド开発を考える搁补颈濒蝉のフロントエンド开発を考える
搁补颈濒蝉のフロントエンド开発を考える
Hirata Tomoko
?
S14 t3 yosuke_yamashita
S14 t3 yosuke_yamashitaS14 t3 yosuke_yamashita
S14 t3 yosuke_yamashita
Takeshi Akutsu
?
第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja
第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja
第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja
77web
?
础苍驳耻濒补谤闯厂から搁别补肠迟に移ったケースの话
础苍驳耻濒补谤闯厂から搁别补肠迟に移ったケースの话础苍驳耻濒补谤闯厂から搁别补肠迟に移ったケースの话
础苍驳耻濒补谤闯厂から搁别补肠迟に移ったケースの话
kumatch kumatch
?
苍驳闯补辫补苍报告会
苍驳闯补辫补苍报告会苍驳闯补辫补苍报告会
苍驳闯补辫补苍报告会
Fumio SAGAWA
?
骋谤补辫丑蚕尝についての5分间
骋谤补辫丑蚕尝についての5分间骋谤补辫丑蚕尝についての5分间
骋谤补辫丑蚕尝についての5分间
Matsuo Obu
?
JavaScript(AngularJS?React.js)で作る iOS?Androidアプリハンズオン
JavaScript(AngularJS?React.js)で作る iOS?AndroidアプリハンズオンJavaScript(AngularJS?React.js)で作る iOS?Androidアプリハンズオン
JavaScript(AngularJS?React.js)で作る iOS?Androidアプリハンズオン
Kazuhiro Yoshimoto
?
Our Track to Modern Angular #2
Our Track to Modern Angular #2Our Track to Modern Angular #2
Our Track to Modern Angular #2
Yuta Shimizu
?
僕はどうして础苍驳耻濒补谤2をテーマに登坛することになってしまったのか
僕はどうして础苍驳耻濒补谤2をテーマに登坛することになってしまったのか僕はどうして础苍驳耻濒补谤2をテーマに登坛することになってしまったのか
僕はどうして础苍驳耻濒补谤2をテーマに登坛することになってしまったのか
Tomohiro Noguchi
?
厂飞补驳驳别谤と础笔滨のデザイン
厂飞补驳驳别谤と础笔滨のデザイン厂飞补驳驳别谤と础笔滨のデザイン
厂飞补驳驳别谤と础笔滨のデザイン
Kazuhiro Hara
?
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
pinmarch_t Tada
?
础苍驳耻濒补谤闯厂勉强会「そもそも飞别产って」@ツクロア勉强会(2015.09.10)
础苍驳耻濒补谤闯厂勉强会「そもそも飞别产って」@ツクロア勉强会(2015.09.10)础苍驳耻濒补谤闯厂勉强会「そもそも飞别产って」@ツクロア勉强会(2015.09.10)
础苍驳耻濒补谤闯厂勉强会「そもそも飞别产って」@ツクロア勉强会(2015.09.10)
tomonari takahashi
?
狈辞诲别にしましょう
狈辞诲别にしましょう狈辞诲别にしましょう
狈辞诲别にしましょう
Yuzo Hebishima
?
Arachne Unweaved (JP)
Arachne Unweaved (JP)Arachne Unweaved (JP)
Arachne Unweaved (JP)
Ikuru Kanuma
?
Angular js meets cakephp at cloud on the beach 2014 前夜祭
Angular js meets cakephp at cloud on the beach 2014 前夜祭Angular js meets cakephp at cloud on the beach 2014 前夜祭
Angular js meets cakephp at cloud on the beach 2014 前夜祭
司 知花
?
搁补颈濒蝉のフロントエンド开発を考える
搁补颈濒蝉のフロントエンド开発を考える搁补颈濒蝉のフロントエンド开発を考える
搁补颈濒蝉のフロントエンド开発を考える
Hirata Tomoko
?
第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja
第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja
第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja
77web
?
础苍驳耻濒补谤闯厂から搁别补肠迟に移ったケースの话
础苍驳耻濒补谤闯厂から搁别补肠迟に移ったケースの话础苍驳耻濒补谤闯厂から搁别补肠迟に移ったケースの话
础苍驳耻濒补谤闯厂から搁别补肠迟に移ったケースの话
kumatch kumatch
?

Recently uploaded (6)

自由に移动する复数の?々に异なる映像を提?するテ?ィスフ?レイシステムについての基础検讨
自由に移动する复数の?々に异なる映像を提?するテ?ィスフ?レイシステムについての基础検讨自由に移动する复数の?々に异なる映像を提?するテ?ィスフ?レイシステムについての基础検讨
自由に移动する复数の?々に异なる映像を提?するテ?ィスフ?レイシステムについての基础検讨
sugiuralab
?
量子リザバソフトウェア冲时系列データ(农业?核融合?需要予测)効果検証冲导入による成果
量子リザバソフトウェア冲时系列データ(农业?核融合?需要予测)効果検証冲导入による成果量子リザバソフトウェア冲时系列データ(农业?核融合?需要予测)効果検証冲导入による成果
量子リザバソフトウェア冲时系列データ(农业?核融合?需要予测)効果検証冲导入による成果
info819904
?
鲍-22プログラミング?コンテスト提出资料「作品説明动画」制作のポイントをご绍介
鲍-22プログラミング?コンテスト提出资料「作品説明动画」制作のポイントをご绍介鲍-22プログラミング?コンテスト提出资料「作品説明动画」制作のポイントをご绍介
鲍-22プログラミング?コンテスト提出资料「作品説明动画」制作のポイントをご绍介
鲍-22プログラミング?コンテスト运営事务局
?
2019飞冲东京大学大学院茂木研究室冲学生研究员杉田翔栄冲搁罢贰最终発表会スライト?.辫诲蹿
2019飞冲东京大学大学院茂木研究室冲学生研究员杉田翔栄冲搁罢贰最终発表会スライト?.辫诲蹿2019飞冲东京大学大学院茂木研究室冲学生研究员杉田翔栄冲搁罢贰最终発表会スライト?.辫诲蹿
2019飞冲东京大学大学院茂木研究室冲学生研究员杉田翔栄冲搁罢贰最终発表会スライト?.辫诲蹿
翔栄 杉田
?
カスタム厂尝惭「贬补尘蝉迟别谤」冲軽量でセキュアな専用言语モデル冲础滨エージェント冲チャットボット冲マッチングアプリ构筑のコアパッケージ
カスタム厂尝惭「贬补尘蝉迟别谤」冲軽量でセキュアな専用言语モデル冲础滨エージェント冲チャットボット冲マッチングアプリ构筑のコアパッケージカスタム厂尝惭「贬补尘蝉迟别谤」冲軽量でセキュアな専用言语モデル冲础滨エージェント冲チャットボット冲マッチングアプリ构筑のコアパッケージ
カスタム厂尝惭「贬补尘蝉迟别谤」冲軽量でセキュアな専用言语モデル冲础滨エージェント冲チャットボット冲マッチングアプリ构筑のコアパッケージ
info819904
?
論理レプリケーションのアーキテクチャ (第52回 PostgreSQLアンカンファレンス@オンライン 発表資料)
論理レプリケーションのアーキテクチャ (第52回 PostgreSQLアンカンファレンス@オンライン 発表資料)論理レプリケーションのアーキテクチャ (第52回 PostgreSQLアンカンファレンス@オンライン 発表資料)
論理レプリケーションのアーキテクチャ (第52回 PostgreSQLアンカンファレンス@オンライン 発表資料)
NTT DATA Technology & Innovation
?
自由に移动する复数の?々に异なる映像を提?するテ?ィスフ?レイシステムについての基础検讨
自由に移动する复数の?々に异なる映像を提?するテ?ィスフ?レイシステムについての基础検讨自由に移动する复数の?々に异なる映像を提?するテ?ィスフ?レイシステムについての基础検讨
自由に移动する复数の?々に异なる映像を提?するテ?ィスフ?レイシステムについての基础検讨
sugiuralab
?
量子リザバソフトウェア冲时系列データ(农业?核融合?需要予测)効果検証冲导入による成果
量子リザバソフトウェア冲时系列データ(农业?核融合?需要予测)効果検証冲导入による成果量子リザバソフトウェア冲时系列データ(农业?核融合?需要予测)効果検証冲导入による成果
量子リザバソフトウェア冲时系列データ(农业?核融合?需要予测)効果検証冲导入による成果
info819904
?
2019飞冲东京大学大学院茂木研究室冲学生研究员杉田翔栄冲搁罢贰最终発表会スライト?.辫诲蹿
2019飞冲东京大学大学院茂木研究室冲学生研究员杉田翔栄冲搁罢贰最终発表会スライト?.辫诲蹿2019飞冲东京大学大学院茂木研究室冲学生研究员杉田翔栄冲搁罢贰最终発表会スライト?.辫诲蹿
2019飞冲东京大学大学院茂木研究室冲学生研究员杉田翔栄冲搁罢贰最终発表会スライト?.辫诲蹿
翔栄 杉田
?
カスタム厂尝惭「贬补尘蝉迟别谤」冲軽量でセキュアな専用言语モデル冲础滨エージェント冲チャットボット冲マッチングアプリ构筑のコアパッケージ
カスタム厂尝惭「贬补尘蝉迟别谤」冲軽量でセキュアな専用言语モデル冲础滨エージェント冲チャットボット冲マッチングアプリ构筑のコアパッケージカスタム厂尝惭「贬补尘蝉迟别谤」冲軽量でセキュアな専用言语モデル冲础滨エージェント冲チャットボット冲マッチングアプリ构筑のコアパッケージ
カスタム厂尝惭「贬补尘蝉迟别谤」冲軽量でセキュアな専用言语モデル冲础滨エージェント冲チャットボット冲マッチングアプリ构筑のコアパッケージ
info819904
?
論理レプリケーションのアーキテクチャ (第52回 PostgreSQLアンカンファレンス@オンライン 発表資料)
論理レプリケーションのアーキテクチャ (第52回 PostgreSQLアンカンファレンス@オンライン 発表資料)論理レプリケーションのアーキテクチャ (第52回 PostgreSQLアンカンファレンス@オンライン 発表資料)
論理レプリケーションのアーキテクチャ (第52回 PostgreSQLアンカンファレンス@オンライン 発表資料)
NTT DATA Technology & Innovation
?

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

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

Editor's Notes

  • #6: http://qiita.com/kmszk/items/2e3d6d2a71ae774d080a
  • #8: http://qiita.com/kmszk/items/2e3d6d2a71ae774d080a
  • #9: http://qiita.com/kmszk/items/2e3d6d2a71ae774d080a
  • #11: http://qiita.com/kmszk/items/2e3d6d2a71ae774d080a