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

2015-9-13 KC3 2015 勉強会

OUCC担当

はるさめ (@spring_raining)
React.jsでクライアントサイドな
Webアプリ入門

わたしはだれ
• はるさめ @spring_raining
• 大阪大学 3年生(2回目)
• スペースが余ったので以下おすすめのアニメです
3

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

1. 何はともあれJavaScript入門
6

JavaScript
• プログラミング言語
• (基本)ブラウザ上で動く
• 初めてならここおすすめです↓ 
http://dotinstall.com/lessons/basic_javascript_v2
• 他の言語なら分かるよという方↓ 
https://developer.mozilla.org/ja/docs/Web/JavaScript/A_re-introduction_to_JavaScript
• というか実は皆さんもう分かってる？
7

はじめよう
• 任意のブラウザを開いて、Ctrl+Shift+I (⌘+Option+I)
• 開いたら「Console」を選択
• Node.jsインストールしてる人はnodeコマンドでも
8

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]);
9

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; } 
} 
}; 
 
console.log(kobo.YRYR(3));
10

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; 
}
11

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);
12

2. 何はともあれHTML入門
13

HTML (Hyper Text Markup Language)
• プログラミングらない言語
• 世のウェブサイトはこれで出来ている
• CSSは今日はやりません_ _
• 初めてならこことかどうでしょう↓ 
http://www.tohoho-web.com/wwwbeg.htm
• というか実は皆さんもう分かってる？
14

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>
15

Reactとは
• Facebookが開発している、HTML(DOM)の管理を行う
JavaScriptライブラリ
• （MVCでいうところのV）
• 具体的には、Componentという見た目を管理するオ
ブジェクトを複数作って組み合わせていく
• JavaScriptにHTMLをくっつけたみたいなJSXという文
法が使える
17

具体的にはこういう感じの
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." 
) 
); 
}
19
JSX
JS

とりあえずコードを見てみよう
20

サンプルコードを用意しました
21

/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({ 
return <p>Hello, {this.props.message}!</p>; 
} 
}); 
React.render( 
<Hello message="React" />, 
document.getElementById("container") 
); 
</script> 
</body> 
</html>
22

/KC3/01hello/index.htmlを開いてみよう
<div id="container"> 
これが見えている場合、あなたのコードは正しく動いていません:( 
</div> 
<script type="text/jsx"> 
var Hello = React.createClass({ 
return <p>Hello, {this.props.message}!</p>; 
} 
}); 
React.render( 
<Hello message="React" />, 
); 
</script>
23

props
• Componentに値を渡す方法の1つ
• Component内でpropsの値は読み込めるけど、 
書き換えることはできない
24
Componentのモジュール化

いまいち便利さが伝わらない…
25

/KC3/02text/index.html
var Text = React.createClass({ 
getInitialState: function() { 
return { text: "" }; 
}, 
onChangeText: function(e) { 
this.setState({ text: e.target.value }); 
}, 
return <div> 
<input type="text" value={this.state.text} 
onChange={this.onChangeText} /> 
<p>{this.state.text}</p> 
</div>; 
} 
}); 
React.render( 
<Text />, 
);
26

state
• Componentが持つ書き換え可能な値
• stateが書き換わると、stateを利用しているDOMも 
自動的に書き換わる
27
“React”ive!!

早速ですが
• ToDoアプリを作ってみましょう
• やること(ToDo)を追加していき 
終わったものはチェック
• 作例を /KC3/03todo に 
置いています
28

Component
Component
Component
Component

ToDoアプリの方針
• ToDoアプリ本体になるTodo Componentと、やること
の1項目を表すTask Componentを作っていく。
• Todo Componentはさっき作ったText Componentをもと
に作成します。
30

Todo Component
var Todo = React.createClass({ 
getInitialState: function() { 
return {text: “", tasks: []}; 
}, 
- - - - - - - 
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>;
}
31

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 
}); 
} 
},
32

Task Component
var Task = React.createClass({ 
return <li> 
<input type="checkbox" checked={this.props.complete} /> 
{this.props.text} 
</li>; 
} 
});
33

Todo
Task
タスク作成
onSubmitText

Todo
Task
タスク作成
onSubmitText
チェックボックス
クリック

