Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Reactjs

1,736 views

Published on

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

Published in: Technology
  • Be the first to comment

Reactjs

  1. 1. Shumpei Hozumi 穂積 俊平 しくみ製作所 福島支部 “React.js” と戯れてみた
  2. 2. 1. React.js とは? 2. 競合 3. 競合の問題点 4. 3つの特徴 5. 記述方法 6. 使ってみた感想 7. 参考サイト 2 目次 Shumpei Hozumi
  3. 3. 1. Facebook が開発している JavaScript ライブラリ MVC の V(View) を開発するためのライブラリ 2. 導入実績 1. Facebook 2. Instagram 3. Yahoo 4. AirBnB 3 React.js とは? Shumpei Hozumi
  4. 4. 1. 特徴 1. フルスタックな MVW (Whatever) フレームワーク 2. 双方向データバインディング(dirty checking 方式) 3. テンプレートとしてのHTML 2. 本家サンプル https://angularjs.org/ 4 競合(AngularJS) Shumpei Hozumi
  5. 5. 1. フルスタックゆえに学習コスト高い 勉強すべき概念が多い 2. 大規模な場合、再描画速度が問題になることが多い dirty checking は、バインドしている全ての変数について、特定 のタイミングで値の変更がないか確認を行うため、変数が増え るにつれ遅くなる 3. 双方向バインディングでは処理の流れが追いにくい 内部の処理が完全に隠蔽化されているので、デバッグが難しい 5 AngularJS の問題点 Shumpei Hozumi
  6. 6. 1. View に特化(Model もちょっとサポート) 学習コストが低いのでとっつきやすい 2. 仮想 DOM という概念を導入 仮想DOMの比較により、再描画の範囲を最小限にし、高速化 3. 一方向のデータフロー 常に一方向に流れるので処理が追いやすい 6 React.js の3つの特徴 Shumpei Hozumi
  7. 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. 8. 1. Model から View へのデータフローのみ提供 1. 処理を明示的に書く必要がある 明示的に書かれているので混乱しにくい 明示的に書く必要があるのでやや冗長に感じる 8 一方向のデータフロー Shumpei Hozumi Model View
  9. 9. 1. Flux というアーキテクチャで構成すると良い 1. Facebook が提唱しているデータフローアーキテクチャ 2. Flux を構成する基礎的な機能を React.js が提供 1. 正直ほとんど提供されていない… 9 一方向のデータフロー Shumpei Hozumi Action Dispatcher Store View Action
  10. 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. 11. 1. JSX という独自文法を備える 1. 階層化が直感的に書ける 2. class は className と書く必要あり。js の予約語のため。 11 記述方法(JSX) Shumpei Hozumi CalendarHeader = React.createClass render: -> `<div className="schedules-heading"> <CalendarHeaderTitle /> <CalendarHeaderBtn /> </div>` 階層化の記述例
  12. 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. 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. 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. 15. 1. props と state で管理する際の注意点 1. なるべく props を活用するようにする(状態数を少なくする) 2. state はなるべく下層に持たせる(stateが影響する範囲を小さく) 15 状態管理の注意点 Shumpei Hozumi
  16. 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. 17. 1. 利点 1. 再描画が高速らしい… 重い処理させてないから実感はない 2. データフローを明確に書くのでデバッグしやすい 3. 学習コストが低く、とっつきやすい。 2. 欠点 1. 全体的に書き心地がよくない JSX が使いにくい View に関するコードが散在する → react-jade に期待。本家 jade が製造。 2. 機能的に色々足りていない気がする → Flux フレームワークが色々出てきてる。 Qiita の中の人が Arda というフレームワークを作ってる 17 React.js を使ってみた感想 Shumpei Hozumi
  18. 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

×