React.js・ReactNative・Redux入門

React.js・ReactNative・Redux入門

1. 1. React.js・ReactNative・Redux入門 2017/2/9 吉本和弘
2. 2. 自己紹介 キャリアトレック サーバサイドエンジニア(スマホアプリも) ・サーバサイド（Java）、iOS(Swift)、Android(Java) ・AngularJS(1系) + Monaca、ES5 ハイブリッドアプリ ・React.js + Meteor、ES2015 WEBアプリ、ハイブリッドアプリ 過去の勉強会 今回の勉強会 ・React.js + ReactNative + Redux、TypeScript WEBアプリ、ネイティブアプリ 吉本和弘
3. 3. 本日の内容 React.js、Redux ・環境構築 ・ES2015、TypeScript ・React.js ・サンプルアプリの説明 ReactNative ・環境構築 ・ReactNativeのコンポーネント ・サンプルアプリの説明
4. 4. サンプルプログラム
5. 5. サンプルプログラム Redux(共通のロジック) React.js ReactNative Web iOS、Androidアプリ プレゼンテーション層 ビジネスロジック層
6. 6. サンプルプログラム一覧 ・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
7. 7. 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
8. 8. 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)
9. 9. 環境構築
10. 10. ・Nodeモジュール package.json ・webpack server.js、webpack.config.js、index.html ・TypeScript tsconfig.json 環境構築
11. 11. Nodeモジュール一覧 開発用モジュール(development) ・webpack ビルドツール ・webpack-dev-server ローカルでビルド、サーバー起動 ・tsloader TypeScriptをJavaScriptに変換 ・typescript 本番用モジュール(production) ・react React ・react-dom Componentのレンダリング ・redux ・react-redux ・型定義ファイル(@types)
12. 12. 環境構築(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を修正
13. 13. package.json dependencies productionパッケージ 本番用 devDependencies developmentパッケージ 開発用、本番環境ではインストールされない scripts 実行スクリプト（起動など）
14. 14. package.json production development script 「npm start」でサーバーを起動
15. 15. webpack ・JavaScript、TypeScriptなどのビルドツール ・webpack-dev-serverを使えば、 ローカル環境でビルド、サーバー起動ができる ・webpack-dev-server Express製のサーバーでwebpack-dev-middlewareを使って webpackのビルドを行う
16. 16. webpack（環境構築） ・server.jsを作成 ・webpack.config.jsを作成 ・index.htmlを作成
17. 17. server.js ・webpack-dev-serverを起動 ・webpackでビルド ・ビルド設定はwebpack.config.js ・ビルドしたファイルの公開用パスは webpack.configのoutput.publicPath
18. 18. webpack.config.js webpackのビルド設定 ・entry 起点となるファイル ・output ファイルの出力先は「/dist/bundle.js」 公開用パスは「/public/bundle.js」 ・loaders loaders:[‘ts’] TypsScrpitのファイルをJavaScriptに変換
19. 19. 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」が実行
20. 20. TypeScript
21. 21. TypeScript（環境構築） ・tsc -init ・tscconfig.jsonを書き換える
22. 22. tsconfig.json ・compilerOpsions 「./dist/」にビルドしたファイルを出力 es2015形式で出力 ・files コンパイル対象のファイルを指定
23. 23. TypeScript ・TypeScriptは最新のJSの仕様であるES2015（ES6）に準拠 ・静的型付けやアクセス修飾子がある ・型などのチェックが厳しいため、保守が必要になる大規模開発に向いてる ・TSファイルをコンパイル（トランスパイル）してJSファイルとして出力
24. 24. TypeScript React.ComponentのProps,Stateの 補完、型チェックができる DispachActionsクラス Todoクラス Props,Stateの型をinterfaceで定義し、 React Componentにジェネリクスで渡す
25. 25. 型(TypeScript) データ型 説明 number 数値 string 文字列 boolean 真偽値 any なんでも可能 let 変数名: 型名 let a: number = 10 let b:string = ‘a’ let c:boolean = true
26. 26. 型定義ファイル(TypeScript) ・型情報のみを記述したスクリプトファイルを参照する仕組み ・Javascriptライブラリにその型定義ファイルがあれば、 TypeScriptからでもJSライブラリが扱える ・Typingsや@types(typeScript2.0以降)で 型定義ファイルを管理
27. 27. ES2015、TypeScript(文法)
28. 28. ES2015、TypeScriptの文法 ・クラス(ES2015) ・export、import(ES2015) ・アロー関数(ES2015) ・スプレッド演算子(ES2015) ・Object.assign(ES2015) ・インターフェイス(TypeScript) ・ジェネリクス(TypeScript) ＊サンプルアプリで使っているもののみ
29. 29. クラス(ES2015) ・クラス構文 ・constructor コンストラクタ。 省略した場合は引数を持たない 空の自動コンストラクタ。 TypeScriptだと、 コンストラクタの引数に public,privateを付けることで 同名のプロパティを宣言し、 初期化できる
30. 30. export、import(ES2015) export default → import xxx from [ファイル名] export → import {[モジュール名]} from [ファイル名]
31. 31. アロー関数(ES2015) function (x) {return ・・・} 無名関数の省略記法 (x) => {return ・・・} x => ・・・
32. 32. スプレッド演算子(ES2015) ・配列の中で配列を展開する
33. 33. Object.assign(ES2015) ・オブジェクトをマージする ・オブジェクトをコピーする
34. 34. インターフェイス(TypeScript) ・中身の実装を持たず、メンバーや型の定義だけ持つ
35. 35. ジェネリクス(TypeScript) ・抽象化されたデータ型を表現する ・引数である型を抽象的に使う
36. 36. React.js
37. 37. React.js ・Component ・Props ・State
38. 38. Component TodoListComponent TodoComponent TodoComponent TodoComponent ・TodoListComponentの中で 各要素のTodoComponent を表示
39. 39. Props、State TodoListComponent State: Todo[] TodoComponent Todo(Props) タスクをTodo型として定義
40. 40. TodoListComponent ・Stateにタスクを保持する Todo型の配列 ・各々のタスクを TodoComponentに受け渡す
41. 41. TodoComponent ・Propsから受け取ったタスクを 表示する {this.props.todo.text}
42. 42. Redux
43. 43. Redux Action Store Component (React) State Dispacher Reducer Provider (React-Redux)＊Middleware関連は省略
44. 44. Redux 要素 ファイル React or Redux レイヤー Action ActionTypes.ts Redux ビジネスロジック層 (ReactNativeと共通) Dispatcher Dispatcher.ts Store Store.ts State State.ts Reducer Reducer.ts Provider Index.tsx React-Redux プレゼンテーション層 Component Component.tsx React
45. 45. Action（ActionTypes.ts） ・Action はStoreの State を変更するためのメッセージ ・Actionの種別を定義する ・Actionの処理はReducerに実装する
46. 46. Dispatcher（Dispatcher.ts） ・dispach関数が ActionをReducerに渡す ・dispach関数を呼び出す
47. 47. Store（Store.ts） ・createStore関数 StoreにReducerを追加する ・combileReducers関数 複数のreducerを統合する ・ActionとReducerをまとめるオブジェクト
48. 48. State（State.ts） ・アプリケーションの状態を保持する ・Reducerによって更新される
49. 49. Reducer（Reducer.ts） ・stateとactionを受け取って stateを返す関数 ・(state,action) => state ・Actionの処理を実装 ・Stateを変更するときには、 新しいStateデータを作る （Object.assign({},original,new)）
50. 50. Provider（Index.ts） ・Store(Redux)とComponent(React)を紐付け -connect関数 connect(mapStateToProps,mapDispatchToProps)(component) mapStateToProps・・・state(Redux)をpropsに変換 mapDispatchToProps・・・dispachの呼び出しをpropsに変換
51. 51. Components Component（Component.tsx） TodoListComponent TodoComponent TodoComponent TodoComponent TodoFormComponent ・Componentsの中で TodoFormComponentと TodoListComponentを表示 ・TodoListComponentの中で 各要素のTodoComponentを表示
52. 52. Component（Component.tsx） Components TodoFormComponent TodoListComponent TodoComponent Store(Redux) TodoList(State),Action TodoList(State),Action Todo(State),Action Action Index.tsx (React-Redux) TodoList(State),Action
53. 53. Components（Component.tsx） ・下記のコンポーネントから構成 -TodoFormComponent -TodoListComponent ・TodoFormComponent にActionを受け渡す ・TodoListComponent にState,Actionを受け渡す
54. 54. TodoFormComponent（Component.tsx） ・Stateに入力データを保持 (this.state.text) ・inputタグのonChangeイベント -コンポーネントのStateを更新 ・formのonSubmitイベント -this.state.textを取得する -Todoオブジェクトを作成 -ADD_TODOアクションを呼び出す
55. 55. TodoListComponent（Component.tsx） ・各々のタスクを TodoComponentに受け渡す ・TodoComponentに Todo(State),Actionを受け渡す
56. 56. TodoComponent（Component.tsx） ・リストの１つの列を表示 ・liタグのonClickイベント -COMPLETE_TODOアクション を呼び出す
57. 57. React Native
58. 58. React Native ・iOS、AndroidのNativeモバイルアプリケーションを 作成するためのJavaScriptフレームワーク ・JavaScript、React.jsでiOS,Androidアプリを作れる ・iOS、Androidでコードを共有できる
59. 59. 環境構築
60. 60. Nodeモジュール一覧 本番用モジュール(production) ・react ・react-native ・redux ・react-redux ・型定義ファイル(@types)
61. 61. 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
62. 62. 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を書き換える
63. 63. 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を書き換える
64. 64. package.json production scripts ・「npm run build」でビルド （「--watch」変更を検知して自動的にコンパイル） ・「npm run ios」で実行 （Androidの場合は「npm run android」）
65. 65. tsconfig.json ・compilerOptions ES2015形式で「build」フォルダに出力 ・files ビルド対象は「./src/Index.tsx」
66. 66. index.ios.js、index.android.js ・「index.ios.js」「index.android.js」ファイルを呼び出す
67. 67. Redux 要素 ファイル React or Redux レイヤー Action ActionTypes.ts Redux ビジネスロジック層 Dispatcher Dispatcher.ts Store Store.ts State State.ts Reducer Reducer.ts Provider Index.tsx React-Redux プレゼンテーション層 Component Component.tsx React ＊Component以外は、WEB版と同じ
68. 68. Components Components（Component.tsx） TodoListComponent TodoComponent TodoComponent TodoComponent TodoFormComponent ・Componentsの中で TodoFormComponentと TodoListComponentを表示 ・TodoListComponentの中で 各要素のTodoComponent を表示
69. 69. Component（Component.tsx） ・コンポーネント構成はWEB版と同じ ・ReactNativeが用意している Componetを利用してUIを構成する Components TodoFormComponent TodoListComponent TodoComponent Store(Redux) TodoList(State),Action TodoList(State),Action Todo(State),Action Action Index.tsx (React-Redux) TodoList(State),Action
70. 70. ReactNativeのComponent ・View 画面を表示するコンポーネント、htmlだとdivのようなもの ・TextInput テキストを入力するコンポーネント onChangeTextイベント・・・テキストの値が変わったとき ・TouchableHighlight Tochイベントを検知するコンポーネント onPressイベント・・・コンポーネントが押されたとき ・Button ボタンを表現するコンポーネント onPressイベント・・・ボタンが押されたとき
71. 71. 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
72. 72. Components(Component.tsx) ・下記のコンポーネントから構成 -TodoFormComponent -TodoListComponent ・TodoFormComponent にActionを受け渡す ・TodoListComponent にState,Actionを受け渡す
73. 73. TodoFormComponent(Component.tsx) ・Stateに入力データを保持 (this.state.text) ・ButtonのonPressイベント -this.state.textを取得する -Todoオブジェクトを作成 -ADD_TODOアクションを呼び出す ・TextInputのonChangeTextイベント -コンポーネントのStateを更新する
74. 74. TodoListComponent(Component.tsx) ・各々のタスクを TodoComponentに受け渡す ・TodoComponentに Todo(State),Actionを受け渡す
75. 75. TodoComponent(Component.tsx) ・リストの１つの列を表示 ・TouchableHighlightのonPressイベント -COMPLETE_TODOアクション を呼び出す
76. 76. 参考 ・Redux、TypeScript https://github.com/imagepit/typescript-react-redux-todo-sample ・ReactNative、TypeScript https://github.com/mrpatiwi/ReactNativeTS