SlideShare a Scribd company logo
1 of 16
React.js
【第1回】谷ゼミ勉強会
2015.07.18 youhe_
agenda
• React.jsとは
• React.jsの特徴
• DEMO
• まとめ
React.jsとは
• facebook産 OSS
• フレームワークではなくUIライブラリ
• リアクティブ(Reactive)プログラミング
React.jsの特徴
• JUST THE UI
• VIRTUAL DOM
• DATA FLOW
JUST THE UI
Componentを作る
VIRTUAL DOM
DOM Treeのような構造体をもち
データの差分のみを再レンダリング
VIRTUAL DOM
DATA FLOW
可読性の向上
DATA FLOW
html
DATA FLOW
css
DATA FLOW
js
DEMO
まとめ
React.jsのメリット
• パフォーマンスが良い
• 規模が大きくなっても管理しやすい
React.jsのデメリット
• htmlとjsが混同する
• 既存のjsライブラリが使えない
おまけ
• Flux
• iOS/AndroidアプリはReactNative

More Related Content

What's hot

まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?Yuki Ishikawa
 
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?Kosuke Ogawa
 
さくらとWeb×マーケティングの夕べ #1
さくらとWeb×マーケティングの夕べ #1さくらとWeb×マーケティングの夕べ #1
さくらとWeb×マーケティングの夕べ #1Hidenori Matsuki
 
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!Yuki Ishikawa
 
Railsらしい 1対多の画面作成
Railsらしい 1対多の画面作成Railsらしい 1対多の画面作成
Railsらしい 1対多の画面作成Yamamoto Kazuhisa
 
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのかなぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのかYoichi Toyota
 
Introduce couchbase server
Introduce couchbase serverIntroduce couchbase server
Introduce couchbase serverKoji Kawamura
 
EC-CUBE とクラウドは仲良しか?
EC-CUBE とクラウドは仲良しか?EC-CUBE とクラウドは仲良しか?
EC-CUBE とクラウドは仲良しか?Kentaro Ohkouchi
 
JAX-RS(LT)
JAX-RS(LT)JAX-RS(LT)
JAX-RS(LT)winplus
 
中小企業向けWindows Server OSの基本とTips
中小企業向けWindows Server OSの基本とTips中小企業向けWindows Server OSの基本とTips
中小企業向けWindows Server OSの基本とTipsSatoru Nasu
 
AWS free tier maximization
AWS free tier maximizationAWS free tier maximization
AWS free tier maximizationKenkichi Okazaki
 
