Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Reactnative はじめの一歩

790 vues

Publié le

【半年に一度の大規模会】ReactNativeにゆかりのあるスタートアップが集う会で話した発表資料です。
expo init以後、実際に開発を始めるまでに用意すべき環境構築とツールとモジュールの選定、取捨選択についてのスライドです。 #RNStartup

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Reactnative はじめの一歩

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

×