Task Component
var Task = React.createClass({ 
onChangeCheckbox: function() { 
this.props.onChange(this.props.id); 
}, 
return <li> 
<input type="checkbox" onChange={this.onChangeCheckbox}
checked={this.props.complete} /> 
{this.props.text} 
</li>; 
} 
});
37

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( 
complete={e.complete} onChange={this.onChange}/>);
38

Todo Component
var tasks = []; 
var done = []; 
this.state.tasks.map(function(e, i) { 
if (e.complete) { 
done.push( 
complete={true} onChange={this.onChange}/>); 
} else { 
tasks.push( 
complete={false} onChange={this.onChange}/>); 
} 
}, this); 
return <div> 
: 
<h3>ToDo</h3> 
<ul>{tasks}</ul> 
<h3>Complete</h3> 
<ul>{done}</ul> 
</div>;
39

4. JSタスクランナーのいる日常
41

index.htmlだけだと…
• まあこうなると思います
42
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 "StyleSheetn" 
+ this.styles.map(function(e) { 
return prettify(e); 
}).join("n"); 
}; 
return Stylesheet; 
})(Rule); 
 
var RuleList = (function(parent) { 
function RuleList(pos, rules) { 
this.rules = rules; 
} 
RuleList.prototype.toString = function() { 
return "RuleListn" 
+ this.rules.map(function(e) { 
}).join("n"); 
}; 
return RuleList; 
})(Rule); 
 
var AtRule = (function(parent) { 
function AtRule(pos, atKeywordToken, componentValues, tail)
this.atKeywordToken = atKeywordToken; 
this.componentValues = componentValues; 
this.tail = tail; 
} 
AtRule.prototype.toString = function() { 
return "AtRulen" 
+ prettify(this.atKeywordToken) + "n" 
+ this.componentValues.map(function(e) { 
}).join("n") + "n" 
+ prettify(this.tail); 
}; 
return AtRule; 
})(Rule); 
 
var QualifiedRule = (function(parent) { 
function QualifiedRule(pos, componentValues, braceBlock) { 
this.componentValues = componentValues; 
this.braceBlock = braceBlock; 
} 
QualifiedRule.prototype.toString = function() { 
return "QualifiedRulen" 
+ this.componentValues.map(function(e) { 
}).join("n") + "n" 
+ prettify(this.braceBlock); 
}; 
return QualifiedRule; 
})(Rule); 
 
var DeclarationList = (function(parent) { 
function DeclarationList(pos, declarations) { 
this.declarations = declarations; 
} 
DeclarationList.prototype.toString = function() { 
return "DeclarationListn" 
+ this.declarations.map(function(e) { 
}).join("n"); 
}; 
return DeclarationList;

ファイルを分割しよう
43

どうやって？
• JSファイルを複数作って<script/>で読み込む
• <script/><script/><script/> …
• 別ファイルの変数を相互に参照したいときには？
• がんばる
• Reactiveとは…
44

Browserify使おう
• require()が使えるようになります
• Node.jsをインストールして 
$ npm install -g browserify
• (このあたりの分野は群雄割拠なので、各種ライブラリ
の思想、将来性についてよく調べて、お好きなものを
使いましょう)
• 検索キーワード: RequireJS, webpack, ES6, Babel.js
45

/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 />, 
);
46

「Browserify」使ってみた。
• $ npm init 
適当にEnter押してると、「package.json」というファイルが
作成されます
• $ npm install react browserify reactify 
「react」「browserify」「reactify」をインストール
• $ browserify -t reactify 
todo.jsx > bundle.js
• bundle.jsが作られる！
47

さらなる高みへ
• Gulpを使いましょう
• JSタスクランナーの一種
• $ npm install -g gulp
• (この辺りの分野は群雄割拠なので(ry
48

Gulpの流れ
• gulpﬁle.jsのgulp.task()でタスクを定義
• $ gulp [command]でタスク実行！
• サンプルコードではdefaultタスクとwatchタスクを 
用意しています
• browserifyしたり、minifyしたり、watchさせたり
49

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

More Related Content

What's hot (20)

Similar to React.jsでクライアントサイドなWebアプリ入門 (20)

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