React.js ・ ReactNative ・ Redux入門2017/2/9 吉本和弘

自己紹介　　キャリアトレック　サーバサイドエンジニア ( スマホアプリも )　　　・サーバサイド（ Java ）、 iOS(Swift) 、 Android(Java)

・ AngularJS(1 系 ) + Monaca 、 ES5　　ハイブリッドアプリ・ React.js + Meteor 、 ES2015　　 WEB アプリ、ハイブリッドアプリ

過去の勉強会

今回の勉強会・ React.js + ReactNative + Redux 、 TypeScript 　　 WEB アプリ、ネイティブアプリ

吉本和弘

本日の内容React.js 、 Redux

・環境構築・ ES2015 、 TypeScript・ React.js・サンプルアプリの説明ReactNative

・環境構築・ ReactNative のコンポーネント・サンプルアプリの説明

サンプルプログラム

サンプルプログラム

Redux( 共通のロジック )

React.js ReactNative

Web iOS 、 Android アプリプレゼンテーション層

ビジネスロジック層

サンプルプログラム一覧・ React.js サンプルアプリ（ Todo アプリ）　　 https://github.com/KazuhiroYoshimoto/react-redux-todo-sample

・ ReactNative サンプルアプリ（ Todo アプリ）　　 https://github.com/KazuhiroYoshimoto/reactNativeTodoSample

・ React.js サンプルコード (React.js の説明用 )　　 https://github.com/KazuhiroYoshimoto/react-todo-sample

React.js サンプルアプリ・ React.js サンプルアプリ（ Todo アプリ）　　 https://github.com/KazuhiroYoshimoto/react-redux-todo-sample

・ React.js サンプルコード (React.js の説明用 )　　 https://github.com/KazuhiroYoshimoto/react-todo-sample

◆起動方法　　 npm start

◆ 環境構築　　 git clone [ リポジトリURL]　　 npm i

ReactNative サンプルアプリ

◆起動方法　　 npm run build　　 npm start

・ ReactNative サンプルアプリ（ Todo アプリ）　　 https://github.com/KazuhiroYoshimoto/reactNativeTodoSample

