https://vtecx.connpass.com/event/63341 の資料です

1. Copyright © Virtual Technology, Inc
Reactとvte.cxでWebアプリ
ケーションを作成する#1
2017/8/23 ⽵嵜 伸⼀郎(@stakezaki)
1
<動作確認~ソース解説>

2. Copyright © Virtual Technology, Inc
⽵嵜 伸⼀郎 （たけざき しんいちろう）
twitter id:stakezaki
（有）バーチャルテクノロジー代表取締役
元⽇本IBM
元株式会社暮らしのデザインCTO
2

3. Copyright © Virtual Technology, Inc
React+vte.cx勉強会
• Reactのサンプルアプリの内容を解説し、実
際の開発を体験してもらいます
＜タイムテーブル＞
18:30 ~ 19:30 サンプルアプリのセットアップと解説
19:35 ~ 20:35 ソースコードの解説
20:35 ~ 20:45 質疑応答
3

4. Copyright © Virtual Technology, Inc
サンプルアプリのセットアップ
• Visual Studio Codeの導⼊
– https://code.visualstudio.com/download
• Windowsの場合、git for windowsの導⼊
– https://git-for-windows.github.io/
• あとは、以下のqiitaの記事を⾒ながら
セットアップ
– http://qiita.com/stakezaki/items/0401d7
9d392b081fb85e
4

5. Copyright © Virtual Technology, Inc
Reactの概要
• ReactはFacebookが公開しているライブラ
リでUIを効率的に構築することができる
– HTMLに似たJSXのテンプレートを使うことで
直感的にUIを記述できる(仮想DOM)
– コンポーネントの組み合わせで全体のアプリを
構築する
5

6. Copyright © Virtual Technology, Inc
Reactの最も効率的な学習⽅法
• Quick Startを⼀通り動作確認する
– https://facebook.github.io/react/docs/hell
o-world.html
6

7. Copyright © Virtual Technology, Inc
ES2015(ES6)も覚えましょう
• let・constキーワードによる変数宣⾔
• class構⽂
• importとexportによるモジュール構⽂
• アロー関数（Arrow Functions）
• その他、テンプレート⽂字列などいくつ
かある
7

8. Copyright © Virtual Technology, Inc
基本構⽂
• class xxx extends React.components
• render()
• ReactDOM.render(<LoginForm />,
document.getElementById('container'))
8

9. Copyright © Virtual Technology, Inc
エラー表⽰のテクニック
{ this.state.isLoginFailed &&
<FormGroup>
・・・
}
• State.inLoginFailedがtrueのときだけエ
ラーを表⽰する
9

10. Copyright © Virtual Technology, Inc
importとexport
• export default foo
• import foo from ʻfooʼ
• import {Form,Col} from 'react-
bootstrap'
10

11. Copyright © Virtual Technology, Inc
state
• this.state
• 更新すると再描画される（render()が実
⾏）
– 更新は、this.setState()を使う
– stateを直接は更新できない
11

12. Copyright © Virtual Technology, Inc
アロー関数
• <Form horizontal
onSubmit={(e)=>this.handleSubmit
(e)}>
• arrow関数を使えばbindしなくてもよい
• function(e) =
{this.handleSubmit(e).bind(this)}
12

13. Copyright © Virtual Technology, Inc
型
• 型があれば10%〜20%のバグを減らすこ
とができるとの調査結果
• サーバサイドにおける動的型付け⾔語疲れ
13

14. Copyright © Virtual Technology, Inc
flow
• 静的型付けにより、実⾏前に型エラーを
検出可能な⾔語
/* @flow */
import axios from 'axiosʼ
import type {
State,
Props,
InputEvent
} from 'demo.types'
14

15. Copyright © Virtual Technology, Inc
LoginForm
• <ReCAPTCHA>コンポーネント
• handleSubmit()のe.preventDefault()
• axios
– /d/?_login
– X-WSSE : authToken
– 'X-Requested-With': 'XMLHttpRequestʼ
• http://qiita.com/stakezaki/items/d382
fd100abcba200963
15

16. Copyright © Virtual Technology, Inc
demo.js
• react-router-dom
– <ListItems>、<ItemInput>、
<ItemUpdate>コンポーネント表⽰を切り替
える
• 開発時はそれぞれのコンポーネントを
別々に作成して最後にまとめる
16

17. Copyright © Virtual Technology, Inc
demo_iteminput.js
• uncontrolled form
– <FormGroup controlId={hobby_type}>
• テーブル等を扱う場合はkeyが必要
– <tbody key={row.toString()}>
– Reactのルールと考えればよい
• Rowsの数だけ⾏を表⽰
– {this.state.rows.map(row =>
this.HobbyForm(row))}
• addRow
– rows: prevState.rows.concat([prevState.rows.length+1])
– Rowsに⾏の数を追記する
17

18. Copyright © Virtual Technology, Inc
送信データJSONの作成
• Userinfo、Favorite
– entry.userinfo = { id :
Number(e.target.id.value), email :
e.target.email.value }
• Hobby
– this.state.rows.map(row =>
entry.hobby.push({'type':
e.target['hobby_type'+row].value,
'name':
e.target['hobby_name'+row].value}))
18

19. Copyright © Virtual Technology, Inc
demo_itemupdate.js
• Controlled form
– value={this.state[hobby_name]}
– 項⽬のデフォルト表⽰をするため
• componentWillMount()
– コンポーネントを表⽰する直前に実⾏される
19

20. Copyright © Virtual Technology, Inc
vte.cxビジョン
”もうフルスタックエンジニアはいらない。
HTMLとJSの知識さえあればWebサービスを
開発できる。
そのような世界を私たちは⽬指しています。”
20

21. Copyright © Virtual Technology, Inc
9/20 勉強会#2やります！
https://vtecx.connpass.com/event/65163/
21

22. Copyright © Virtual Technology, Inc22
support@virtual-tech.net
ご質問はこちらまで