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

Other Decks in Programming

See All in Programming
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
430
Ethereum_.pdf
nekomatu
0
460
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.3k
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
Macとオーディオ再生 2024/11/02
yusukeito
0
370
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
310
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1k
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
910
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
AI時代におけるSRE、
あるいはエンジニアの生存戦略
pyama86
6
1.1k
Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting
uskey512
1
520

Featured

See All Featured
The Invisible Side of Design
smashingmag
298
50k
Navigating Team Friction
lara
183
14k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
730
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
The Cult of Friendly URLs
andyhume
78
6k
Happy Clients
brianwarren
98
6.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
RailsConf 2023
tenderlove
29
900
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k

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