Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

80 486 vues

Publié le

Publié dans : Logiciels
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Njce! Thanks for sharing.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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

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

×