More Related Content
Similar to 今からでも遅くない! React事始め
Similar to 今からでも遅くない! React事始め (20)
今からでも遅くない! React事始め
- 2. 自己紹介
• 名前: 成田 幸紀 (なるた ゆきのり) @ynaruc
• 出身: 愛媛
• サイボウズ株式会社 3 年目
• 松山開発部 PG
• 使っている言語
• TypeScript, JavaScript, C++, etc.
勉強会やハッカソンなどのイベントが好きで,
愛媛のイベントにたまに出没しています。
- 6. 流行っているらしい
• Fluent 2015 でも多数セッションがあった
• O’reilly で入門書が発売された
• 入門 React
• 採用実績もある
• Facebook
• Yahoo
• atom
• Web に React を扱った記事が増えている
- 10. Info
• もし発表中に React を書いてみたい
という方は JSFiddle で簡単に試せる
ので下記のリンク先でお試しください
• https://goo.gl/Fp9NLj
- 12. React
• Facebook 製
• Web アプリケーションの UI を構築
するための JavaScript ライブラリ
• MVC の View の役割を担当する
簡単にいうと,「DOMの更新」と
「イベントハンドリング」をやってくれる
ライブラリ
- 14. 役割が View だけ
• React は MVC の View の役割
• 既存の MVC フレームワークの View
だけ React にすることも可能
• できることが限られているので
シンプルで覚えやすい
- 15. 仮想 DOM
• React では DOM の更新に
仮想 DOM を使っている
• 仮想 DOM は更新が必要な箇所を
自動的に計算して実際の DOM を更新する
• 無駄な再描画を抑えることができる
- 21. React で Hello World
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<Hello name="World" />,
document.getElementById('container'));
- 22. 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 の中にタグがある!?
- 24. JSX の書き方
• 基本的には HTML と似ている
• JavaScript の値を使いたいときは {} で囲む
• {} の中身は JavaScript の式として
解釈されるので変数だけでなく関数も使える
<h1>{title}</h1>
<h1>{['hello', 'world'].join(' ')}</h1>
- 25. JSX の注意点
• HTML に似ているが属性名などは
異なる場合があるので気をつける
必要がある
• HTML の class
• JSX では className
• HTML の for
• JSX では htmlFor
- 27. JSX のいいところ
• HTML と似ているので理解しやすい
• デザイナーも理解しやすいはず
• コンポーネントの構造が分かりやすい
• React の API を隠蔽してくれる
• React 側で API が変更された場合は,
コンパイラが勝手に変更してくれる
- 29. 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})
)
);
}
- 30. JSX は使うべきか?
• JavaScript にマークアップが混在するこ
とがどうしても許せない場合は無理に使わ
なくても良い
• 個人的には JSX で書いたほうが見やすい
ので JSX を使うのをお勧め
今回の発表中は JSX を使って
サンプルを書きますのでご了承ください
- 31. JSX を理解した上でもう一度 Hello World
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<Hello name=“World” />,
document.getElementById('container'));
コンポーネントの定義部分
- 32. JSX を理解した上でもう一度 Hello World
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<Hello name=“World” />,
document.getElementById('container'));
ここでマークアップを返す
- 33. 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 で参照できる
- 34. 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” な要素に描画
- 35. Hello World の学び
• コンポーネントの作り方
• React.createClass を使って作る
• コンポーネントの DOM 構造は
render 関数で返す
• React.reander を使って指定した
要素にコンポーネントを描画する
- 40. まずは CommentList から
• CommentApp からコメントの配列
を受け取ってリストを表示する
• 渡されるコメントの配列は
以下の様な形式
• [“こんにちは”, “プロ生ちゃん”,…]
- 41. 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 配列の例
// [“こんにちは”, “プロ生ちゃん”]
- 42. // 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>
);
}
});
コメントの配列からコンポーネントの配列を作る
- 43. 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 配列の例
// [“こんにちは”, “プロ生ちゃん”]
- 44. 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 配列の例
// [“こんにちは”, “プロ生ちゃん”]
- 46. CommentApp コンポーネント
• コメント入力して Submit したら
コメントを追加し,入力欄を空にする
• 入力された文字列を管理する必要がある
• 書き込んだコメントの一覧を表示する
• 書き込んだコメントの配列を持つ必要がある
コンポーネント内で変化する値を管理し,
値が更新されたら再描画する必要がある
- 48. CommentApp の初期内部状態の定義
var CommentApp = React.createClass({
getInitialState: function() {
return {
comments: [],
inputValue: ''
}
},
…
});
ここで定義した値は this.state で参照できる
入力されたコメントの
文字列を格納する
コメントリストに表示する
コメントの配列
- 49. 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>
);
}
});
コメント入力欄
コメントリスト
- 50. 入力欄の値の更新
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>
);
}
});
コンポーネントのコメントの
文字列を参照する
- 51. 入力欄の値の更新
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
関数を呼び出す
- 52. 入力欄の値の更新 (handleChange 関数)
var CommentApp = React.createClass({
…
handleChange: function(e) {
this.setState({
inputValue: e.target.value
});
},
…
});
this.setState 関数を実行すると,
状態を更新して再描画が走る
- 53. コメントを入力から画面の更新の流れ
input の value の値が this.state.inputValue に更新される
CommentApp の render が呼び出される
handleChange で setState を使って状態を更新
コメントの入力すると onChange イベントが発火
- 54. コメント追加の実装
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 を呼び出す
- 55. コメント追加の実装 (handleSubmit の実装)
var CommentApp = React.createClass({
…
handleSubmit: function(e) {
e.preventDefault();
var comment = this.state.inputValue;
this.setState({
comments: this.state.comments.concat(comment),
inputValue: ''
});
},
…
});
新しいコメントを追加し,入力文字列を空にして状態を更新
- 56. 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 が再描画される
- 57. Submit してからの流れコメント追加まで
CommentList の render が呼び出されて再描画されコメントが追加される
CommentList に更新されたコメントの配列を渡す
CommentApp.render が呼び出される
handleSubmit で setState を使って状態を更新
コメントを入力してAddをクリック すると onSubmit イベントが着火
- 60. PropTypes
• this.props の値のバリデーションができる
• バリデーションに引っかかるとコンソールで
警告してくれる
var UserLabel = React.createClass({
propTypes: {
// userName は文字列で必須
userName: React.PropTypes.string.isRequired,
// size は数値
size: React.PropTypes.number,
// onClick は関数
onClick: React.PropTypes.func
},
// ...
});
- 61. PropTypes のエラーを見てみる
• サンプル
• UserLabel コンポーネントに渡す値を
変更すると開発者ツールに警告が出る
• http://goo.gl/uxogKO
• 参考資料
• https://facebook.github.io/react
/docs/reusable-components.html
- 62. さらに学ぶには?
• O’reilly 社の「入門 React – コンポーネ
ントベースのWebフロントエンド開発」
• http://www.oreilly.co.jp/books/9784
873117195/
• React の公式ドキュメント
• https://facebook.github.io/react/docs
/getting-started.html
- 64. Yeoman + react-gulp-browserify
• Yeoman
• プロジェクトのひな形を作るツール
• 0作るのは面倒なので
これでプロジェクトのひな形を作ると楽
• react-gulp-browserify
• react アプリのためのひな形
• ファイル更新時の自動ビルド
• テストなども入っている
- 65. React Developer Tool
• Chrome の拡張機能
• コンポーネントの構造の確認
• コンポーネントの props や state の
値の確認ができる
• Chrome で開発者ツールを開くと
コンソールにこの拡張を入れるように
促される
- 68. React を使ってみた感想
• 最初 JSX を見て「???」になったが,
書いてみるとシンプルで覚えやすい
• UI パーツの書き方が統一される
• オレオレ実装の UI パーツが減るかも
• 警告が親切でデバッグしやすい