狠狠撸

狠狠撸Share a Scribd company logo

Reactjs

?Download as PPTX, PDF?
?
しくみ製作所
しくみ製作所

React.js を利用した感想です。

1 of 18
Download to read offline
Shumpei Hozumi 穂積 俊平 しくみ製作所 福島支部 “React.js” と戯れてみた
1. React.js とは？ 2. 競合 3. 競合の問題点 4. ３つの特徴 5. 記述方法 6. 使ってみた感想 7. 参考サイト 2 目次 Shumpei Hozumi
1. Facebook が開発している JavaScript ライブラリ MVC の V(View) を開発するためのライブラリ 2. 導入実績 1. Facebook 2. Instagram 3. Yahoo 4. AirBnB 3 React.js とは？ Shumpei Hozumi
1. 特徴 1. フルスタックな MVW (Whatever) フレームワーク 2. 双方向データバインディング（dirty checking 方式） 3. テンプレートとしてのHTML 2. 本家サンプル https://angularjs.org/ 4 競合（AngularJS） Shumpei Hozumi
1. フルスタックゆえに学習コスト高い 勉強すべき概念が多い 2. 大規模な場合、再描画速度が問題になることが多い dirty checking は、バインドしている全ての変数について、特定 のタイミングで値の変更がないか確認を行うため、変数が増え るにつれ遅くなる 3. 双方向バインディングでは処理の流れが追いにくい 内部の処理が完全に隠蔽化されているので、デバッグが難しい 5 AngularJS の問題点 Shumpei Hozumi
1. View に特化（Model もちょっとサポート） 学習コストが低いのでとっつきやすい 2. 仮想 DOM という概念を導入 仮想DOMの比較により、再描画の範囲を最小限にし、高速化 3. 一方向のデータフロー 常に一方向に流れるので処理が追いやすい 6 React.js の３つの特徴 Shumpei Hozumi
1. HTMLインスタンスと1対1で対応する単純な構造体 2. 再描画範囲の特定のために用いられる 1. 状態変更前後の仮想DOMの差分を計算 2. 差分を元にDOMの変更パッチを作成 3. HTMLインスタンスにパッチを反映 7 仮想DOM Shumpei Hozumi State A:<div class=‘hoge’>AAA</div> State B:<div class=‘hoge’>BBB</div> 作られる差分:hoge の text に -AAA+BBB 変更パッチ:node.querySelector(‘.hoge’).innerHTML =‘BBB’ 大雑把な例
1. Model から View へのデータフローのみ提供 1. 処理を明示的に書く必要がある 明示的に書かれているので混乱しにくい 明示的に書く必要があるのでやや冗長に感じる 8 一方向のデータフロー Shumpei Hozumi Model View
1. Flux というアーキテクチャで構成すると良い 1. Facebook が提唱しているデータフローアーキテクチャ 2. Flux を構成する基礎的な機能を React.js が提供 1. 正直ほとんど提供されていない… 9 一方向のデータフロー Shumpei Hozumi Action Dispatcher Store View Action
1. JSX という独自文法を備える 1. HTML をそのまま js ファイル中に書ける 2. 拡張子に .jsx を付け、コンパイルする必要あり 3. CoffeeScript で書く場合はバッククォートで囲む必要あり 10 記述方法（JSX） Shumpei Hozumi CalendarHeaderTitle = React.createClass render: -> `<h2> カレンダー</h2>` CalendarHeaderBtn = React.createClass render: -> `<p className="schedules-btn"> <a className="button-white" href="#"> 予定を追加する </a> </p>` 記述例 : calendar.js.jsx.coffee
1. JSX という独自文法を備える 1. 階層化が直感的に書ける 2. class は className と書く必要あり。js の予約語のため。 11 記述方法（JSX） Shumpei Hozumi CalendarHeader = React.createClass render: -> `<div className="schedules-heading"> <CalendarHeaderTitle /> <CalendarHeaderBtn /> </div>` 階層化の記述例
1. JSX という独自文法を備える 1. 繰り返しをサポートする文法がある 2. でも、繰り返しの記述は辛い… 12 記述方法（JSX） Shumpei Hozumi CalendarContentWeek = React.createClass render: -> days = [] _.each this.props.week, (day)-> days.push `<CalendarContentDay day={day}/>` `<tr>{days}</tr>` 繰り返しの記述例
1. props と state で管理 1. props は親コンポーネントから渡される状態 2. state はコンポーネント自身が保持する状態 13 状態管理 Shumpei Hozumi CalendarContentWeek = React.createClass render: -> days = [] _.each this.props.week, (day)-> days.push `<CalendarContentDay day={day}/>` `<tr>{days}</tr>` CalendarContentDay = React.createClass render: -> `<td> <div>{this.props.day.date}</div> </td>` props の利用例
1. props と state で管理 1. props は親コンポーネントから渡される状態 2. state はコンポーネント自身が保持する状態 14 状態管理 Shumpei Hozumi CalendarContentDay = React.createClass getInitialState: -> { clicked:false } render: -> clazz = “” if this.state.clicked clazz = “active” `<td className={clazz}> <div>{this.props.day.date}</div> </td>` state の利用例
1. props と state で管理する際の注意点 1. なるべく props を活用するようにする（状態数を少なくする） 2. state はなるべく下層に持たせる（stateが影響する範囲を小さく） 15 状態管理の注意点 Shumpei Hozumi
1. onClick などの属性を利用して書く必要がある ピュアな HTML + JavaScript と変わらない… 2. setState を使って状態を更新することで状態変化が伝播する 16 状態の変化の伝播 Shumpei Hozumi CalendarContentDay = React.createClass makeActive: -> this.setState({clicked:true}) render: -> clazz = “” if this.state.clicked clazz = “active” `<td className={clazz} onClick=“this.makeActive”> <div>{this.props.day.date}</div> </td>` 記述例
1. 利点 1. 再描画が高速らしい… 重い処理させてないから実感はない 2. データフローを明確に書くのでデバッグしやすい 3. 学習コストが低く、とっつきやすい。 2. 欠点 1. 全体的に書き心地がよくない JSX が使いにくい View に関するコードが散在する → react-jade に期待。本家 jade が製造。 2. 機能的に色々足りていない気がする → Flux フレームワークが色々出てきてる。 Qiita の中の人が Arda というフレームワークを作ってる 17 React.js を使ってみた感想 Shumpei Hozumi
1. 本家 https://facebook.github.io/react/index.html Docs の Thinking in React が概念を学ぶのに良いのでおすすめ 2. 仮想DOMに魂が震えている人（Qiitaの中の人） http://qiita.com/mizchi/items/4d25bc26def1719d52e6 React.js の根幹である仮想DOMについてよくわかるのでおすすめ 18 参考になったサイト Shumpei Hozumi