Inspector CLI (JAWS-UG 京王線支部 #4 LT)
Inspector CLI (JAWS-UG 京王線支部 #4 LT)Inspector CLI (JAWS-UG 京王線支部 #4 LT)
Inspector CLI (JAWS-UG 京王線支部 #4 LT)Kenkichi Okazaki
 
Cross-Origin Resource Sharing
Cross-Origin Resource SharingCross-Origin Resource Sharing
Cross-Origin Resource SharingHiyou Shinnonome
 
Concurrent Programm in JavaScript
Concurrent Programm in JavaScriptConcurrent Programm in JavaScript
Concurrent Programm in JavaScriptyjono Seino
 
Concurrent Programming in JavaScript
Concurrent Programming in JavaScriptConcurrent Programming in JavaScript
Concurrent Programming in JavaScriptyjono Seino
 
Nodejs and mongodb
Nodejs and mongodbNodejs and mongodb
Nodejs and mongodbAyako Hatori
 
Blog=pelican+bit bucket+docker
Blog=pelican+bit bucket+dockerBlog=pelican+bit bucket+docker
Blog=pelican+bit bucket+dockerNobuaki Aoki
 

What's hot (20)

20120609
2012060920120609
20120609
 
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
 
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?
 
さくらとWeb×マーケティングの夕べ #1
さくらとWeb×マーケティングの夕べ #1さくらとWeb×マーケティングの夕べ #1
さくらとWeb×マーケティングの夕べ #1
 
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
 
Railsらしい 1対多の画面作成
Railsらしい 1対多の画面作成Railsらしい 1対多の画面作成
Railsらしい 1対多の画面作成
 
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのかなぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
 
Introduce couchbase server
Introduce couchbase serverIntroduce couchbase server
Introduce couchbase server
 
EC-CUBE とクラウドは仲良しか?
EC-CUBE とクラウドは仲良しか?EC-CUBE とクラウドは仲良しか?
EC-CUBE とクラウドは仲良しか?
 
JAX-RS(LT)
JAX-RS(LT)JAX-RS(LT)
JAX-RS(LT)
 
React.js + Flux
React.js + FluxReact.js + Flux
React.js + Flux
 
中小企業向けWindows Server OSの基本とTips
中小企業向けWindows Server OSの基本とTips中小企業向けWindows Server OSの基本とTips
中小企業向けWindows Server OSの基本とTips
 
AWS free tier maximization
AWS free tier maximizationAWS free tier maximization
AWS free tier maximization
 
Inspector CLI (JAWS-UG 京王線支部 #4 LT)
Inspector CLI (JAWS-UG 京王線支部 #4 LT)Inspector CLI (JAWS-UG 京王線支部 #4 LT)
Inspector CLI (JAWS-UG 京王線支部 #4 LT)
 
Cross-Origin Resource Sharing
Cross-Origin Resource SharingCross-Origin Resource Sharing
Cross-Origin Resource Sharing
 
Volvox 001
Volvox 001Volvox 001
Volvox 001
 
Concurrent Programm in JavaScript
Concurrent Programm in JavaScriptConcurrent Programm in JavaScript
Concurrent Programm in JavaScript
 
Concurrent Programming in JavaScript
Concurrent Programming in JavaScriptConcurrent Programming in JavaScript
Concurrent Programming in JavaScript
 
Nodejs and mongodb
Nodejs and mongodbNodejs and mongodb
Nodejs and mongodb
 
Blog=pelican+bit bucket+docker
Blog=pelican+bit bucket+dockerBlog=pelican+bit bucket+docker
Blog=pelican+bit bucket+docker
 

Viewers also liked

AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話kumatch kumatch
 
React.js触ってみた 吉澤和香奈
React.js触ってみた 吉澤和香奈React.js触ってみた 吉澤和香奈
React.js触ってみた 吉澤和香奈Wakana Yoshizawa
 
Reactつかってみた
ReactつかってみたReactつかってみた
ReactつかってみたMinori Tokuda
 
Frontend Fantasy 〜ミスリルの戦士たち〜
Frontend Fantasy 〜ミスリルの戦士たち〜Frontend Fantasy 〜ミスリルの戦士たち〜
Frontend Fantasy 〜ミスリルの戦士たち〜Masashi MATSUI
 
React を導入した フロントエンド開発
React を導入したフロントエンド開発React を導入したフロントエンド開発
React を導入した フロントエンド開発 daisuke-a-matsui
 
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティスコンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、ReactのベストプラクティスとバッドプラクティスKohei Asai
 
今からでも遅くない! React事始め
今からでも遅くない! React事始め今からでも遅くない! React事始め
今からでも遅くない! React事始めynaruta
 

Viewers also liked (10)

20150523
 20150523 20150523
20150523
 
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
 
Reactjs
ReactjsReactjs
Reactjs
 
React.js触ってみた 吉澤和香奈
React.js触ってみた 吉澤和香奈React.js触ってみた 吉澤和香奈
React.js触ってみた 吉澤和香奈
 
Reactつかってみた
ReactつかってみたReactつかってみた
Reactつかってみた
 
Frontend Fantasy 〜ミスリルの戦士たち〜
Frontend Fantasy 〜ミスリルの戦士たち〜Frontend Fantasy 〜ミスリルの戦士たち〜
Frontend Fantasy 〜ミスリルの戦士たち〜
 
React を導入した フロントエンド開発
React を導入したフロントエンド開発React を導入したフロントエンド開発
React を導入した フロントエンド開発
 
React.js + Flux入門 #scripty02
React.js + Flux入門 #scripty02React.js + Flux入門 #scripty02
React.js + Flux入門 #scripty02
 
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティスコンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
 
今からでも遅くない! React事始め
今からでも遅くない! React事始め今からでも遅くない! React事始め
今からでも遅くない! React事始め
 

Editor's Notes

  1. facebook産 UIライブラリ フレームワークじゃない MVCでいうビューの機能を持つ facebookやinstagramはもちろん、Yahoo、atomでも使われている リアクティブプログラミングとは、「反応する側」と「認識する側」を分けて考え、反応に対して自動的に対応するという考え方です。 React.jsの説明では、必ずツリー構造の図が出てきます。ある要素が変更されたら、一方向の流れで、関係する要素も変更されるというものを表しています。
  2. facebook は 以上の3つをreactの特徴としてあげている
  3. component志向のMVCはおおい Component作るだけなので覚えることも少ないので導入もしやすいかと思います。 (Backbone.jsのViewの部分をReact.jsにするとか、Angular.jsでReact.jsを使ったdirectives作るとか。)
  4. ルートのコンポーネントだけで状態を持ち、その状態が変更したらツリーを再構築するというのは、非常に設計を単純にしますが、一部分の変更だけで毎回全てのDOMツリーを再構築するのは速度的な面で問題になります。そのため、差分を抽出してDOMへのレンダリングを最小限にする仕組み
  5. ルートのコンポーネントだけで状態を持ち、その状態が変更したらツリーを再構築するというのは、非常に設計を単純にしますが、一部分の変更だけで毎回全てのDOMツリーを再構築するのは速度的な面で問題になります。そのため、差分を抽出してDOMへのレンダリングを最小限にする仕組み
  6. アプリケーションのデータを管理しているComponentがいて、そのデータを子のComponentに渡していく一方向な関係性を持っているので、コードが読みやすい 次のスライドー>htmlはグローバルでどこからでも操作できる。
  7. ただし、書くコードが短くなるわけではない 1度書かれたコードは10回読まれるといわれている
  8. ただし、書くコードが短くなるわけではない 1度書かれたコードは10回読まれるといわれている 次ー>demo
  9. アプリケーションのデータを管理しているComponentがいて、そのデータを子のComponentに渡していく一方向な関係性を持っているので、コードが読みやすい ただし、書くコードが短くなるわけではない 1度書かれたコードは10回読まれるといわれている
  10. jQueryやBackbone.js、Angular.jsは規模が大きくなったときに管理するのが難しい。 逆に、React.jsは小さいアプリケーションを高速に開発するためのライブラリではないと言われています。 ブラウザがhtml5に対応していることが条件。古いブラウザはPolyfills
  11. htmlとjsが混同するため、jsが読めないとだめ。デザイナーさんコーダーさん一緒にやるときは要注意 がんばればライブラリ使える
  12. flux概念の名前 MVCてきな