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

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

spring_raining
September 13, 2015
Programming
0
420

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.6k
Vivliostyle CLIで広がるCSS組版のエコシステム / Vivliostyle user & developer meetup 2020 autumn
spring_raining
0
2.3k
Markdownの複雑化と締め切りのはざまで / Vivliostyle meetup
spring_raining
0
770
JavaScriptでもディープラーニングってやつでなんとかして / Kyoto.js 15
spring_raining
2
2k
CSS組版の救世主 Vivliostyle / HTML5 Conference 2018
spring_raining
6
7.3k
印刷・出版のためのオンラインエディタ Viola / Viola - Online editor for printing and publishing
spring_raining
3
630
Printable Web
spring_raining
3
820
今こそCSS組版
spring_raining
5
2.3k
シン・サーバの形は。
spring_raining
0
300

Other Decks in Programming

See All in Programming
What We Can Learn From OSS
inouehi
0
420
Java 22 Overview
kishida
1
180
Goのエラースタックトレースの歴史と今後
sonatard
7
1.3k
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
330
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
180
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
550
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
330
"config" ってなんだ？ / What is "config"?
okashoi
0
240
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
⼤規模⾔語モデルの拡張（RAG）が 終わったかも知れない件について
nearme_tech
23
15k
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
370

Featured

See All Featured
Designing with Data
zakiwarfel
96
4.8k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
What's new in Ruby 2.0
geeforr
337
31k
Making Projects Easy
brettharned
108
5.5k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Designing for Performance
lara
601
67k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
A designer walks into a library…
pauljervisheath
200
23k
Optimizing for Happiness
mojombo
370
69k

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