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

Reactnative はじめの一歩