Submit Search
Upload
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
•
96 likes
•
75,892 views
Kohei Asai
Follow
2015/05/27にLINE社で行われた、Data Binding JS Nightでの発表内容です。
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 29
Download now
Download to read offline
Recommended
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
Java ORマッパー選定のポイント #jsug
Java ORマッパー選定のポイント #jsug
Masatoshi Tada
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Shotaro Suzuki
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
Koichiro Matsuoka
3週連続DDDその1 ドメイン駆動設計の基本を理解する
3週連続DDDその1 ドメイン駆動設計の基本を理解する
増田 亨
ドメイン駆動設計に15年取り組んでわかったこと
ドメイン駆動設計に15年取り組んでわかったこと
増田 亨
Recommended
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
Java ORマッパー選定のポイント #jsug
Java ORマッパー選定のポイント #jsug
Masatoshi Tada
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Shotaro Suzuki
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
Koichiro Matsuoka
3週連続DDDその1 ドメイン駆動設計の基本を理解する
3週連続DDDその1 ドメイン駆動設計の基本を理解する
増田 亨
ドメイン駆動設計に15年取り組んでわかったこと
ドメイン駆動設計に15年取り組んでわかったこと
増田 亨
ドメインオブジェクトの見つけ方・作り方・育て方
ドメインオブジェクトの見つけ方・作り方・育て方
増田 亨
Rethinking Best Practices
Rethinking Best Practices
floydophone
Kotlinアンチパターン
Kotlinアンチパターン
Recruit Lifestyle Co., Ltd.
リッチなドメインモデル 名前探し
リッチなドメインモデル 名前探し
増田 亨
ドメイン駆動設計入門
ドメイン駆動設計入門
Takuya Kitamura
Rest ful api設計入門
Rest ful api設計入門
Monstar Lab Inc.
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
Koichi Tanaka
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
Yuhei Miyazato
イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)
Yoshitaka Kawashima
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Shotaro Suzuki
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
REST API のコツ
REST API のコツ
pospome
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
Koichiro Matsuoka
RESTfulとは
RESTfulとは
星影 月夜
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
増田 亨
なぜ、いま リレーショナルモデルなのか(理論から学ぶデータベース実践入門読書会スペシャル)
なぜ、いま リレーショナルモデルなのか(理論から学ぶデータベース実践入門読書会スペシャル)
Mikiya Okuno
FastAPIのテンプレートプロジェクトがいい感じだった話
FastAPIのテンプレートプロジェクトがいい感じだった話
NipponAlgorithm
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
shinjiigarashi
MySQL負荷分散の方法
MySQL負荷分散の方法
佐久本正太
PlaySQLAlchemy: SQLAlchemy入門
PlaySQLAlchemy: SQLAlchemy入門
泰 増田
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Kei Yagi
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
More Related Content
What's hot
ドメインオブジェクトの見つけ方・作り方・育て方
ドメインオブジェクトの見つけ方・作り方・育て方
増田 亨
Rethinking Best Practices
Rethinking Best Practices
floydophone
Kotlinアンチパターン
Kotlinアンチパターン
Recruit Lifestyle Co., Ltd.
リッチなドメインモデル 名前探し
リッチなドメインモデル 名前探し
増田 亨
ドメイン駆動設計入門
ドメイン駆動設計入門
Takuya Kitamura
Rest ful api設計入門
Rest ful api設計入門
Monstar Lab Inc.
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
Koichi Tanaka
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
Yuhei Miyazato
イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)
Yoshitaka Kawashima
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Shotaro Suzuki
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
REST API のコツ
REST API のコツ
pospome
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
Koichiro Matsuoka
RESTfulとは
RESTfulとは
星影 月夜
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
増田 亨
なぜ、いま リレーショナルモデルなのか(理論から学ぶデータベース実践入門読書会スペシャル)
なぜ、いま リレーショナルモデルなのか(理論から学ぶデータベース実践入門読書会スペシャル)
Mikiya Okuno
FastAPIのテンプレートプロジェクトがいい感じだった話
FastAPIのテンプレートプロジェクトがいい感じだった話
NipponAlgorithm
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
shinjiigarashi
MySQL負荷分散の方法
MySQL負荷分散の方法
佐久本正太
PlaySQLAlchemy: SQLAlchemy入門
PlaySQLAlchemy: SQLAlchemy入門
泰 増田
What's hot
(20)
ドメインオブジェクトの見つけ方・作り方・育て方
ドメインオブジェクトの見つけ方・作り方・育て方
Rethinking Best Practices
Rethinking Best Practices
Kotlinアンチパターン
Kotlinアンチパターン
リッチなドメインモデル 名前探し
リッチなドメインモデル 名前探し
ドメイン駆動設計入門
ドメイン駆動設計入門
Rest ful api設計入門
Rest ful api設計入門
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
REST API のコツ
REST API のコツ
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
RESTfulとは
RESTfulとは
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
なぜ、いま リレーショナルモデルなのか(理論から学ぶデータベース実践入門読書会スペシャル)
なぜ、いま リレーショナルモデルなのか(理論から学ぶデータベース実践入門読書会スペシャル)
FastAPIのテンプレートプロジェクトがいい感じだった話
FastAPIのテンプレートプロジェクトがいい感じだった話
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
MySQL負荷分散の方法
MySQL負荷分散の方法
PlaySQLAlchemy: SQLAlchemy入門
PlaySQLAlchemy: SQLAlchemy入門
Viewers also liked
フロントエンド初学者が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
Viewers also liked
(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
Similar to コンポーネント指向による、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
Similar to コンポーネント指向による、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
:)
Download now