Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React.js でクライアントサイドなWebアプリ入門

spring_raining
September 13, 2015
Programming
0
430

React.js でクライアントサイドなWebアプリ入門

2015 KC3 (Kansai Computer Club Conference) で発表したスライドです。
author: @spring_raining

spring_raining

September 13, 2015
Tweet

More Decks by spring_raining

See All by spring_raining
CSS Variable をもっと活用する / Kyoto.js 18
spring_raining
4
1.7k
Vivliostyle CLIで広がるCSS組版のエコシステム / Vivliostyle user & developer meetup 2020 autumn
spring_raining
0
2.5k
Markdownの複雑化と締め切りのはざまで / Vivliostyle meetup
spring_raining
0
890
JavaScriptでもディープラーニングってやつでなんとかして / Kyoto.js 15
spring_raining
2
2.1k
CSS組版の救世主 Vivliostyle / HTML5 Conference 2018
spring_raining
6
7.9k
印刷・出版のためのオンラインエディタ Viola / Viola - Online editor for printing and publishing
spring_raining
3
670
Printable Web
spring_raining
3
890
今こそCSS組版
spring_raining
5
2.4k
シン・サーバの形は。
spring_raining
0
310

Other Decks in Programming

See All in Programming
From Translations to Multi Dimension Entities
alexanderschranz
2
130
「Chatwork」Android版アプリを 支える単体テストの現在
okuzawats
0
180
快速入門可觀測性
blueswen
0
320
htmxって知っていますか？次世代のHTML
hiro_ghap1
0
330
Security_for_introducing_eBPF
kentatada
0
110
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
130
たのしいparse.y
ydah
3
120
tidymodelsによるtidyな生存時間解析 / Japan.R2024
dropout009
1
730
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
110
14 Years of iOS: Lessons and Key Points
seyfoyun
1
770
fs2-io を試してたらバグを見つけて直した話
chencmd
0
220
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
190

Featured

See All Featured
Why Our Code Smells
bkeepers
PRO
335
57k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Designing for humans not robots
tammielis
250
25k
How STYLIGHT went responsive
nonsquared
95
5.2k
The Invisible Side of Design
smashingmag
298
50k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
It's Worth the Effort
3n
183
28k
How GitHub (no longer) Works
holman
311
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
Side Projects
sachag
452
42k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k

