SlideShare a Scribd company logo
1 of 71
いまからでも遅くない!
React 事始め
2015/6/6
@ynaruc
自己紹介
• 名前: 成田 幸紀 (なるた ゆきのり) @ynaruc
• 出身: 愛媛
• サイボウズ株式会社 3 年目
• 松山開発部 PG
• 使っている言語
• TypeScript, JavaScript, C++, etc.
勉強会やハッカソンなどのイベントが好きで,
愛媛のイベントにたまに出没しています。
さっそくですが,
React はご存知ですか?
React
• UI を構築するための
JavaScript ライブラリ
• Facebook 製
流行っているらしい
• Fluent 2015 でも多数セッションがあった
• O’reilly で入門書が発売された
• 入門 React
• 採用実績もある
• Facebook
• Yahoo
• atom
• Web に React を扱った記事が増えている
流行に乗って React に入門しよう!
今回発表すること
• React ってなんだろう
• React で書くコンポーネント
• 簡単なアプリを書いてみる
• React を書くときに便利なツール
今回発表しないこと
• テスト
• 仮想 DOM の詳細
• サーバサイドレンダリング
• Flux
入門なので詳しい方ごめんなさい
Info
• もし発表中に React を書いてみたい
という方は JSFiddle で簡単に試せる
ので下記のリンク先でお試しください
• https://goo.gl/Fp9NLj
React ってなんだろう?
React
• Facebook 製
• Web アプリケーションの UI を構築
するための JavaScript ライブラリ
• MVC の View の役割を担当する
簡単にいうと,「DOMの更新」と
「イベントハンドリング」をやってくれる
ライブラリ
React の特徴
• 役割が View だけ
• 仮想 DOM
• コンポーネント
役割が View だけ
• React は MVC の View の役割
• 既存の MVC フレームワークの View
だけ React にすることも可能
• できることが限られているので
シンプルで覚えやすい
仮想 DOM
• React では DOM の更新に
仮想 DOM を使っている
• 仮想 DOM は更新が必要な箇所を
自動的に計算して実際の DOM を更新する
• 無駄な再描画を抑えることができる
コンポーネント
• React ではコンポーネントという
単位でUIパーツを作る
• コンポーネントは,UIパーツの
ロジックとマークアップが一箇所に
定義されたもの
コメントのリストを表示する例
コメントのリストを表示する例
画面を構成するパーツはだいたいコンポーネント
コンポーネント単位で分割するメリット
• UI パーツ毎に分割できるので再利用
性の高いパーツが作れる
• コンポーネントの処理はコンポーネン
ト内に閉じ込めることができる
とりあえず React で書いた
コンポーネントを見てみよう!
React で Hello World
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<Hello name="World" />,
document.getElementById('container'));
React で Hello World
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<Hello name="World" />,
document.getElementById('container'));
JavaScript の中にタグがある!?
タグを使って書いているのなに?
• JSX (JavaScript XML)
• コンポーネントのマークアップを
書くためのシンタックス
• HTMLによく似ている
• コンパイルすると JavaScript になる
JSX の書き方
• 基本的には HTML と似ている
• JavaScript の値を使いたいときは {} で囲む
• {} の中身は JavaScript の式として
解釈されるので変数だけでなく関数も使える
<h1>{title}</h1>
<h1>{['hello', 'world'].join(' ')}</h1>
JSX の注意点
• HTML に似ているが属性名などは
異なる場合があるので気をつける
必要がある
• HTML の class
• JSX では className
• HTML の for
• JSX では htmlFor
JSX に対する批判
• JavaScript の中に
マークアップが混在している
React は JSX を使わなくても書ける
JSX のいいところ
• HTML と似ているので理解しやすい
• デザイナーも理解しやすいはず
• コンポーネントの構造が分かりやすい
• React の API を隠蔽してくれる
• React 側で API が変更された場合は,
コンパイラが勝手に変更してくれる
JSX で書いた例
<div>
<form
className="comment-form"
onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.inputValue}
onChange={this.handleChange} />
<input type="submit" value="add" />
</form>
<CommentList comments={this.state.comments} />
</div>
JavaScript で書いた例
React.createElement("div", null,
React.createElement("form", {
className: "comment-form",
onSubmit: this.handleSubmit},
React.createElement("input", {
type: "text",
value: this.state.inputValue,
onChange: this.handleChange}),
React.createElement("input”,
{type: "submit", value: "add"}
)
),
React.createElement(CommentList,
{comments: this.state.comments})
)
);
}
JSX は使うべきか?
• JavaScript にマークアップが混在するこ
とがどうしても許せない場合は無理に使わ
なくても良い
• 個人的には JSX で書いたほうが見やすい
ので JSX を使うのをお勧め
今回の発表中は JSX を使って
サンプルを書きますのでご了承ください
JSX を理解した上でもう一度 Hello World
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<Hello name=“World” />,
document.getElementById('container'));
コンポーネントの定義部分
JSX を理解した上でもう一度 Hello World
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<Hello name=“World” />,
document.getElementById('container'));
ここでマークアップを返す
JSX を理解した上でもう一度 Hello World
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<Hello name=“World” />,
document.getElementById('container'));
コンポーネントに渡された値は this.props で参照できる
JSX を理解した上でもう一度 Hello World
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<Hello name=“World” />,
document.getElementById('container'));
Helloコンポーネントを id=“container” な要素に描画
Hello World の学び
• コンポーネントの作り方
• React.createClass を使って作る
• コンポーネントの DOM 構造は
render 関数で返す
• React.reander を使って指定した
要素にコンポーネントを描画する
簡単なコンポーネントの作り方は
分かったので,簡単なアプリを
作ってみよう!
サンプルコード
JSFiddle にあります
http://goo.gl/n1944d
作るアプリ
【機能】
テキスト入力欄にコメントを入力して
「add」を押すとコメントがリストに追加される
作るコンポーネント
CommentApp コンポーネント
CommentList コンポーネント
まずは CommentList から
• CommentApp からコメントの配列
を受け取ってリストを表示する
• 渡されるコメントの配列は
以下の様な形式
• [“こんにちは”, “プロ生ちゃん”,…]
CommentList の実装
var CommentList = React.createClass({
render: function() {
var comments =
this.props.comments.map(function(comment, index) {
return <li key={index}>{comment}</li>;
});
return (
<ul className="comment-list">{comments}</ul>
);
}
});
// comments 配列の例
// [“こんにちは”, “プロ生ちゃん”]
// comments 配列の例
// [“こんにちは”, “プロ生ちゃん”]
CommentList の実装
var CommentList = React.createClass({
render: function() {
var comments =
this.props.comments.map(function(comment, index) {
return <li key={index}>{comment}</li>;
});
return (
<ul className="comment-list">{comments}</ul>
);
}
});
コメントの配列からコンポーネントの配列を作る
CommentList の実装
var CommentList = React.createClass({
render: function() {
var comments =
this.props.comments.map(function(comment, index) {
return <li key={index}>{comment}</li>;
});
return (
<ul className="comment-list">{comments}</ul>
);
}
});
key 属性にユニークな値を設定しておくと
更新時の差分計算が効率的になる
// comments 配列の例
// [“こんにちは”, “プロ生ちゃん”]
CommentList の実装
var CommentList = React.createClass({
render: function() {
var comments =
this.props.comments.map(function(comment, index) {
return <li key={index}>{comment}</li>;
});
return (
<ul className="comment-list">{comments}</ul>
);
}
});
コンポーネントの配列を設定
// comments 配列の例
// [“こんにちは”, “プロ生ちゃん”]
作るコンポーネント
CommentApp コンポーネント
CommentList コンポーネント
CommentApp コンポーネント
• コメント入力して Submit したら
コメントを追加し,入力欄を空にする
• 入力された文字列を管理する必要がある
• 書き込んだコメントの一覧を表示する
• 書き込んだコメントの配列を持つ必要がある
コンポーネント内で変化する値を管理し,
値が更新されたら再描画する必要がある
コンポーネント内で変化する値
• コンポーネントの内部状態という
• コンポーネント内では this.state を
使って内部状態参照する
• setState を使って内部状態を更新する
CommentApp の初期内部状態の定義
var CommentApp = React.createClass({
getInitialState: function() {
return {
comments: [],
inputValue: ''
}
},
…
});
ここで定義した値は this.state で参照できる
入力されたコメントの
文字列を格納する
コメントリストに表示する
コメントの配列
render 関数の実装
var CommentApp = React.createClass({
…
render: function() {
return (
<div>
<form
className="comment-form"
onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.inputValue}
onChange={this.handleChange} />
<input type="submit" value="add" />
</form>
<CommentList
comments={this.state.comments} />
</div>
);
}
});
コメント入力欄
コメントリスト
入力欄の値の更新
var CommentApp = React.createClass({
…
render: function() {
return (
<div>
<form
className="comment-form"
onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.inputValue}
onChange={this.handleChange} />
<input type="submit" value="add" />
</form>
<CommentList
comments={this.state.comments} />
</div>
);
}
});
コンポーネントのコメントの
文字列を参照する
入力欄の値の更新
var CommentApp = React.createClass({
…
render: function() {
return (
<div>
<form
className="comment-form"
onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.inputValue}
onChange={this.handleChange} />
<input type="submit" value="add" />
</form>
<CommentList
comments={this.state.comments} />
</div>
);
}
});
入力したら handleChange
関数を呼び出す
入力欄の値の更新 (handleChange 関数)
var CommentApp = React.createClass({
…
handleChange: function(e) {
this.setState({
inputValue: e.target.value
});
},
…
});
this.setState 関数を実行すると,
状態を更新して再描画が走る
コメントを入力から画面の更新の流れ
input の value の値が this.state.inputValue に更新される
CommentApp の render が呼び出される
handleChange で setState を使って状態を更新
コメントの入力すると onChange イベントが発火
コメント追加の実装
var CommentApp = React.createClass({
…
render: function() {
return (
<div>
<form
className="comment-form"
onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.inputValue}
onChange={this.handleChange} />
<input type="submit" value="add" />
</form>
<CommentList
comments={this.state.comments} />
</div>
);
}
});
form の submit が発生したら
handleSubmit を呼び出す
コメント追加の実装 (handleSubmit の実装)
var CommentApp = React.createClass({
…
handleSubmit: function(e) {
e.preventDefault();
var comment = this.state.inputValue;
this.setState({
comments: this.state.comments.concat(comment),
inputValue: ''
});
},
…
});
新しいコメントを追加し,入力文字列を空にして状態を更新
CommentApp の実装
var CommentApp = React.createClass({
…
render: function() {
return (
<div>
<form
className="comment-form"
onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.inputValue}
onChange={this.handleChange} />
<input type="submit" value="add" />
</form>
<CommentList
comments={this.state.comments} />
</div>
);
}
});
this.state.comments がを更新したら
CommentList が再描画される
Submit してからの流れコメント追加まで
CommentList の render が呼び出されて再描画されコメントが追加される
CommentList に更新されたコメントの配列を渡す
CommentApp.render が呼び出される
handleSubmit で setState を使って状態を更新
コメントを入力してAddをクリック すると onSubmit イベントが着火
サンプルでの学び
• コンポーネントの組み合わせ方
• イベントハンドラの登録方法
• 内部状態の持ち方と更新の仕方
React の便利な機能を少し紹介
PropTypes
• this.props の値のバリデーションができる
• バリデーションに引っかかるとコンソールで
警告してくれる
var UserLabel = React.createClass({
propTypes: {
// userName は文字列で必須
userName: React.PropTypes.string.isRequired,
// size は数値
size: React.PropTypes.number,
// onClick は関数
onClick: React.PropTypes.func
},
// ...
});
PropTypes のエラーを見てみる
• サンプル
• UserLabel コンポーネントに渡す値を
変更すると開発者ツールに警告が出る
• http://goo.gl/uxogKO
• 参考資料
• https://facebook.github.io/react
/docs/reusable-components.html
さらに学ぶには?
• O’reilly 社の「入門 React – コンポーネ
ントベースのWebフロントエンド開発」
• http://www.oreilly.co.jp/books/9784
873117195/
• React の公式ドキュメント
• https://facebook.github.io/react/docs
/getting-started.html
React を始めるときに便利なツール
Yeoman + react-gulp-browserify
• Yeoman
• プロジェクトのひな形を作るツール
• 0作るのは面倒なので
これでプロジェクトのひな形を作ると楽
• react-gulp-browserify
• react アプリのためのひな形
• ファイル更新時の自動ビルド
• テストなども入っている
React Developer Tool
• Chrome の拡張機能
• コンポーネントの構造の確認
• コンポーネントの props や state の
値の確認ができる
• Chrome で開発者ツールを開くと
コンソールにこの拡張を入れるように
促される
まとめ
今回はなしたこと
• React とは
• React の基本的な使い方
• 便利なツール
React を使ってみた感想
• 最初 JSX を見て「???」になったが,
書いてみるとシンプルで覚えやすい
• UI パーツの書き方が統一される
• オレオレ実装の UI パーツが減るかも
• 警告が親切でデバッグしやすい
React を使ってみた感想
• DOM を勝手に更新してしまうので
UI周りのライブラリを使うときは気
をつける必要がある
• かっちりしているので、
さっと作るアプリには向かない
React はいかがでしたか?
ぜひこれを期に React を
勉強してみてはいかがでしょう

