Download to read offline
Uploaded byPIXTA Inc.
Reactnative はじめの一歩
【半年に一度の大規模会】ReactNativeにゆかりのあるスタートアップが集う会で話した発表資料です。 expo init以後、実際に開発を始めるまでに用意すべき環境構築とツールとモジュールの選定、取捨選択についてのスライドです。 #RNStartup
Reactnative はじめの一歩
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7. モチベーション ● expoを使ったとしても、実装環境周りで迷う ● ツール、開発環境、モジュールなどを整理/整備した ●環境を整備した結果、不自由なくリリースできた
- 8. モチベーション ● expoを使ったとしても、実装環境周りで迷う ● ツール、開発環境、モジュールなどを整理/整備した ●環境を整備した結果、不自由なくリリースできた
- 9. モチベーション ● expoを使ったとしても、実装環境周りで迷う ● ツール、開発環境、モジュールなどを整理/整備した ●環境を整備した結果、不自由なくリリースできた “アプリを作る”ことに集中すべく、 expo init 以後、 実装に必要になるものを示したい
- 10.
- 11.
- 12. はじめに ● 対象 ○ ネイティブアプリ開発の経験がないWebエンジニア ●話すこと ○ expo init ~ 実装するまでの ツールやモジュールの取捨選択 ● 話さないこと ○ 詳細な実装 ○ ツールの使い方 ○ 宗教戦争 ツール/モジュール名が頻出するので、 後ほど資料は後ほど公開します！
- 13. はじめに ● 対象 ○ ネイティブアプリ開発の経験がないWebエンジニア ●話すこと ○ expo init ~ 実装するまでの ツールやモジュールの取捨選択 ● 話さないこと ○ 詳細な実装 ○ ツールの使い方 ○ 宗教戦争
- 14. 基本方針 ● 前提としてUIを無理に作り込まない ● JavaScriptの世界に閉じる ○npm run ejectをしない🙅🙅♂ ● ツールやOSSを最大限活用する
- 15. 基本方針 ● 前提としてUIを無理に作り込まない ● JavaScriptの世界に閉じる ○npm run ejectをしない🙅🙅♂ ● ツールやOSSを最大限活用する EXPO + JS製 npmモジュールで乗り切る
- 16.
- 17. 実装を取り巻く環境構築 ● 開発支援ツール ● エミュレーター ●デバッガー ● 言語と型チェック ● State管理 ● ディレクトリ構成 ● ルーティング ● API通信 ● UIコンポーネント
- 18. 開発支援ツール ● Expo 一択 ○実行環境 ○ デバイスの機能へのアクセス ○ ビルド ○ デプロイ 実装を取り巻く環境構築
- 19. エミュレーター ● iOS: Xcode ●Android ○ Android Studio ○ Genymotion 実装を取り巻く環境構築
- 20. エミュレーター ● iOS: Xcode ●Android ○ Android Studio ○ Genymotion 👈 シンプル、高速、高機能 実装を取り巻く環境構築
- 21. デバッガー ● Chrome Extention ●React Native Debugger 実装を取り巻く環境構築
- 22. デバッガー ● Chrome Extention ●React Native Debugger 👈 action, stateの差分, payloadの中身の表示 actionのリプレイ機能 長時間開いていると、メモリを食いつぶすので、 定期的に再起動が必要 😥 実装を取り巻く環境構築
- 23. 言語、型チェック ● 言語 ○ npmrun eject からのSwift / Kotlin ○ React.js ● 型チェック ○ Flowtype ○ TypeScript 実装を取り巻く環境構築
- 24. 言語、型チェック ● 言語 ○ npmrun eject からのSwift / Kotlin ○ React.js ● 型チェック ○ Flowtype ○ TypeScript 👈 Expo 32.0.0からはTypeScriptをサポート！ yarn addもbabelの設定も不要！ 実装を取り巻く環境構築
- 25. State管理 ● unstated ● MobX ●Redux 実装を取り巻く環境構築
- 26. State管理 ● unstated ● MobX ●Redux 👈 記述量 * 学習コストはReduxが最も大きい。 シェアが大きい。(採用において有利に働く) ボイラテンプレート的であるが、Redux Wayを走っていれば踏 み外すことがない。 複雑度は後述のディレクトリ管理と非同期処理で相殺 実装を取り巻く環境構築
- 27. ディレクトリ構成 ● Redux Way ●Domain Style ● Ducks 実装を取り巻く環境構築
- 28. ディレクトリ構成 ● Redux Way ●Domain Style ● Ducks ● src/ ○ actions/ ■ a.ts ■ b.ts ○ components/ ○ containers/ ○ constants/ ○ reducers/ 役割ごとにディレクトリを切る 実装を取り巻く環境構築
- 29. ディレクトリ構成 ● Redux Way ●Domain Style ● Ducks ● src/ ○ components/ ○ containers/ ○ configureStore.js ○ store/ ■ items/ ■ users/ ● actions.ts ● reducers.ts ドメインごとにディレクトリを分け、 actions, reducersを分ける middlewareはconfigureStoreに記述 action typesはaction.ts内に書く 実装を取り巻く環境構築
- 30. ディレクトリ構成 ● Redux Way ●Domain Style ● Ducks ● src/ ○ components/ ○ containers/ ○ modules/ ■ items.ts ■ users.ts 散らばったaction types, action, reducerを1つのファイルにま とめる。 moduleが肥大化すると可読性が落ちる 実装を取り巻く環境構築
- 31. ディレクトリ構成 ● Redux Way ●Rails Style ● Domain Style 🤔 ● Ducks 👈 ディレクトリ構成はアプリの規模や処理の複雑度による Snapmartの場合は比較的小規模であるため、現時点では modulesの見通しが良い。 規模や複雑度によって、Domain Styleに移行を検討。 実装を取り巻く環境構築
- 32. ルーティング ● React NativeNavigation ● React Native Router ● React Navigation 実装を取り巻く環境構築
- 33. ルーティング ● React NativeNavigation ● React Native Router ● React Navigation 👈 React Native公式推し。Reduxの相性が良い◎ React Native Routerと比較してドキュメントが充実 ルーティングとComponentを分離したい 実装を取り巻く環境構築
- 34. API通信 ● Promise async/await ●Redux Promise Middleware ● Redux Thunk ● redux-saga 実装を取り巻く環境構築
- 35. API通信 ● Promise async/await ●Redux Promise Middleware ● Redux Thunk ● redux-saga 👈 非同期処理をどこに押し付けるかが論点。 基本的には各処理を独立させたい。 実装を取り巻く環境構築
- 36. UIコンポーネント ● react-native-material-kit ● NativeBase ●React Native Elements 実装を取り巻く環境構築
- 37. UIコンポーネント ● react-native-material-kit ● NativeBase ●React Native Elements 👈 唯一JS製UI Tool Kit NativeBaseと比較してComponentが少ない(足りない)印象 そのため、npmモジュールを追加していく必要がある😢 例) Picker系, Swiper系 実装を取り巻く環境構築
- 38. まとめ 用途 ツール名 開発支援 Expo エミュレーターiOS: Xcode, Android: Genymotion デバッガー React Native Debugger 言語 TypeScript State管理 Redux ディレクトリ構成 Ducks ルーティング React Navigation API通信 axios * redux-saga UIコンポーネント React Native Elements 実装を取り巻く環境構築
- 39.
- 40.
- 41. 迷った / 今後検討 ●BaaS ○ firebase ○ amplyfy ● Testing ○ Jest ○ Detox ● CI/CD ● Analytics
- 42. 才能をつなぎ、 世界をポジティブにする We're hiring! 7336449 Photoby Sunny studio