Transcript

  1. 2015-9-13 KC3 2015 ษڧձ OUCC୲౰ ͸Δ͞Ί (@spring_raining) React.jsͰΫϥΠΞϯταΠυͳ WebΞϓϦೖ໳

  2. ͜Μʹͪ͸ 3

  3. Θͨ͠͸ͩΕ • ͸Δ͞Ί @spring_raining • େࡕେֶ 3೥ੜ(2ճ໨) • εϖʔε͕༨ͬͨͷͰҎԼ͓͢͢ΊͷΞχϝͰ͢ 4

  4. https://github.com/facebook/react/wiki/Sites-Using-React

  5. None

  6. 1. Կ͸ͱ΋͋ΕJavaScriptೖ໳ 7

  7. JavaScript • ϓϩάϥϛϯάݴޠ • (جຊ)ϒϥ΢β্Ͱಈ͘ • ॳΊͯͳΒ͓͜͜͢͢ΊͰ͢ˣ
 http://dotinstall.com/lessons/basic_javascript_v2 • ଞͷݴޠͳΒ෼͔ΔΑͱ͍͏ํˣ


    https://developer.mozilla.org/ja/docs/Web/JavaScript/A_re-introduction_to_JavaScript • ͱ͍͏͔࣮͸օ͞Μ΋͏෼͔ͬͯΔʁ 8

  8. ͸͡ΊΑ͏ • ೚ҙͷϒϥ΢βΛ։͍ͯɺCtrl+Shift+I (⌘+Option+I) • ։͍ͨΒʮConsoleʯΛબ୒ • Node.jsΠϯετʔϧͯ͠Δਓ͸nodeίϚϯυͰ΋ 9

  9. JavaScript จ๏ͱ͔ // ͜͜͸ίϝϯτͰ͢
 /* ͜Ε΋ίϝϯτͰ͢ */
 
 var x

    = 123;
 var y = "JavaScript";
 console.log(x + y);
 
 console.log(123 + 456);
 
 var array = ["aaa", 'bbb', 123];
 console.log(array[0]);
 
 var object = {
 alfa: "apple",
 bravo: 123456,
 charlie: ["yuno", "miyako"]
 };
 
 console.log(object.charlie[1]); 10

  10. JavaScript ؔ਺ function multi(x, y) {
 var answer = x

    * y;
 return answer;
 }
 console.log(multi(2, 3));
 console.log(answer); // Τϥʔ
 
 var gj = function() { return 2013; };
 
 var kobo = {
 MDS: 2014,
 GJ: gj,
 YRYR: function(season) {
 if (season === 1) { return 2011; }
 if (season === 2) { return 2012; }
 if (season === 3) { return 2015; }
 }
 };
 
 console.log(kobo.YRYR(3)); 11

  11. JavaScript ৚݅ࣜ/ϧʔϓ var x = "Umaru";
 var y = 2;


    
 if (1 + 1 <= y) {
 x = "Ebina";
 } else if (y !== "2") {
 x = "Kirie";
 } else {
 x = "Sylphynford";
 }
 
 var abbr = ["U", "M", "R"];
 for (var i = 0; i < abbr.length; i++) {
 console.log(abbr[i]);
 }
 var n = 0;
 while (n < 3) {
 console.log(abbr[n]);
 n += 1;
 } 12

  12. forΑΓ΋͓͢͢ΊͰ͢ [4, 6, 2, 5]
 .filter(function(e) {
 return e >

    3;
 }, this) // [4, 6, 5] 
 .map(function(e) {
 return e * 10;
 }, this) // [40, 60, 50] 
 .forEach(function(e, i) {
 var print = i + ":" + e;
 console.log(print);
 }, this); 13

  13. 2. Կ͸ͱ΋͋ΕHTMLೖ໳ 14

  14. HTML (Hyper Text Markup Language) • ϓϩάϥϛϯάΒͳ͍ݴޠ • ੈͷ΢ΣϒαΠτ͸͜ΕͰग़དྷ͍ͯΔ •

    CSS͸ࠓ೔͸΍Γ·ͤΜ_ _ • ॳΊͯͳΒ͜͜ͱ͔Ͳ͏Ͱ͠ΐ͏ˣ
 http://www.tohoho-web.com/wwwbeg.htm • ͱ͍͏͔࣮͸օ͞Μ΋͏෼͔ͬͯΔʁ 15

  15. HTMLͷจ๏ <λά ଐੑ=஋>಺༰</λά>
 
 <div>
 <a href="http://google.com">͙ʔ͙Δ</a>
 </div>
 
 


    <!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
 <title>λΠτϧ</title>
 </head>
 <body>
 ͜͜ʹ಺༰
 </body>
 </html> 16

  16. 3. React͍ͬͯΈΑ͏ 17

  17. Reactͱ͸ • Facebook͕։ൃ͍ͯ͠ΔɺHTML(DOM)ͷ؅ཧΛߦ͏ JavaScriptϥΠϒϥϦ • ʢMVCͰ͍͏ͱ͜ΖͷVʣ • ۩ମతʹ͸ɺComponentͱ͍͏ݟͨ໨Λ؅ཧ͢ΔΦ ϒδΣΫτΛෳ਺࡞ͬͯ૊Έ߹Θ͍ͤͯ͘ •

    JavaScriptʹHTMLΛ͚ͬͭͨ͘Έ͍ͨͳJSXͱ͍͏จ ๏͕࢖͑Δ 18

  18. JSX? 19

  19. ۩ମతʹ͸͜͏͍͏ײ͡ͷ render: function() {
 return (
 <div className="commentBox">
 Hello, world!

    I am a CommentBox.
 </div>
 );
 } 
 render: function () {
 return (
 React.createElement('div', {className: "commentBox"},
 "Hello, world! I am a CommentBox."
 )
 );
 } 20 JSX JS

  20. ͱΓ͋͑ͣίʔυΛݟͯΈΑ͏ 21

  21. αϯϓϧίʔυΛ༻ҙ͠·ͨ͠ 22

  22. /KC3/01hello/index.htmlΛ։͍ͯΈΑ͏ <!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
 <title>React.js example</title>


    <link rel="stylesheet" href="../shared/css/base.css" />
 <script src="../../build/react.js"></script>
 <script src="../../build/JSXTransformer.js"></script>
 </head>
 <body>
 <h1>React.js example</h1>
 <div id="container">
 ͜Ε͕ݟ͍͑ͯΔ৔߹ɺ͋ͳͨͷίʔυ͸ਖ਼͘͠ಈ͍͍ͯ·ͤΜ:(
 </div>
 <script type="text/jsx">
 var Hello = React.createClass({
 render: function() {
 return <p>Hello, {this.props.message}!</p>;
 }
 });
 React.render(
 <Hello message="React" />,
 document.getElementById("container")
 );
 </script>
 </body>
 </html> 23

  23. /KC3/01hello/index.htmlΛ։͍ͯΈΑ͏ <div id="container">
 ͜Ε͕ݟ͍͑ͯΔ৔߹ɺ͋ͳͨͷίʔυ͸ਖ਼͘͠ಈ͍͍ͯ·ͤΜ:(
 </div>
 <script type="text/jsx">
 var Hello =

    React.createClass({
 render: function() {
 return <p>Hello, {this.props.message}!</p>;
 }
 });
 React.render(
 <Hello message="React" />,
 document.getElementById("container")
 );
 </script> 24

  24. props • Componentʹ஋Λ౉͢ํ๏ͷ1ͭ • Component಺Ͱpropsͷ஋͸ಡΈࠐΊΔ͚Ͳɺ
 ॻ͖׵͑Δ͜ͱ͸Ͱ͖ͳ͍ 25 ComponentͷϞδϡʔϧԽ

  25. ͍·͍ͪศར͕͞఻ΘΒͳ͍… 26

  26. /KC3/02text/index.html var Text = React.createClass({
 getInitialState: function() {
 return {

    text: "" };
 },
 onChangeText: function(e) {
 this.setState({ text: e.target.value });
 },
 render: function() {
 return <div>
 <input type="text" value={this.state.text}
 onChange={this.onChangeText} />
 <p>{this.state.text}</p>
 </div>;
 }
 });
 React.render(
 <Text />,
 document.getElementById("container")
 ); 27

  27. state • Component͕࣋ͭॻ͖׵͑Մೳͳ஋ • state͕ॻ͖׵ΘΔͱɺstateΛར༻͍ͯ͠ΔDOM΋
 ࣗಈతʹॻ͖׵ΘΔ 28 “React”ive!!

  28. ૣ଎Ͱ͕͢ • ToDoΞϓϦΛ࡞ͬͯΈ·͠ΐ͏ • ΍Δ͜ͱ(ToDo)Λ௥Ճ͍͖ͯ͠
 ऴΘͬͨ΋ͷ͸νΣοΫ • ࡞ྫΛ /KC3/03todo ʹ


    ஔ͍͍ͯ·͢ 29

  29. Component Component Component Component

  30. ToDoΞϓϦͷํ਑ • ToDoΞϓϦຊମʹͳΔTodo Componentͱɺ΍Δ͜ͱ ͷ1߲໨Λද͢Task ComponentΛ࡞͍ͬͯ͘ɻ • Todo Component͸͖ͬ͞࡞ͬͨText ComponentΛ΋ͱ

    ʹ࡞੒͠·͢ɻ 31

  31. Todo Component var Todo = React.createClass({
 getInitialState: function() {
 return

    {text: “", tasks: []};
 },
 - - - - - - -
 render: function() {
 var tasks = []
 this.state.tasks.map(function(e, i) {
 tasks.push(
 <Task key={i} id={i} text={e.text}
 complete={e.complete} />);
 }, this);
 return <div>
 <form onSubmit={this.onSubmitText}>
 <input type="text" value={this.state.text}
 onChange={this.onChangeText} />
 <button type="submit">௥Ճ</button>
 </form>
 <h3>ToDo</h3>
 <ul>{tasks}</ul>
 </div>; } 32

  32. Todo Component onSubmitText: function(e) {
 e.preventDefault();
 if (this.state.text !== "")

    {
 var newTasks = this.state.tasks.concat({
 text: this.state.text,
 complete: false
 });
 this.setState({
 text: "",
 tasks: newTasks
 });
 }
 }, 33

  33. Task Component var Task = React.createClass({
 render: function() {
 return

    <li>
 <input type="checkbox" checked={this.props.complete} />
 {this.props.text}
 </li>;
 }
 }); 34
  34. None

  35. Todo Task λεΫ࡞੒ onSubmitText

  36. Todo Task λεΫ࡞੒ onSubmitText νΣοΫϘοΫε ΫϦοΫ

  37. Task Component var Task = React.createClass({
 onChangeCheckbox: function() {
 this.props.onChange(this.props.id);


    },
 render: function() {
 return <li>
 <input type="checkbox" onChange={this.onChangeCheckbox} checked={this.props.complete} />
 {this.props.text}
 </li>;
 }
 }); 38

  38. Todo Component onChange: function(key) {
 var target = this.state.tasks[key];
 var

    newTasks = this.state.tasks.filter(function(e, i) {
 return i !== key;
 }).concat({
 text: target.text,
 complete: !target.complete
 });
 this.setState({tasks: newTasks});
 }, - - - - - - tasks.push(
 <Task key={i} id={i} text={e.text}
 complete={e.complete} onChange={this.onChange}/>); 39

  39. Todo Component render: function() {
 var tasks = [];
 var

    done = [];
 this.state.tasks.map(function(e, i) {
 if (e.complete) {
 done.push(
 <Task key={i} id={i} text={e.text}
 complete={true} onChange={this.onChange}/>);
 } else {
 tasks.push(
 <Task key={i} id={i} text={e.text}
 complete={false} onChange={this.onChange}/>);
 }
 }, this);
 return <div>
 :
 <h3>ToDo</h3>
 <ul>{tasks}</ul>
 <h3>Complete</h3>
 <ul>{done}</ul>
 </div>; 40
  40. None

  41. 4. JSλεΫϥϯφʔͷ͍Δ೔ৗ 42

  42. index.html͚ͩͩͱ… • ·͋͜͏ͳΔͱࢥ͍·͢ 43 function Rule(pos) {
 this.pos = pos;


    }
 return Rule;
 })();
 
 var Stylesheet = (function(parent) {
 function Stylesheet(pos, styles) {
 parent.call(this, pos);
 this.styles = styles;
 }
 Stylesheet.prototype.toString = function() {
 return "StyleSheet\n"
 + this.styles.map(function(e) {
 return prettify(e);
 }).join("\n");
 };
 return Stylesheet;
 })(Rule);
 
 var RuleList = (function(parent) {
 function RuleList(pos, rules) {
 parent.call(this, pos);
 this.rules = rules;
 }
 RuleList.prototype.toString = function() {
 return "RuleList\n"
 + this.rules.map(function(e) {
 return prettify(e);
 }).join("\n");
 };
 return RuleList;
 })(Rule);
 
 var AtRule = (function(parent) {
 function AtRule(pos, atKeywordToken, componentValues, tail) parent.call(this, pos);
 this.atKeywordToken = atKeywordToken;
 this.componentValues = componentValues;
 this.tail = tail;
 }
 AtRule.prototype.toString = function() {
 return "AtRule\n"
 + prettify(this.atKeywordToken) + "\n"
 + this.componentValues.map(function(e) {
 return prettify(e);
 }).join("\n") + "\n"
 + prettify(this.tail);
 };
 return AtRule;
 })(Rule);
 
 var QualifiedRule = (function(parent) {
 function QualifiedRule(pos, componentValues, braceBlock) {
 parent.call(this, pos);
 this.componentValues = componentValues;
 this.braceBlock = braceBlock;
 }
 QualifiedRule.prototype.toString = function() {
 return "QualifiedRule\n"
 + this.componentValues.map(function(e) {
 return prettify(e);
 }).join("\n") + "\n"
 + prettify(this.braceBlock);
 };
 return QualifiedRule;
 })(Rule);
 
 var DeclarationList = (function(parent) {
 function DeclarationList(pos, declarations) {
 parent.call(this, pos);
 this.declarations = declarations;
 }
 DeclarationList.prototype.toString = function() {
 return "DeclarationList\n"
 + this.declarations.map(function(e) {
 return prettify(e);
 }).join("\n");
 };
 return DeclarationList;


  43. ϑΝΠϧΛ෼ׂ͠Α͏ 44

  44. Ͳ͏΍ͬͯʁ • JSϑΝΠϧΛෳ਺࡞ͬͯ<script/>ͰಡΈࠐΉ • <script/><script/><script/> … • ผϑΝΠϧͷม਺Λ૬ޓʹࢀর͍ͨ͠ͱ͖ʹ͸ʁ • ͕Μ͹Δ

    • Reactiveͱ͸… 45

  45. Browserify࢖͓͏ • require()͕࢖͑ΔΑ͏ʹͳΓ·͢ • Node.jsΛΠϯετʔϧͯ͠
 $ npm install -g browserify

    • (͜ͷ͋ͨΓͷ෼໺͸܈༤ׂڌͳͷͰɺ֤छϥΠϒϥϦ ͷࢥ૝ɺকདྷੑʹ͍ͭͯΑ͘ௐ΂ͯɺ͓޷͖ͳ΋ͷΛ ࢖͍·͠ΐ͏) • ݕࡧΩʔϫʔυ: RequireJS, webpack, ES6, Babel.js 46

  46. /KC3/04comp/ /KC3/04comp/task.jsx var React = require("react");
 var Task = React.createClass({

    : module.exports = Task; /KC3/04comp/task.jsx var Task = require("./task.jsx");
 var Todo = React.createClass({
 :
 React.render(
 <Todo />,
 document.getElementById("container")
 ); 47

  47. ʮBrowserifyʯ࢖ͬͯΈͨɻ • $ npm init
 ద౰ʹEnterԡͯ͠Δͱɺʮpackage.jsonʯͱ͍͏ϑΝΠϧ͕ ࡞੒͞Ε·͢ • $ npm

    install react browserify reactify
 ʮreactʯʮbrowserifyʯʮreactifyʯΛΠϯετʔϧ • $ browserify -t reactify
 todo.jsx > bundle.js • bundle.js͕࡞ΒΕΔʂ 48

  48. ͞ΒͳΔߴΈ΁ • GulpΛ࢖͍·͠ΐ͏ • JSλεΫϥϯφʔͷҰछ • $ npm install -g

    gulp • (͜ͷลΓͷ෼໺͸܈༤ׂڌͳͷͰ(ry 49

  49. GulpͷྲྀΕ • gulpfile.jsͷgulp.task()ͰλεΫΛఆٛ • $ gulp [command]ͰλεΫ࣮ߦʂ • αϯϓϧίʔυͰ͸defaultλεΫͱwatchλεΫΛ
 ༻ҙ͍ͯ͠·͢

    • browserifyͨ͠Γɺminifyͨ͠Γɺwatchͤͨ͞Γ 50

  50. Enjoy Reactive Coding! 51