More Related Content

What's hot

ZeroFormatterに見るC#で最速のシリアライザを作成する100億の方法
ZeroFormatterに見るC#で最速のシリアライザを作成する100億の方法ZeroFormatterに見るC#で最速のシリアライザを作成する100億の方法
ZeroFormatterに見るC#で最速のシリアライザを作成する100億の方法Yoshifumi Kawai
 
Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編なべ
 
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのかなぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのかYoichi Toyota
 
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティスコンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、ReactのベストプラクティスとバッドプラクティスKohei Asai
 
React + Redux. Best practices
React + Redux.  Best practicesReact + Redux.  Best practices
React + Redux. Best practicesClickky
 
Unityでパフォーマンスの良いUIを作る為のTips
Unityでパフォーマンスの良いUIを作る為のTipsUnityでパフォーマンスの良いUIを作る為のTips
Unityでパフォーマンスの良いUIを作る為のTipsUnity Technologies Japan K.K.
 
基礎からのOAuth 2.0とSpring Security 5.1による実装
基礎からのOAuth 2.0とSpring Security 5.1による実装基礎からのOAuth 2.0とSpring Security 5.1による実装
基礎からのOAuth 2.0とSpring Security 5.1による実装Masatoshi Tada
 
React JS & Functional Programming Principles
React JS & Functional Programming PrinciplesReact JS & Functional Programming Principles
React JS & Functional Programming PrinciplesAndrii Lundiak
 
