Comming Soon

エンジニア特化型転職支援サービス

絶賛開発中

技術構成

Backend

全面的にfirebase

(cloud functions および firebase hosting)

firebase hositing でnextjsをhosting

frontend

React Native(with haul)

typescript

redux(redux-saga,recompose,redux-actions)

CI

fastlane

appcenter

切り出せたもの

Redux

Type Definition (firestoreのデータ構造)

i18n辞書定義ファイル(ts,json,js)

その他 native web関係ない処理関数

Reduxについて

firebase由来のデータ構造のRedux stateとmutationは
全てで共通化できる

ex)

redux
├── User
│   ├── actions.ts
│   ├── index.ts
│   ├── reducers.ts
│   └── sagas.ts
├── actions.ts
├── reducers.ts
├── rootSaga.ts
├── sagas
└── state.ts

Web でも、Nativeでも共通化可能

Reduxについて

import * as model from 'src/redux/$modelPath'で

でinitialState,Action,Reducerが全部exportされる状態を作る

ex)

redux
├── User
│   ├── actions.ts
│   ├── index.ts
│   ├── reducers.ts
│   └── sagas.ts
├── actions.ts
├── reducers.ts
├── rootSaga.ts
├── sagas
└── state.ts

import {default as _actions } from './actions'

import { sagaActions } from './sagas'

export const actions = {..._actions, ...sagaActions}

export {

default as reducers,

initialState

} from './reducers'

export {default as sagas} from './sagas'

Reduxについて

ただし、reduxのstateの中には、webや、モバイルでだけ
使いたいものも存在している。

ex)

redux
├── Search
└── User

このStateは、Web管理画面でしか使いたくない

Reduxについて

reducers.ts,actions,rootSaga.ts,state.tsで使用したい
Stateだけ、結合してあげれば、treeShakingで脱落する

ex)

redux

├── Search
├── User
├── actions.ts
├── reducers.ts
├── rootSaga.ts
└── state.ts

ex) actions.ts

export { actions as User } from './User';

ex) reducers.ts

import { reducers as user } from './User';

export default combineReducers({

  user,

  ...others

});

Searchを未使用のまま放置できる

Reduxについて

WebとNativeで使用するreduxを別リポジトリで管理

(ついでに、firebaseのtaskも突っ込んでinitialStateを使って

firebase の開発用のバッチなどに利用できるようにした)

repo

├─ redux

│   ├── SomeCommon
│   └── User
└─ FirebaseTasks

submodule管理

app               mainプロジェクト

├─ redux

│   ├── Search
│   └── MainState
└─ repo

Reduxについて

そのまま import {someReduxStructure} from repo/$statePath

をしても良いがSymbolic Linkを利用するとあたかも、その階層にファイルが存在するかのようにEditorで編集できる。ex) vscode

SubModuleの実体

メインレポの

シンボリック
リンク

Reduxについて

firebase由来のデータ構造のRedux stateとmutationは
全てで共通化できる

ex)

redux
├── User
│   ├── actions.ts
│   ├── index.ts
│   ├── reducers.ts
│   └── sagas.ts
├── actions.ts
├── reducers.ts
├── rootSaga.ts
├── sagas
└── state.ts

Web とNativeで専用の非同期処理のライブラリが異なる可能性があるため共通化には工夫が必要

Reduxについて

Pattern 1: sagasの処理を抽象化して実体をDIする(推奨)

export function*

updateDocument

service/Firebase.web.ts

service/Firebase.native.ts

export function*

updateDocument

違うライブラリや型を使用するが同名のinput outputが同じになるようにラッパーを実装する。

import { updateDocument } from 'service/Firebase';

haul(RN bundler with webpack)or Webpack(for Web)やBabelのresolve extension機能を使って、importを制御

redux/someState/sagas.ts

Reduxについて

Pattern 1: sagasの処理を抽象化して実体をDIする(推奨)

import { updateDocument } from 'service/Firebase';

haul(RN bundler with webpack)or Webpack(for Web)やBabelのresolve extension機能を使って、importを制御

 function* updateUserProfile () {

     yield takeLatest(UPDATE_PROFILE, function* ({ payload: user }: Action<User>) {

     ...

     yield updateDocument(payload);

   }

}

ex)User/sagas.ts

sagasのコードは一切変えずに挙動を変更できる。

Reduxについて

Pattern 2: sagas.web.ts,sagas.native.tsでそもそも分岐させる。

（非推奨）

sagaの実装が異なるため拡張子分岐で普通にimportできる。

export function*

updateDocument

redux/State/saga.web.ts

redux/State/saga.native.ts

export function*

updateDocument

ただしこれには、以下のような罠があるので注意

- typescriptを使ってる場合、alias設定でしか拡張子分岐ができないため、相対パスが使えなくなる(wrapper分岐よりも分岐が増える)

- 以上によりaliasコンフィグが増えるほどjestのalias設定も荒れる

(そもそも分岐しないといけないものには共通化しない決断も必要)

詳しくは https://github.com/Microsoft/TypeScript/issues/21926#issuecomment-437341322

Typeの共有について

Firebaseのデータ構造はwebとNativeで共通なので、

どちらか一方の変更が追従しない事態は避けたい

　　＝＞共通レポジトリで管理

I18nについて

ユーザーのデバイスの外国語設定に対応して表示言語を

変更するための仕様。辞書ファイルをjson objectで持てれば良い。

(TS,でもJSでもyamlでも最終的にjson変換可能ならゴリ押しで

共通化ができる)ライブラリによって必要なjsonのフォーマットが違うためマネジメントが大変なのでぶっちゃけ日本でしかアプリを出さない場合は、使わなくてすがなるべく対応しましょう。

I18nについて

terasoutチームでは複数分割したobjectをts fileで保持し

ライブラリが欲している仕様に合わせて型補完が効くように自動で型情報を生成してくれるbuildスクリプトを書いています。

参考: https://github.com/quipper/i18n-dts

(quipper株式会社さんのレポで非常に参考になります。)

react-native-i18n(react-native-languages)

next-i18next

完全なjsonとしてUnion型情報を生成

分割したtsごとにjsonを生成し型Union情報を生成

i18n/ja/index.ts

i18n/ja/$namespace
(.ts or /index.ts)

I18nについて

型がついてるととても嬉しい。なぜならば、Editor
が勝手に登録済みkeyを列挙してくれるようになるから。

おまけ

react-navigationにセットしてあるroutingも全部補完されるようにしてます。

typoしやすいstring型のデータを突っ込む時にunion literalで補完や警告を効かせるととても開発が快適になります。

どうやってるか知りたい方はこちら　↓
https://qiita.com/tkow/items/90c448416fa3945f62ab

おまけ

一応componentも再利用するためにreact-native-webも使えるかどうかも検証しました

ここがNativeComponentのTextViewを使い回し

参考:https://github.com/tkow/react-native-web-test
reduxと結合する前のコンポーネントの管理を別軸に切り離す設計を考慮する必要があり、一旦お蔵入りに