◆ 環境構築　　 git clone [ リポジトリ URL]　　 npm i　　 node_modules/@types/redux/index.d.ts を配置　　　 (https://github.com/reactjs/redux/blob/master/index.d.ts)

環境構築

・ Node モジュール　　 package.json・ webpack　　server.js 、 webpack.config.js 、 index.html・ TypeScript　　 tsconfig.json

環境構築

Node モジュール一覧開発用モジュール (development) ・ webpack　　ビルドツール ・ webpack-dev-server　　ローカルでビルド、サーバー起動 ・ tsloader　　 TypeScript を JavaScript に変換 ・ typescript　　

本番用モジュール (production) ・ react　　 React・ react-dom　　 Component のレンダリング・ redux・ react-redux・型定義ファイル (@types) 　　

環境構築 (Node モジュール )・ npm init

・ npm i --save react react-dom redux react-redux

・ npm i --save @types/react @types/react-dom @types/redux

　 @types/react-redux

・ npm i --save-dev webpack webpack-dev-server ts-loader typescript

・ package.json を修正

package.jsondependencies

production パッケージ本番用devDependencies

development パッケージ開発用、本番環境ではインストールされないscripts 実行スクリプト（起動など）

package.jsonproduction development

script「 npm start 」でサーバーを起動

webpack・ JavaScript 、 TypeScript などのビルドツール・ webpack-dev-server を使えば、　ローカル環境でビルド、サーバー起動ができる・ webpack-dev-server 　　　　 Express 製のサーバーで webpack-dev-middleware を使って　　　 webpack のビルドを行う

webpack （環境構築）・ server.js を作成・ webpack.config.js を作成・ index.html を作成

server.js

・ webpack-dev-server を起動・ webpack でビルド・ビルド設定は webpack.config.js・ビルドしたファイルの公開用パスは　 webpack.config の output.publicPath　　

webpack.config.jswebpack のビルド設定　・ entry　　　起点となるファイル　・ output　　　ファイルの出力先は「 /dist/bundle.js 」　　　公開用パスは「 /public/bundle.js 」　・ loaders　　　 loaders:[‘ts’]　　　　 TypsScrpit のファイルを JavaScript に変換　　

index.html 、 Index.tsx

・ Index.tsx　 ReactDom によって「 <div id=“app”></div> 」　 に Components がレンダリングされる

index.html

Index.tsx(webpack.config の entry)

・ index.html　「 /public/bundle.js 」が実行

・「 localhost:3000 」にアクセス　「 /index.html 」が実行

・ bundle.js　　 webpack.config.entry の「 Index.tsx 」が実行

TypeScript

TypeScript （環境構築）・ tsc -init・ tscconfig.json を書き換える

tsconfig.json・ compilerOpsions　　「 ./dist/ 」にビルドしたファイルを出力　　 es2015 形式で出力・ files　　コンパイル対象のファイルを指定

TypeScript・ TypeScript は最新の JS の仕様である ES2015 （ ES6 ）に準拠・静的型付けやアクセス修飾子がある・型などのチェックが厳しいため、保守が必要になる大規模開発に向いてる・ TS ファイルをコンパイル（トランスパイル）して JS ファイルとして出力

TypeScriptReact.Component の Props,State の補完、型チェックができる

DispachActions クラス

Todo クラスProps,State の型を interface で定義し、React Component にジェネリクスで渡す

型 (TypeScript)データ型 説明number 数値string 文字列

boolean 真偽値any なんでも可能

let 変数名 : 型名let a: number = 10let b:string = ‘a’let c:boolean = true

型定義ファイル (TypeScript)・型情報のみを記述したスクリプトファイルを参照する仕組み・ Javascript ライブラリにその型定義ファイルがあれば、　 TypeScript からでも JS ライブラリが扱える・ Typings や @types(typeScript2.0 以降 ) で　型定義ファイルを管理

ES2015 、 TypeScript( 文法 )

ES2015 、 TypeScript の文法・クラス (ES2015)・ export 、 import(ES2015)・アロー関数 (ES2015)・スプレッド演算子 (ES2015)・ Object.assign(ES2015)・インターフェイス (TypeScript)・ジェネリクス (TypeScript)

＊サンプルアプリで使っているもののみ

クラス (ES2015)・クラス構文・ constructor　　コンストラクタ。　　省略した場合は引数を持たない　　空の自動コンストラクタ。　　 TypeScript だと、　　コンストラクタの引数に　　 public,private を付けることで　　同名のプロパティを宣言し、　　初期化できる

export 、 import(ES2015)

export default 　→ import xxx from [ ファイル名 ]

export 　→ import {[ モジュール名 ]} from [ ファイル名 ]

アロー関数 (ES2015)

function (x) {return ・・・ }

無名関数の省略記法(x) => {return ・・・ }

x => ・・・

スプレッド演算子 (ES2015)・配列の中で配列を展開する

Object.assign(ES2015)・オブジェクトをマージする

・オブジェクトをコピーする

インターフェイス (TypeScript)・中身の実装を持たず、メンバーや型の定義だけ持つ

ジェネリクス (TypeScript)

・抽象化されたデータ型を表現する・引数である型を抽象的に使う

React.js

React.js

・ Component・ Props・ State

ComponentTodoListComponent

TodoComponent

TodoComponent

TodoComponent

・ TodoListComponent の中で　各要素の TodoComponent　を表示

Props 、 StateTodoListComponent　　 State: Todo[]

TodoComponent

Todo(Props)

タスクを Todo 型として定義

TodoListComponent・ State にタスクを保持する　　 Todo 型の配列・各々のタスクを　 TodoComponent に受け渡す

TodoComponent・ Props から受け取ったタスクを　表示する　　 {this.props.todo.text}

Redux

Redux

ActionStore

Component(React) State

Dispacher

Reducer

Provider(React-Redux)＊ Middleware 関連は省略

Redux要素 ファイル React or Redux レイヤー

Action ActionTypes.ts

Redux ビジネスロジック層(ReactNative と共通 )

Dispatcher Dispatcher.tsStore Store.tsState State.ts

Reducer Reducer.tsProvider Index.tsx React-Redux プレゼンテーション層

Component Component.tsx React

Action （ ActionTypes.ts ）・ Action は Store の State を変更するためのメッセージ・ Action の種別を定義する・ Action の処理は Reducer に実装する

Dispatcher （ Dispatcher.ts ）・ dispach 関数が　 Action を Reducer に渡す

・ dispach 関数を呼び出す

Store （ Store.ts ）・ createStore 関数　　 Store に Reducer を追加する・ combileReducers 関数　　複数の reducer を統合する

・ Action と Reducer をまとめるオブジェクト

State （ State.ts ）・アプリケーションの状態を保持する・ Reducer によって更新される

Reducer （ Reducer.ts ）・ state と action を受け取って　 state を返す関数

・ (state,action) => state

・ Action の処理を実装

・ State を変更するときには、　新しい State データを作る　（ Object.assign({},original,new) ）

Provider （ Index.ts ）・ Store(Redux) と Component(React) を紐付け

-connect 関数　　 connect(mapStateToProps,mapDispatchToProps)(component)

mapStateToProps ・・・ state(Redux) を props に変換mapDispatchToProps ・・・ dispach の呼び出しを props に変換

Components

Component （ Component.tsx）TodoListComponent

TodoComponent

TodoComponent

TodoComponent

TodoFormComponent・ Components の中で　 TodoFormComponent と　 TodoListComponent を表示・ TodoListComponent の中で　各要素の TodoComponent を表示

Component （ Component.tsx）

Components

TodoFormComponentTodoListComponent

TodoComponent

Store(Redux)TodoList(State),Action

TodoList(State),Action

Todo(State),Action

Action

Index.tsx(React-Redux)

TodoList(State),Action

Components （ Component.tsx）・下記のコンポーネントから構成　　 -TodoFormComponent　　 -TodoListComponent・ TodoFormComponent　　に Action を受け渡す・ TodoListComponent　　に State,Action を受け渡す

TodoFormComponent （ Component.tsx ）・ State に入力データを保持　　 (this.state.text)

・ input タグの onChange イベント　 - コンポーネントの State を更新・ formの onSubmitイベント　 -this.state.textを取得する　 -Todoオブジェクトを作成　 -ADD_TODOアクションを呼び出す

TodoListComponent （ Component.tsx ）・各々のタスクを　 TodoComponent に受け渡す

・ TodoComponent に　　 Todo(State),Action を受け渡す

TodoComponent （ Component.tsx）・リストの１つの列を表示

・ li タグの onClick イベント　 -COMPLETE_TODO アクション を呼び出す

React Native

React Native・ iOS 、 Android の Native モバイルアプリケーションを　作成するための JavaScript フレームワーク・ JavaScript 、 React.js で iOS,Android アプリを作れる・ iOS 、 Android でコードを共有できる

環境構築

Node モジュール一覧本番用モジュール (production)・ react・ react-native・ redux・ react-redux・型定義ファイル (@types) 　　

React Native （環境構築１）・ brew install node・ brew install watchman・ npm install -g react-native-cli・ react-native init [ プロジェクト名 ]

https://facebook.github.io/react-native/docs/getting-started.html#content

React Native （環境構築 2 ）・ npm i -g typescript・ npm i --save react react-native redux react-redux・ npm i --save @types/react @types/react-native @types/redux @types/react-redux・ package.json を書き換える

React Native （環境構築 3 ）・ node_modules/@types/redux/index.d.ts を配置　　　 (https://github.com/reactjs/redux/blob/master/index.d.ts)

・ tsc -init・ tsconfig.json を書き換える・ index.ios.js 、 index.android.js を書き換える

package.jsonproduction

scripts ・「 npm run build 」でビルド　（「 --watch 」変更を検知して自動的にコンパイル）・「 npm run ios 」で実行　（ Android の場合は「 npm run android 」）

tsconfig.json・ compilerOptions　　 ES2015 形式で「 build 」フォルダに出力・ files　　ビルド対象は「 ./src/Index.tsx 」

index.ios.js 、 index.android.js・「 index.ios.js 」「 index.android.js 」ファイルを呼び出す

Redux要素 ファイル React or Redux レイヤー

Action ActionTypes.ts

Redux ビジネスロジック層Dispatcher Dispatcher.ts

Store Store.tsState State.ts

Reducer Reducer.tsProvider Index.tsx React-Redux プレゼンテーション層

Component Component.tsx React

＊ Component 以外は、 WEB版と同じ

Components

Components （ Component.tsx）TodoListComponent

TodoComponent

TodoComponent

TodoComponent

TodoFormComponent・ Components の中で　 TodoFormComponent と　 TodoListComponent を表示

・ TodoListComponent の中で　各要素の TodoComponent　を表示

Component （ Component.tsx）・コンポーネント構成は WEB版と同じ・ ReactNative が用意している　 Componet を利用して UI を構成する

Components

TodoFormComponentTodoListComponent

TodoComponent

Store(Redux)TodoList(State),Action

TodoList(State),Action

Todo(State),Action

Action

Index.tsx(React-Redux)

TodoList(State),Action

ReactNative の Component・ View　　画面を表示するコンポーネント、 html だと div のようなもの・ TextInput　　テキストを入力するコンポーネント　　 onChangeText イベント・・・テキストの値が変わったとき・ TouchableHighlight　　 Toch イベントを検知するコンポーネント　　 onPress イベント・・・コンポーネントが押されたとき・ Button　　ボタンを表現するコンポーネント　　 onPress イベント・・・ボタンが押されたとき

ReactNative の Component・ ListView　　リストを表現するコンポーネント const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}) const dataSource = ds.cloneWithRows( [ 配列のデータ ] )

return ( <ListView dataSource={dataSource} renderRow={(data) => [1 列の View] }/> )

https://facebook.github.io/react-native/docs/listview.html

Components(Component.tsx)

・下記のコンポーネントから構成　　 -TodoFormComponent　　 -TodoListComponent・ TodoFormComponent　　に Action を受け渡す・ TodoListComponent　　に State,Action を受け渡す

TodoFormComponent(Component.tsx)・ State に入力データを保持 (this.state.text)

・ Button の onPress イベント　　 -this.state.text を取得する　　 -Todo オブジェクトを作成　　 -ADD_TODO アクションを呼び出す

・ TextInput の onChangeText イベント　　 - コンポーネントの State を更新する

TodoListComponent(Component.tsx)

・各々のタスクを　 TodoComponent に受け渡す

・ TodoComponent に　　 Todo(State),Action を受け渡す

TodoComponent(Component.tsx)

・リストの１つの列を表示・ TouchableHighlight の onPress イベント　 -COMPLETE_TODO アクション 　を呼び出す

参考・ Redux 、 TypeScript

https://github.com/imagepit/typescript-react-redux-todo-sample

・ ReactNative 、 TypeScripthttps://github.com/mrpatiwi/ReactNativeTS