AppiumのWebViewアプリテストの仕組みとハマりどころ
AppiumのWebViewアプリテストの仕組みとハマりどころAppiumのWebViewアプリテストの仕組みとハマりどころ
AppiumのWebViewアプリテストの仕組みとハマりどころMasayuki Wakizaka
 
Jbatch実践入門 #jdt2015
Jbatch実践入門 #jdt2015Jbatch実践入門 #jdt2015
Jbatch実践入門 #jdt2015Norito Agetsuma
 
Cinemachineで見下ろし視点のカメラを作る
Cinemachineで見下ろし視点のカメラを作るCinemachineで見下ろし視点のカメラを作る
Cinemachineで見下ろし視点のカメラを作るUnity Technologies Japan K.K.
 
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭するCEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭するYoshifumi Kawai
 
演習:プログラミング言語処理をやってみよう
演習:プログラミング言語処理をやってみよう演習:プログラミング言語処理をやってみよう
演習:プログラミング言語処理をやってみようTakashi Ishio
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooksMaulik Shah
 

What's hot (20)

ZeroFormatterに見るC#で最速のシリアライザを作成する100億の方法
ZeroFormatterに見るC#で最速のシリアライザを作成する100億の方法ZeroFormatterに見るC#で最速のシリアライザを作成する100億の方法
ZeroFormatterに見るC#で最速のシリアライザを作成する100億の方法
 
Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編
 
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのかなぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
 
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティスコンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
 
