Soumettre la recherche
Mettre en ligne
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
•
96 j'aime
•
75,891 vues
Kohei Asai
Suivre
2015/05/27にLINE社で行われた、Data Binding JS Nightでの発表内容です。
Lire moins
Lire la suite
Ingénierie
Signaler
Partager
Signaler
Partager
1 sur 29
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
dcubeio
REST API のコツ
REST API のコツ
pospome
Python 3のWebシステムでDDDに入門してみた
Python 3のWebシステムでDDDに入門してみた
Hiromu Yakura
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
Recommandé
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
dcubeio
REST API のコツ
REST API のコツ
pospome
Python 3のWebシステムでDDDに入門してみた
Python 3のWebシステムでDDDに入門してみた
Hiromu Yakura
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
Agile Quality アジャイル品質パターン (QA2AQ)
Agile Quality アジャイル品質パターン (QA2AQ)
Hironori Washizaki
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
Itsuki Kuroda
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
土岐 孝平
Power BI のいろいろな活用パターン
Power BI のいろいろな活用パターン
Yugo Shimizu
アジャイル開発のストーリーをGherkin記法で作成
アジャイル開発のストーリーをGherkin記法で作成
Shinya Nakajima
Python におけるドメイン駆動設計(戦術面)の勘どころ
Python におけるドメイン駆動設計(戦術面)の勘どころ
Junya Hayashi
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意
Yoshitaka Kawashima
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
pospome
データ履歴管理のためのテンポラルデータモデルとReladomoの紹介 #jjug_ccc #ccc_g3
データ履歴管理のためのテンポラルデータモデルとReladomoの紹介 #jjug_ccc #ccc_g3
Hiroshi Ito
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。
日本マイクロソフト株式会社
インフラエンジニアってなんでしたっけ(仮)
インフラエンジニアってなんでしたっけ(仮)
Akihiro Kuwano
振り返り(アジャイルレトロスペクティブズ)
振り返り(アジャイルレトロスペクティブズ)
Keisuke Tameyasu
テストとリファクタリングに関する深い方法論 #wewlc_jp
テストとリファクタリングに関する深い方法論 #wewlc_jp
kyon mm
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
Koichiro Matsuoka
グルーミングしながら進めるプロダクト開発
グルーミングしながら進めるプロダクト開発
Takafumi ONAKA
メトリクスによるソフトウェア品質把握と改善- 演習を交えた品質測定評価の落とし穴とコツの習得 -
メトリクスによるソフトウェア品質把握と改善- 演習を交えた品質測定評価の落とし穴とコツの習得 -
Hironori Washizaki
人は1ヶ月でエンジニアになれるのか
人は1ヶ月でエンジニアになれるのか
Yamaura Kiyoto
ワタシはSingletonがキライだ
ワタシはSingletonがキライだ
Tetsuya Kaneuchi
「速」を落とさないコードレビュー
「速」を落とさないコードレビュー
Takafumi ONAKA
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Kei Yagi
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
Contenu connexe
Tendances
Agile Quality アジャイル品質パターン (QA2AQ)
Agile Quality アジャイル品質パターン (QA2AQ)
Hironori Washizaki
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
Itsuki Kuroda
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
土岐 孝平
Power BI のいろいろな活用パターン
Power BI のいろいろな活用パターン
Yugo Shimizu
アジャイル開発のストーリーをGherkin記法で作成
アジャイル開発のストーリーをGherkin記法で作成
Shinya Nakajima
Python におけるドメイン駆動設計(戦術面)の勘どころ
Python におけるドメイン駆動設計(戦術面)の勘どころ
Junya Hayashi
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意
Yoshitaka Kawashima
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
pospome
データ履歴管理のためのテンポラルデータモデルとReladomoの紹介 #jjug_ccc #ccc_g3
データ履歴管理のためのテンポラルデータモデルとReladomoの紹介 #jjug_ccc #ccc_g3
Hiroshi Ito
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。
日本マイクロソフト株式会社
インフラエンジニアってなんでしたっけ(仮)
インフラエンジニアってなんでしたっけ(仮)
Akihiro Kuwano
振り返り(アジャイルレトロスペクティブズ)
振り返り(アジャイルレトロスペクティブズ)
Keisuke Tameyasu
テストとリファクタリングに関する深い方法論 #wewlc_jp
テストとリファクタリングに関する深い方法論 #wewlc_jp
kyon mm
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
Koichiro Matsuoka
グルーミングしながら進めるプロダクト開発
グルーミングしながら進めるプロダクト開発
Takafumi ONAKA
メトリクスによるソフトウェア品質把握と改善- 演習を交えた品質測定評価の落とし穴とコツの習得 -
メトリクスによるソフトウェア品質把握と改善- 演習を交えた品質測定評価の落とし穴とコツの習得 -
Hironori Washizaki
人は1ヶ月でエンジニアになれるのか
人は1ヶ月でエンジニアになれるのか
Yamaura Kiyoto
ワタシはSingletonがキライだ
ワタシはSingletonがキライだ
Tetsuya Kaneuchi
「速」を落とさないコードレビュー
「速」を落とさないコードレビュー
Takafumi ONAKA
Tendances
(20)
Agile Quality アジャイル品質パターン (QA2AQ)
Agile Quality アジャイル品質パターン (QA2AQ)
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
Power BI のいろいろな活用パターン
Power BI のいろいろな活用パターン
アジャイル開発のストーリーをGherkin記法で作成
アジャイル開発のストーリーをGherkin記法で作成
Python におけるドメイン駆動設計(戦術面)の勘どころ
Python におけるドメイン駆動設計(戦術面)の勘どころ
Redisの特徴と活用方法について
Redisの特徴と活用方法について
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
データ履歴管理のためのテンポラルデータモデルとReladomoの紹介 #jjug_ccc #ccc_g3
データ履歴管理のためのテンポラルデータモデルとReladomoの紹介 #jjug_ccc #ccc_g3
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。
インフラエンジニアってなんでしたっけ(仮)
インフラエンジニアってなんでしたっけ(仮)
振り返り(アジャイルレトロスペクティブズ)
振り返り(アジャイルレトロスペクティブズ)
テストとリファクタリングに関する深い方法論 #wewlc_jp
テストとリファクタリングに関する深い方法論 #wewlc_jp
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
グルーミングしながら進めるプロダクト開発
グルーミングしながら進めるプロダクト開発
メトリクスによるソフトウェア品質把握と改善- 演習を交えた品質測定評価の落とし穴とコツの習得 -
メトリクスによるソフトウェア品質把握と改善- 演習を交えた品質測定評価の落とし穴とコツの習得 -
人は1ヶ月でエンジニアになれるのか
人は1ヶ月でエンジニアになれるのか
ワタシはSingletonがキライだ
ワタシはSingletonがキライだ
「速」を落とさないコードレビュー
「速」を落とさないコードレビュー
En vedette
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Kei Yagi
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
Kazuhiro Hara
JustTechTalk#10 React開発における自動テスト実践
JustTechTalk#10 React開発における自動テスト実践
JustSystems Corporation
JustTechTalk#10windowsアプリでのテスト自動化事例
JustTechTalk#10windowsアプリでのテスト自動化事例
JustSystems Corporation
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
Carol Smith
En vedette
(7)
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
React を導入したフロントエンド開発
React を導入したフロントエンド開発
今からでも遅くない! React事始め
今からでも遅くない! React事始め
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
JustTechTalk#10 React開発における自動テスト実践
JustTechTalk#10 React開発における自動テスト実践
JustTechTalk#10windowsアプリでのテスト自動化事例
JustTechTalk#10windowsアプリでのテスト自動化事例
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
Similaire à コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
RestKitの紹介 - Webサービスのクライアント実装補助フレームワーク -
RestKitの紹介 - Webサービスのクライアント実装補助フレームワーク -
次朗 永島
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
TanUkkii
Om Next ~React.jsを超えて
Om Next ~React.jsを超えて
Kazuki Tsutsumi
Intoroduction to React.js
Intoroduction to React.js
Yuto Matsukubo
Javaヂカラ #Java最新動向 -Java 11 の新機能やOracle Code One 2018 発の最新技術トレンドを一気にキャッチアップ-
Javaヂカラ #Java最新動向 -Java 11 の新機能やOracle Code One 2018 発の最新技術トレンドを一気にキャッチアップ-
PE-BANK
Java EE8 Report
Java EE8 Report
Norito Agetsuma
さわってみようReact.js、AngularJS(1系、2系)
さわってみようReact.js、AngularJS(1系、2系)
Kazuhiro Yoshimoto
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
Hideki Hashizume
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
normalian
Sansan様 登壇資料
Sansan様 登壇資料
Daisuke Nagata
Elasticsearchの基本動作まとめ
Elasticsearchの基本動作まとめ
朋哉 池田
SimpleModeler
SimpleModeler
Tomoharu ASAMI
Grails 2.0.0.M1の話
Grails 2.0.0.M1の話
Tsuyoshi Yamamoto
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
WESEEKWESEEK
20141017 introduce razor
20141017 introduce razor
do_aki
Mithril - 軽量/高速なMVCフレームワーク
Mithril - 軽量/高速なMVCフレームワーク
sairoutine
RxJava on Android
RxJava on Android
yo_waka
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
Osamu Monoe
linq.js - Linq to Objects for JavaScript
linq.js - Linq to Objects for JavaScript
Yoshifumi Kawai
第4回REST勉強会 RequireJS編
第4回REST勉強会 RequireJS編
ksimoji
Similaire à コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
(20)
RestKitの紹介 - Webサービスのクライアント実装補助フレームワーク -
RestKitの紹介 - Webサービスのクライアント実装補助フレームワーク -
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
Om Next ~React.jsを超えて
Om Next ~React.jsを超えて
Intoroduction to React.js
Intoroduction to React.js
Javaヂカラ #Java最新動向 -Java 11 の新機能やOracle Code One 2018 発の最新技術トレンドを一気にキャッチアップ-
Javaヂカラ #Java最新動向 -Java 11 の新機能やOracle Code One 2018 発の最新技術トレンドを一気にキャッチアップ-
Java EE8 Report
Java EE8 Report
さわってみようReact.js、AngularJS(1系、2系)
さわってみようReact.js、AngularJS(1系、2系)
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
Sansan様 登壇資料
Sansan様 登壇資料
Elasticsearchの基本動作まとめ
Elasticsearchの基本動作まとめ
SimpleModeler
SimpleModeler
Grails 2.0.0.M1の話
Grails 2.0.0.M1の話
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
20141017 introduce razor
20141017 introduce razor
Mithril - 軽量/高速なMVCフレームワーク
Mithril - 軽量/高速なMVCフレームワーク
RxJava on Android
RxJava on Android
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
linq.js - Linq to Objects for JavaScript
linq.js - Linq to Objects for JavaScript
第4回REST勉強会 RequireJS編
第4回REST勉強会 RequireJS編
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
1.
コンポーネント指向 による、Reactの ベストプラクティスと バッドプラクティス @axross Data Binding JS
Night
2.
Hi :) • Kohei
Asai • @axross • Software Engineer • React.js, express.js
3.
コンポーネント指向
4.
コンポーネント指向を推奨
5.
ReactのにおけるComponent const SomeComponent =
React.createClass({ render() { return ( <div> <span>{this.state.valueA}</span> <span>{this.props.valueB}</span> </div> ); }, }); 内部状態 外からの値 Component = DOMとJSのセット、UI部品
6.
値 -> DOM
変換器 • stateを使わず、propsを使うようにすれば、 Componentは「値 -> DOM 変換器」になる Componentprops DOM ( or Virtual DOM)
7.
JSがDOMを支配する世界 • XHRとHistory APIでSPAが可能になった •
すべての状態をJavaScriptが管理できる • JavaScriptがDOMを支配する世界
8.
Data-bindedな「DOM」とは • データバインドされたすべてのDOMは、 JavaScriptの値によって吐き出される • ならば、DOMはコンパイル結果物 •
データバインディングの嬉しさはここにある
9.
Reactの思想から逆算する ベストプラクティスと バッドプラクティス
10.
コンポーネント指向 3つの法則 • 値をDOMに変換する装置であることを徹する •
再利用されることを前提にする • コンポーネントとそうでないものを明確に分 ける
11.
値をDOMに変換する装置 であることを徹する
12.
冪等性を守る • 通常は「値 ->
DOM 変換器」であるはず • 受け入れた値が同じであれば、吐き出される DOMは常に同じはず • つまり、冪等性があるはず
13.
余計な仕事はさせない • それ以上の仕事をさせると、犠牲を生む • 必要以上なstateの保持・利用 •
コンポーネントの中でXHR • = 冪等性を失う • = 疎結合ではなくなる
14.
必要以上に状態を持たせない • 必要以上に状態を持たせると • 同じ値を外から与えたとしても、吐き出さ れるDOMが違うものになる可能性がある •
= テストが困難になる
15.
副作用のある行為を含めない • 副作用のある行為はコンポーネントの外ですべき • XHR、Web
Storageへのアクセスなど • FluxのStoreをsubscribeするなど • = 結果的に状態を持ってしまう • = 依存が増え、テストが困難になる
16.
コンポーネントが再利用 されることを前提にする
17.
componentDidMountに注意 • componentDidMountで、writeな作用のある Flux Actionを呼んでいる •
コンポーネントをmountしただけで、 他のコンポーネントに作用してしまう • = コンポーネントの副作用
18.
「どう使うか」は「使う時」に • コンポーネント自体の位置やサイズを指定す るCSSもよろしくない • それは「コンポーネントをどう使うか」と いう話であって、「コンポーネントの定義」 とはコンテキストが異なってしまう •
= 別の場所にそのまま置けない
19.
コンポーネントと そうでないものを 明確に分ける
20.
「そうでないもの」も必要 • 冪等性のあるコンポーネントのみでクライア ントサイドのアプリケーションは作れない • 誰かが状態を持ったり、XHRする必要がある •
無理のないように設計するには、 「そうでないもの」も必要
21.
テスト可能範囲を広げるために • Componentの親となる層は諦める • 状態を持ち、Flux
Storeをsubscribeする • コンポーネントにpropsを渡す • ユニットテストが不可能な唯一の存在 • = 代わりに他のすべてのテストが容易になる
22.
CSS設計へのアンサー
23.
単位を合わせる • 1 コンポーネント
= 1 BEM Blockとかにする • ファイル名、セレクタ名も合わせる • 名前の競合が防がれる • 他のセレクタへの依存や影響がなくなる • = カジュアルに削除できる・再利用できる
24.
まとめ
25.
Reactとコンポーネント • Reactはコンポーネント指向 • コンポーネントは、値
-> DOM 変換器 として 機能する
26.
コンポーネント指向 3つの法則 • 値
-> DOM 変換器 であることを徹する • 再利用されることを前提にする • コンポーネントとそうでないものを明確に分 ける
27.
メリット • テスタブル • 冪等性と疎結合であることが担保される •
カジュアルな変更・削除と再利用が可能 • 高速なPDCAサイクルに弱くない • CSS設計も助ける
28.
みんなもReact使おう!
29.
Thank you for listening
:)
Télécharger maintenant