More Related Content

Reactjs

  • 1. Shumpei Hozumi 穂積 俊平 しくみ製作所 福島支部 “React.js” と戯れてみた
  • 2. 1. React.js とは？ 2. 競合 3. 競合の問題点 4. ３つの特徴 5. 記述方法 6. 使ってみた感想 7. 参考サイト 2 目次 Shumpei Hozumi
  • 3. 1. Facebook が開発している JavaScript ライブラリ MVC の V(View) を開発するためのライブラリ 2. 導入実績 1. Facebook 2. Instagram 3. Yahoo 4. AirBnB 3 React.js とは？ Shumpei Hozumi
  • 4. 1. 特徴 1. フルスタックな MVW (Whatever) フレームワーク 2. 双方向データバインディング（dirty checking 方式） 3. テンプレートとしてのHTML 2. 本家サンプル https://angularjs.org/ 4 競合（AngularJS） Shumpei Hozumi
  • 5. 1. フルスタックゆえに学習コスト高い 勉強すべき概念が多い 2. 大規模な場合、再描画速度が問題になることが多い dirty checking は、バインドしている全ての変数について、特定 のタイミングで値の変更がないか確認を行うため、変数が増え るにつれ遅くなる 3. 双方向バインディングでは処理の流れが追いにくい 内部の処理が完全に隠蔽化されているので、デバッグが難しい 5 AngularJS の問題点 Shumpei Hozumi
  • 6. 1. View に特化（Model もちょっとサポート） 学習コストが低いのでとっつきやすい 2. 仮想 DOM という概念を導入 仮想DOMの比較により、再描画の範囲を最小限にし、高速化 3. 一方向のデータフロー 常に一方向に流れるので処理が追いやすい 6 React.js の３つの特徴 Shumpei Hozumi
  • 7. 1. HTMLインスタンスと1対1で対応する単純な構造体 2. 再描画範囲の特定のために用いられる 1. 状態変更前後の仮想DOMの差分を計算 2. 差分を元にDOMの変更パッチを作成 3. HTMLインスタンスにパッチを反映 7 仮想DOM Shumpei Hozumi State A:<div class=‘hoge’>AAA</div> State B:<div class=‘hoge’>BBB</div> 作られる差分:hoge の text に -AAA+BBB 変更パッチ:node.querySelector(‘.hoge’).innerHTML =‘BBB’ 大雑把な例
  • 8. 1. Model から View へのデータフローのみ提供 1. 処理を明示的に書く必要がある 明示的に書かれているので混乱しにくい 明示的に書く必要があるのでやや冗長に感じる 8 一方向のデータフロー Shumpei Hozumi Model View
  • 9. 1. Flux というアーキテクチャで構成すると良い 1. Facebook が提唱しているデータフローアーキテクチャ 2. Flux を構成する基礎的な機能を React.js が提供 1. 正直ほとんど提供されていない… 9 一方向のデータフロー Shumpei Hozumi Action Dispatcher Store View Action
  • 10. 1. JSX という独自文法を備える 1. HTML をそのまま js ファイル中に書ける 2. 拡張子に .jsx を付け、コンパイルする必要あり 3. CoffeeScript で書く場合はバッククォートで囲む必要あり 10 記述方法（JSX） Shumpei Hozumi CalendarHeaderTitle = React.createClass render: -> `<h2> カレンダー</h2>` CalendarHeaderBtn = React.createClass render: -> `<p className="schedules-btn"> <a className="button-white" href="#"> 予定を追加する </a> </p>` 記述例 : calendar.js.jsx.coffee
  • 11. 1. JSX という独自文法を備える 1. 階層化が直感的に書ける 2. class は className と書く必要あり。js の予約語のため。 11 記述方法（JSX） Shumpei Hozumi CalendarHeader = React.createClass render: -> `<div className="schedules-heading"> <CalendarHeaderTitle /> <CalendarHeaderBtn /> </div>` 階層化の記述例
  • 12. 1. JSX という独自文法を備える 1. 繰り返しをサポートする文法がある 2. でも、繰り返しの記述は辛い… 12 記述方法（JSX） Shumpei Hozumi CalendarContentWeek = React.createClass render: -> days = [] _.each this.props.week, (day)-> days.push `<CalendarContentDay day={day}/>` `<tr>{days}</tr>` 繰り返しの記述例
  • 13. 1. props と state で管理 1. props は親コンポーネントから渡される状態 2. state はコンポーネント自身が保持する状態 13 状態管理 Shumpei Hozumi CalendarContentWeek = React.createClass render: -> days = [] _.each this.props.week, (day)-> days.push `<CalendarContentDay day={day}/>` `<tr>{days}</tr>` CalendarContentDay = React.createClass render: -> `<td> <div>{this.props.day.date}</div> </td>` props の利用例
  • 14. 1. props と state で管理 1. props は親コンポーネントから渡される状態 2. state はコンポーネント自身が保持する状態 14 状態管理 Shumpei Hozumi CalendarContentDay = React.createClass getInitialState: -> { clicked:false } render: -> clazz = “” if this.state.clicked clazz = “active” `<td className={clazz}> <div>{this.props.day.date}</div> </td>` state の利用例
  • 15. 1. props と state で管理する際の注意点 1. なるべく props を活用するようにする（状態数を少なくする） 2. state はなるべく下層に持たせる（stateが影響する範囲を小さく） 15 状態管理の注意点 Shumpei Hozumi
  • 16. 1. onClick などの属性を利用して書く必要がある ピュアな HTML + JavaScript と変わらない… 2. setState を使って状態を更新することで状態変化が伝播する 16 状態の変化の伝播 Shumpei Hozumi CalendarContentDay = React.createClass makeActive: -> this.setState({clicked:true}) render: -> clazz = “” if this.state.clicked clazz = “active” `<td className={clazz} onClick=“this.makeActive”> <div>{this.props.day.date}</div> </td>` 記述例
  • 17. 1. 利点 1. 再描画が高速らしい… 重い処理させてないから実感はない 2. データフローを明確に書くのでデバッグしやすい 3. 学習コストが低く、とっつきやすい。 2. 欠点 1. 全体的に書き心地がよくない JSX が使いにくい View に関するコードが散在する → react-jade に期待。本家 jade が製造。 2. 機能的に色々足りていない気がする → Flux フレームワークが色々出てきてる。 Qiita の中の人が Arda というフレームワークを作ってる 17 React.js を使ってみた感想 Shumpei Hozumi
  • 18. 1. 本家 https://facebook.github.io/react/index.html Docs の Thinking in React が概念を学ぶのに良いのでおすすめ 2. 仮想DOMに魂が震えている人（Qiitaの中の人） http://qiita.com/mizchi/items/4d25bc26def1719d52e6 React.js の根幹である仮想DOMについてよくわかるのでおすすめ 18 参考になったサイト Shumpei Hozumi