react redux.pdf
react redux.pdfreact redux.pdf
react redux.pdf
 
徹底解説 Unity Reflect【概要編 ver2.0】
徹底解説 Unity Reflect【概要編 ver2.0】徹底解説 Unity Reflect【概要編 ver2.0】
徹底解説 Unity Reflect【概要編 ver2.0】
 
React + Redux. Best practices
React + Redux.  Best practicesReact + Redux.  Best practices
React + Redux. Best practices
 
Unityでパフォーマンスの良いUIを作る為のTips
Unityでパフォーマンスの良いUIを作る為のTipsUnityでパフォーマンスの良いUIを作る為のTips
Unityでパフォーマンスの良いUIを作る為のTips
 
Rest ful api設計入門
Rest ful api設計入門Rest ful api設計入門
Rest ful api設計入門
 
基礎からのOAuth 2.0とSpring Security 5.1による実装
基礎からのOAuth 2.0とSpring Security 5.1による実装基礎からのOAuth 2.0とSpring Security 5.1による実装
基礎からのOAuth 2.0とSpring Security 5.1による実装
 
React JS & Functional Programming Principles
React JS & Functional Programming PrinciplesReact JS & Functional Programming Principles
React JS & Functional Programming Principles
 
AppiumのWebViewアプリテストの仕組みとハマりどころ
AppiumのWebViewアプリテストの仕組みとハマりどころAppiumのWebViewアプリテストの仕組みとハマりどころ
AppiumのWebViewアプリテストの仕組みとハマりどころ
 
