ReactNativeでアプリ開発

Shinsuke Nishikawa
ebisu-blog
Published in
2 min readJun 20, 2019

DoQuest社、HappyLifeCreators社と共同で開発したアプリ「ViCOLLA」が、2019年6月17日リリースされました。

勉強計画をたてることができるアプリです。

弊社はプログラムデザイン、DB設計、API開発、アプリ開発を担当しました。

技術構成は

・ReactNative (Typscript/非expo) Native-Base

・PHP Laravel

これまでReactNativeでアプリ開発の経験はあったものの、今回のような複雑なUIを構築したのははじめてで、いろんなことを知ることができました。簡単に今回得た知見をまとめておきたいと思います。

APIは、UIからデザインする

はっきり言ってbeta版リリース時点では、APIがイケてなかった。

遅いし、無駄が多いし、遅いし・・

基本に立ち返り、レスポンスを圧縮したり、キャッシュしたり、インデックスをすべて見直し、すべてのSQLの実行計画を確認したり。

これだけでもかなり速くはなる。

SQLの発行回数もみたけど、これも無駄が多くて、1回で取得できるのになあというところはプルリクエスト。

APIを再設計し直し、当初予定していたAPIは、30弱だったのですが、その1.5倍に膨らみました。APIを細分化したわけです。

無駄をなくすためにも、データだけ見るのではなく、このAPIを利用するUIをすべて把握しないとAPI設計というのはうまくいかないのだなと思いました。

Redux

これは理解するまでかなり時間がかかった。。いまでも完全理解できているのか。ただ、この仕組みを使わないと大変なことになっていただろうと思う。Reducerを経由してアプリの状態を管理できる仕組みがありとても良い。スコープをどうするかは難しいところで、今回は画面単位でReducerを作成したが、ドメイン単位のほうがよかったかもしれない。

Typescript

型がすべて

スバラシイ

以上。

UI

基本的にどんなUIでも実現できそう。ただ、Native-BaseとかのUI Componentにのっかる場合は、予め実現可能かチェックしておいたほうが無難。Native-Base自体は素晴らしいUIを提供してくれますが、要件を満たせるかどうかは別問題。結果的にForkして使うことになり、アップデートが難しくなるということになる。

--

--

Shinsuke Nishikawa
ebisu-blog

いつもたのしく I write my daily feelings, thoughts, roadbike,work, hobbies, and programming.