React Nativeで「ViCOLLA」を開発して得た4つの知見

DoQuest社、HappyLifeCreators社と共同で開発したアプリ「ViCOLLA」が、2019年6月17日にリリースされました。勉強計画をたてることができるアプリです。

弊社は、プログラムデザイン、DB設計、API開発、アプリ開発を担当しました。技術構成は次のとおりです。

• React Native（TypeScript、非expo）、Native-Base
• PHP Laravel

React Nativeでのアプリ開発は何度か経験していましたが、今回のように複雑なUIを作ったのははじめてでした。得られた知見を、4つにまとめます。

APIは、データではなくUIから設計する

beta版のリリース時点では、APIが遅く、無駄も多い状態でした。

そこで基本に立ち返り、次の見直しをしました。

• レスポンスを圧縮し、キャッシュする
• インデックスをすべて見直す
• すべてのSQLの実行計画を確認する

これだけでも、かなり速くなりました。SQLの発行回数も確認すると、1回で取得できるものを何度も発行している箇所が多く、そこはプルリクエストで直しました。

最後にAPIを設計し直しました。当初予定していたAPIは30弱でしたが、細分化した結果、その1.5倍に増えました。

無駄をなくすには、データだけを見ていてはいけません。そのAPIを使うUIをすべて把握してはじめて、よいAPI設計ができると実感しました。

Reduxは、理解に時間がかかるが、なくては困った

Reduxは理解するまでにかなり時間がかかりました。いまも完全に理解できているかは自信がありません。それでも、この仕組みがなければ大変なことになっていたと思います。Reducerを経由してアプリの状態を管理できるのは、とても助かりました。

難しいのはスコープの決め方です。今回は画面単位でReducerを作りましたが、ドメイン単位のほうがよかったかもしれません。

TypeScriptは、型がすべて

型の恩恵は大きく、素晴らしいの一言です。

UIコンポーネントは、使う前に実現できるかを確かめる

React Nativeなら、基本的にどんなUIでも実現できそうです。

ただ、Native-BaseのようなUIコンポーネントを使う場合は、必要なUIを実現できるかを、あらかじめ確かめておくのが無難です。Native-Base自体は素晴らしいUIを提供してくれますが、要件を満たせるかどうかは別の問題です。満たせないと、結果的にForkして使うことになり、アップデートが難しくなります。