Jbatch実践入門 #jdt2015
Jbatch実践入門 #jdt2015Jbatch実践入門 #jdt2015
Jbatch実践入門 #jdt2015
 
An Introduction to Redux
An Introduction to ReduxAn Introduction to Redux
An Introduction to Redux
 
Cinemachineで見下ろし視点のカメラを作る
Cinemachineで見下ろし視点のカメラを作るCinemachineで見下ろし視点のカメラを作る
Cinemachineで見下ろし視点のカメラを作る
 
Di入門
Di入門Di入門
Di入門
 
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭するCEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
 
React
React React
React
 
演習:プログラミング言語処理をやってみよう
演習:プログラミング言語処理をやってみよう演習:プログラミング言語処理をやってみよう
演習:プログラミング言語処理をやってみよう
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
 

Viewers also liked

Flux react現状確認会
Flux react現状確認会Flux react現状確認会
Flux react現状確認会VOYAGE GROUP
 
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門spring_raining
 
React を導入した フロントエンド開発
React を導入したフロントエンド開発React を導入したフロントエンド開発
React を導入した フロントエンド開発 daisuke-a-matsui
 
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみたフロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみたKei Yagi
 
React入門-JSONを取得して表示する
React入門-JSONを取得して表示するReact入門-JSONを取得して表示する
React入門-JSONを取得して表示するregret raym
 
kunibiki.rb #5 発表資料
kunibiki.rb #5 発表資料kunibiki.rb #5 発表資料
kunibiki.rb #5 発表資料yoshioka_cb
 
PHPerがRaspberry piとRubyでゴニョゴニョした話
PHPerがRaspberry piとRubyでゴニョゴニョした話PHPerがRaspberry piとRubyでゴニョゴニョした話
PHPerがRaspberry piとRubyでゴニョゴニョした話Toru Tamura
 
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えようReact系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えようKazuhiro Hara
 
Spring Bootの本当の理解ポイント #jjug
Spring Bootの本当の理解ポイント #jjugSpring Bootの本当の理解ポイント #jjug
Spring Bootの本当の理解ポイント #jjugMasatoshi Tada
 
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017Carol Smith
 

Viewers also liked (11)

Flux react現状確認会
Flux react現状確認会Flux react現状確認会
Flux react現状確認会
 
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
 
React を導入した フロントエンド開発
React を導入したフロントエンド開発React を導入したフロントエンド開発
React を導入した フロントエンド開発
 
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみたフロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
 
Angular1&2
Angular1&2Angular1&2
Angular1&2
 
React入門-JSONを取得して表示する
React入門-JSONを取得して表示するReact入門-JSONを取得して表示する
React入門-JSONを取得して表示する
 
kunibiki.rb #5 発表資料
kunibiki.rb #5 発表資料kunibiki.rb #5 発表資料
kunibiki.rb #5 発表資料
 
PHPerがRaspberry piとRubyでゴニョゴニョした話
PHPerがRaspberry piとRubyでゴニョゴニョした話PHPerがRaspberry piとRubyでゴニョゴニョした話
PHPerがRaspberry piとRubyでゴニョゴニョした話
 
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えようReact系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
 
Spring Bootの本当の理解ポイント #jjug
Spring Bootの本当の理解ポイント #jjugSpring Bootの本当の理解ポイント #jjug
Spring Bootの本当の理解ポイント #jjug
 
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017AI 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事始め

PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!Shohei Okada
 
scala+liftで遊ぼう
scala+liftで遊ぼうscala+liftで遊ぼう
scala+liftで遊ぼうyouku
 
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作西畑 一馬
 
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframeworkSpring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframeworkToshiaki Maki
 
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用Yatabe Terumasa
 
