プライベートで毎日コードを書いて、React Native + firebaseなアプリを開発する
以前、React + Node.jsでSPAなウェブアプリを作ってみたので、次はReact Nativeでアプリを作ってみようと思いました。主な構成は以下。サーバレス構成です。
- フレームワーク: React Native + redux
- データベース: Firebase(Cloud Firestore)
- 検索エンジン: Algolia
- 認証: facebook & firebase authentication
現在は職業的プログラマではないので、コーディングに割ける時間は平日ランチタイムと夜、そして土日のみ。継続することが重要だと思い、余裕のない時でもgithubに無理やり草をはやし続けてみました。
当初は半年もあれば完成すると思っていたアプリは一年以上経過しても公開に至っていませんが、開発自体はほぼ終わり、結合テストフェーズに入ったことで、ゴールが見えてきました。このあたりで、いくつかの気づきや、反省点を書き残してみます。
新しい言語を使う時は小さなプロジェクトから始めるべき。
2017年秋の時点では、スマートフォンのアプリ開発の知識はゼロでした。Reactは多少触っていたものの、React Native、firebase、Algoliaの使用経験はありません。
このようなズブの素人が空き時間にReact Nativeのアプリ開発を進めた結果、このような日程となりました。開発時間は平日2時間・週末5～10時間といったところです。
- 2017年10月：React Nativeでの画面の作り方調査
- 2017年11月～12月：DBなしのモックアップ作成
- 2018年1月～3月：firebase RealtimeDatabaseで仮実装（プロトタイプ）
- 2018年4月～5月：全体のリファクタリング。firebase RealtimeDatabaseをfirestoreに変更
- 2018年6月：検索にAlgoliaを導入
- 2018年7月～11月：実装
- 2018年12月～1月：UI調整
- 2019年2月～：結合テスト
当初の3ヶ月は、ほぼReactNativeの学習期間でした。その後の3ヶ月でプロトタイプができましたが、redux/firebaseに慣れてくると初期の頃に実装したDB周りの酷さに気が付きました。リファクタリングすると同時にfirestore化＆algolia導入を行ったため開発が長期化する一因となりました。 開発期間が半年を超えたあたりからモチベーションが低下してコードを書く量が減ってしまったこともあり、実装期間は4ヶ月にも及んでいます。
画面数は100以上、書いたソースコードは合計11000行以上、2019年2月8日現在のコミット数は610。最初に作るスマホアプリとしてはあまりにも規模が大きすぎるものでした。
最初は4～5画面程度の小さなアプリを作り、まず公開まで持っていくプロセスを経験しておくべきだったと思います。 （とはいえ、そのようなアプリのアイデアが思い浮かばかなった）
スキマ時間にコーディングを進めると、カオスなコードになりがち
ランチタイムの30分、平日夜の2時間など、細かい時間を見つけてコーディングするスタイルで開発を進めると、「あと15分でこの処理を動くようにしたい」というような焦りが生まれてしまい、場当たり的なコードを書きがちです。また、その後時間が取れないとその事実を忘れてしまうことも多く、全体的な整合性が失われていく結果となりました。
全体の構成を考慮して、目の前の処理を動かすことを優先するのではなく、時には後戻りするような組み立て方をするべきでした。このようなことを考えながら書くには、ある程度まとまった時間集中する必要がありますが、30分を繋いで書いていくスタイルでは難しかった。
細切れの時間で開発すると、前回何を考えていたのかを忘れがちです。個人slackプロジェクトを作ってgithubと連携し、考えていたことをメモしたりコミット内容をタイムラインに流すことで、「何をやろうとしてたんだっけ？」と思い出す時間を削減することができました。
初期にDB周りの設計をかなり細かくやっておくべきだった。
具体的にどのあたりがカオスなコードになっていったかと言えば、それはデータストア周りです。
React Nativeでは、reduxアーキテクチャ、ローカルストレージ(AsyncStorage)、firebase、algoliaという複数のデータストアの連携を意識する必要があり、RDBMSとは異なる設計が必要だと感じました。 次回アプリを作るときは、このあたりのDB設計をもう少し詳細化してから取り組むと思います。
breaking changeのつらみ
React Native系のモジュールは安定していないものが多く、たまに後方互換のないバージョンアップ（breaking change）が行われます。特にreact-navigation周りは大胆な変更が多く、ついていくのが大変でした。モジュールはなるべく最新版に追従したほうが良いと思いますが、バージョン追従にトータルで一ヶ月ほどは費やしている気がします。
現在は、毎日「npm outdated」で最新バージョンを確認し、breaking changeがあるかどうかをチェックしています。
まとめ：継続すれば素人でも大きなアプリは作れる（はず）
上記の気づきは、開発に慣れている人にとってはどれも当たり前のことだと思います。
しかし、プライベートの時間を活用して、どうにかアプリの開発を進められていることや、React Nativeならではの課題・プライベート開発ならではの課題と対策を蓄積するサイクルを継続できている点は、達成感もあります。
今後も、職業的プログラマではない、プライベートベースの開発のやり方を模索していくつもりです。
