Reactnative はじめの一歩

ReactNative
はじめの一歩
ピクスタ株式会社　星直史
16545027 Photo by Fast&Slow

自己紹介
Railsを主戦場にAWS, Reactでも実装している。
2018年1月より開発部の部長に就任。
エンジニアの採用、育成、組織作りに取り組んでいる。
星直史
@NaoshiHoshi

モチベーション
● expo initしてみたけど、もう実装・・・？🤔

● expoを使ったとしても、実装環境周りで迷う
● ツール、開発環境、モジュールなどを整理/整備した
● 環境を整備した結果、不自由なくリリースできた

● expoを使ったとしても、実装環境周りで迷う
● ツール、開発環境、モジュールなどを整理/整備した
● 環境を整備した結果、不自由なくリリースできた
“アプリを作る”ことに集中すべく、
expo init 以後、
実装に必要になるものを示したい

今日話すこと
ReactNativeアプリ開発の基本方針
実装を取り巻く環境構築
迷ったもの / 今後の必要になるもの

はじめに
● 対象
○ ネイティブアプリ開発の経験がないWebエンジニア
● 話すこと
○ expo init ~ 実装するまでの
ツールやモジュールの取捨選択
● 話さないこと
○ 詳細な実装
○ ツールの使い方
○ 宗教戦争
ツール/モジュール名が頻出するので、
後ほど資料は後ほど公開します！

はじめに
● 対象
○ ネイティブアプリ開発の経験がないWebエンジニア
● 話すこと
○ expo init ~ 実装するまでの
ツールやモジュールの取捨選択
● 話さないこと
○ 詳細な実装
○ ツールの使い方
○ 宗教戦争

基本方針
● 前提としてUIを無理に作り込まない
● JavaScriptの世界に閉じる
○ npm run ejectをしない🙅🙅‍♂
● ツールやOSSを最大限活用する

基本方針
● 前提としてUIを無理に作り込まない
● JavaScriptの世界に閉じる
○ npm run ejectをしない🙅🙅‍♂
● ツールやOSSを最大限活用する
EXPO + JS製 npmモジュールで乗り切る

● 開発支援ツール
● エミュレーター
● デバッガー
● 言語と型チェック
● 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

迷った / 今後検討
● BaaS
○ firebase
○ amplyfy
● Testing
○ Jest
○ Detox
● CI/CD
● Analytics

才能をつなぎ、
世界をポジティブにする
We're hiring!
7336449 Photo by Sunny studio

Reactnative はじめの一歩

Recommended

Recommended

More Related Content

Similar to Reactnative はじめの一歩

Similar to Reactnative はじめの一歩 (20)

More from PIXTA Inc.

More from PIXTA Inc. (14)

Recently uploaded

Recently uploaded (10)

Reactnative はじめの一歩