Apexコアデベロッパーセミナー070726 配布用
Apexコアデベロッパーセミナー070726 配布用Apexコアデベロッパーセミナー070726 配布用
Apexコアデベロッパーセミナー070726 配布用stomita
 
図とコード例で多分わかる React と flux (工事中)
図とコード例で多分わかる React と flux (工事中)図とコード例で多分わかる React と flux (工事中)
図とコード例で多分わかる React と flux (工事中)Teloo
 
LaravelでAPI定義を管理する
LaravelでAPI定義を管理するLaravelでAPI定義を管理する
LaravelでAPI定義を管理するKenjiro Kubota
 
CodeIgniterによるPhwittr
CodeIgniterによるPhwittrCodeIgniterによるPhwittr
CodeIgniterによるPhwittrkenjis
 
WordPress widget api
WordPress widget apiWordPress widget api
WordPress widget apiTakami Kazuya
 
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJSエンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJSAyumi Goto
 
Data api workshop at Co-Edo
Data api workshop at Co-EdoData api workshop at Co-Edo
Data api workshop at Co-EdoYuji Takayama
 
Knockout.js を利用したインタラクティブ web アプリケーション開発
Knockout.js を利用したインタラクティブ web アプリケーション開発Knockout.js を利用したインタラクティブ web アプリケーション開発
Knockout.js を利用したインタラクティブ web アプリケーション開発Daizen Ikehara
 
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19Hideki Hashizume
 
ScaLa+Liftとか
ScaLa+LiftとかScaLa+Liftとか
ScaLa+Liftとかyouku
 
Streaming API で実現する クラウド ⇔ イントラ連携
Streaming API で実現する クラウド ⇔ イントラ連携Streaming API で実現する クラウド ⇔ イントラ連携
Streaming API で実現する クラウド ⇔ イントラ連携Shinichi Tomita
 
Struts2を始めよう!
Struts2を始めよう!Struts2を始めよう!
Struts2を始めよう!Shinpei Ohtani
 

Similar to 今からでも遅くない! React事始め (20)

Visualforce + jQuery
Visualforce + jQueryVisualforce + jQuery
Visualforce + jQuery
 
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
 
scala+liftで遊ぼう
scala+liftで遊ぼうscala+liftで遊ぼう
scala+liftで遊ぼう
 
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作
 
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframeworkSpring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
 
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
 
Apexコアデベロッパーセミナー070726 配布用
Apexコアデベロッパーセミナー070726 配布用Apexコアデベロッパーセミナー070726 配布用
Apexコアデベロッパーセミナー070726 配布用
 
図とコード例で多分わかる React と flux (工事中)
図とコード例で多分わかる React と flux (工事中)図とコード例で多分わかる React と flux (工事中)
図とコード例で多分わかる React と flux (工事中)
 
LaravelでAPI定義を管理する
LaravelでAPI定義を管理するLaravelでAPI定義を管理する
LaravelでAPI定義を管理する
 
UnicastWS vol.2
UnicastWS vol.2UnicastWS vol.2
UnicastWS vol.2
 
Cubby 2006-08-23
Cubby 2006-08-23Cubby 2006-08-23
Cubby 2006-08-23
 
CodeIgniterによるPhwittr
CodeIgniterによるPhwittrCodeIgniterによるPhwittr
CodeIgniterによるPhwittr
 
WordPress widget api
WordPress widget apiWordPress widget api
WordPress widget api
 
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJSエンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
 
Data api workshop at Co-Edo
Data api workshop at Co-EdoData api workshop at Co-Edo
Data api workshop at Co-Edo
 
Knockout.js を利用したインタラクティブ web アプリケーション開発
Knockout.js を利用したインタラクティブ web アプリケーション開発Knockout.js を利用したインタラクティブ web アプリケーション開発
Knockout.js を利用したインタラクティブ web アプリケーション開発
 
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
 
ScaLa+Liftとか
ScaLa+LiftとかScaLa+Liftとか
ScaLa+Liftとか
 
Streaming API で実現する クラウド ⇔ イントラ連携
Streaming API で実現する クラウド ⇔ イントラ連携Streaming API で実現する クラウド ⇔ イントラ連携
Streaming API で実現する クラウド ⇔ イントラ連携
 
Struts2を始めよう!
Struts2を始めよう!Struts2を始めよう!
Struts2を始めよう!
 

今からでも遅くない! React事始め