Downloaded 73 times
![JSX の書き方
• 基本的には HTML と似ている
• JavaScript の値を使いたいときは {} で囲む
• {} の中身は JavaScript の式として
解釈されるので変数だけでなく関数も使える
<h1>{title}</h1>
<h1>{['hello', 'world'].join(' ')}</h1>](https://image.slidesharecdn.com/react-150609003231-lva1-app6891/75/React-24-2048.jpg)
![まずは CommentList から
• CommentApp からコメントの配列
を受け取ってリストを表示する
• 渡されるコメントの配列は
以下の様な形式
• [“こんにちは”, “プロ生ちゃん”,…]](https://image.slidesharecdn.com/react-150609003231-lva1-app6891/75/React-40-2048.jpg)
![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 配列の例
// [“こんにちは”, “プロ生ちゃん”]](https://image.slidesharecdn.com/react-150609003231-lva1-app6891/75/React-41-2048.jpg)
![// 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>
);
}
});
コメントの配列からコンポーネントの配列を作る](https://image.slidesharecdn.com/react-150609003231-lva1-app6891/75/React-42-2048.jpg)
![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 配列の例
// [“こんにちは”, “プロ生ちゃん”]](https://image.slidesharecdn.com/react-150609003231-lva1-app6891/75/React-43-2048.jpg)
![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 配列の例
// [“こんにちは”, “プロ生ちゃん”]](https://image.slidesharecdn.com/react-150609003231-lva1-app6891/75/React-44-2048.jpg)
![CommentApp の初期内部状態の定義
var CommentApp = React.createClass({
getInitialState: function() {
return {
comments: [],
inputValue: ''
}
},
…
});
ここで定義した値は this.state で参照できる
入力されたコメントの
文字列を格納する
コメントリストに表示する
コメントの配列](https://image.slidesharecdn.com/react-150609003231-lva1-app6891/75/React-48-2048.jpg)
今からでも遅くない! React事始め
- 1.
- 2. 自己紹介 • 名前: 成田幸紀 (なるた ゆきのり) @ynaruc • 出身: 愛媛 • サイボウズ株式会社 3 年目 • 松山開発部 PG • 使っている言語 • TypeScript, JavaScript, C++, etc. 勉強会やハッカソンなどのイベントが好きで， 愛媛のイベントにたまに出没しています。
- 3.
- 5. React • UI を構築するための JavaScriptライブラリ • Facebook 製
- 6. 流行っているらしい • Fluent 2015でも多数セッションがあった • O’reilly で入門書が発売された • 入門 React • 採用実績もある • Facebook • Yahoo • atom • Web に React を扱った記事が増えている
- 7.
- 8. 今回発表すること • React ってなんだろう •React で書くコンポーネント • 簡単なアプリを書いてみる • React を書くときに便利なツール
- 9. 今回発表しないこと • テスト • 仮想DOM の詳細 • サーバサイドレンダリング • Flux 入門なので詳しい方ごめんなさい
- 10. Info • もし発表中に Reactを書いてみたい という方は JSFiddle で簡単に試せる ので下記のリンク先でお試しください • https://goo.gl/Fp9NLj
- 11.
- 12. React • Facebook 製 •Web アプリケーションの UI を構築 するための JavaScript ライブラリ • MVC の View の役割を担当する 簡単にいうと，「DOMの更新」と 「イベントハンドリング」をやってくれる ライブラリ
- 13. React の特徴 • 役割がView だけ • 仮想 DOM • コンポーネント
- 14. 役割が View だけ •React は MVC の View の役割 • 既存の MVC フレームワークの View だけ React にすることも可能 • できることが限られているので シンプルで覚えやすい
- 15. 仮想 DOM • Reactでは DOM の更新に 仮想 DOM を使っている • 仮想 DOM は更新が必要な箇所を 自動的に計算して実際の DOM を更新する • 無駄な再描画を抑えることができる
- 16. コンポーネント • React ではコンポーネントという 単位でUIパーツを作る •コンポーネントは，UIパーツの ロジックとマークアップが一箇所に 定義されたもの
- 17.
- 18.
- 19. コンポーネント単位で分割するメリット • UI パーツ毎に分割できるので再利用 性の高いパーツが作れる •コンポーネントの処理はコンポーネン ト内に閉じ込めることができる
- 20.
- 21. React で HelloWorld var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<Hello name="World" />, document.getElementById('container'));
- 22. React で HelloWorld var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<Hello name="World" />, document.getElementById('container')); JavaScript の中にタグがある!?
- 23. タグを使って書いているのなに？ • JSX (JavaScriptXML) • コンポーネントのマークアップを 書くためのシンタックス • HTMLによく似ている • コンパイルすると 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
- 26. JSX に対する批判 • JavaScriptの中に マークアップが混在している React は JSX を使わなくても書ける
- 27. JSX のいいところ • HTMLと似ているので理解しやすい • デザイナーも理解しやすいはず • コンポーネントの構造が分かりやすい • React の API を隠蔽してくれる • React 側で API が変更された場合は， コンパイラが勝手に変更してくれる
- 28. JSX で書いた例 <div> <form className="comment-form" onSubmit={this.handleSubmit}> <input type="text" value={this.state.inputValue} onChange={this.handleChange} /> <inputtype="submit" value="add" /> </form> <CommentList comments={this.state.comments} /> </div>
- 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 を理解した上でもう一度 HelloWorld var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<Hello name=“World” />, document.getElementById('container')); コンポーネントの定義部分
- 32. JSX を理解した上でもう一度 HelloWorld var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<Hello name=“World” />, document.getElementById('container')); ここでマークアップを返す
- 33. JSX を理解した上でもう一度 HelloWorld 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 を理解した上でもう一度 HelloWorld 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 を使って指定した 要素にコンポーネントを描画する
- 36.
- 37.
- 38.
- 39.
- 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 配列の例 // [“こんにちは”, “プロ生ちゃん”]
- 45.
- 46. CommentApp コンポーネント • コメント入力してSubmit したら コメントを追加し，入力欄を空にする • 入力された文字列を管理する必要がある • 書き込んだコメントの一覧を表示する • 書き込んだコメントの配列を持つ必要がある コンポーネント内で変化する値を管理し， 値が更新されたら再描画する必要がある
- 47. コンポーネント内で変化する値 • コンポーネントの内部状態という • コンポーネント内ではthis.state を 使って内部状態参照する • setState を使って内部状態を更新する
- 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 関数) varCommentApp = 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 の実装) varCommentApp = 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 イベントが着火
- 58. サンプルでの学び • コンポーネントの組み合わせ方 • イベントハンドラの登録方法 •内部状態の持ち方と更新の仕方
- 59.
- 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
- 63.
- 64. Yeoman + react-gulp-browserify •Yeoman • プロジェクトのひな形を作るツール • 0作るのは面倒なので これでプロジェクトのひな形を作ると楽 • react-gulp-browserify • react アプリのためのひな形 • ファイル更新時の自動ビルド • テストなども入っている
- 65. React Developer Tool •Chrome の拡張機能 • コンポーネントの構造の確認 • コンポーネントの props や state の 値の確認ができる • Chrome で開発者ツールを開くと コンソールにこの拡張を入れるように 促される
- 66.
- 67. 今回はなしたこと • React とは •React の基本的な使い方 • 便利なツール
- 68. React を使ってみた感想 • 最初JSX を見て「???」になったが， 書いてみるとシンプルで覚えやすい • UI パーツの書き方が統一される • オレオレ実装の UI パーツが減るかも • 警告が親切でデバッグしやすい
- 69. React を使ってみた感想 • DOMを勝手に更新してしまうので UI周りのライブラリを使うときは気 をつける必要がある • かっちりしているので、 さっと作るアプリには向かない
- 70.
- 71.