はじめに
ゆとり世代の中野です。
さっそくチャレンジについて書いていきます。
チャレンジする背景
- ExpoのProductをリプレイスが終わった
チャレンジ内容
- ExpoのProductをリプレイスしたことを振り返る
前提
プロダクト作った時に気をつけていたこと
- リプレイスすることを前提に考えていた
- 関心事や責務を適切に切り分けていた
- Componentは差し替えれるようにしていた
- チケットとコミットログとPRをリンクさせhistoryから経緯をすべて追えるようにした
リプレイス前の課題
- ここに色々ハマることになった原因や課題などを記載済み
- 上記に出てきた課題の解決策も記載済み
- デザイン周りのデグレがたまにある & storybookを共通環境で確認できない
- chromaticを導入し各componentごとにデザイナーによるデザインレビューを組み込んだ
約半年ハマってた問題を解決した振り返り
ゆとり世代の中野です。
yutanakano.com
Expoを使う時に知っておきたいこと
ゆとり世代の中野です。
yutanakano.com
Automatically review, test, and document Storybook
UI developers are responsible for component development, test, review, and documentation. This is often done manually. Chromatic automates these jobs and integrates them into your existing Git and CI tooling. That means you avoid tedious manual work while also saving time.
www.chromatic.com
やったこと
前提
- プロダクトの開発とリプレイスは同時並行に進めました
リプレイス時にやったこと
- プレーンなExpoのProjectを作成
- EASビルド周りの設定を作成
- CI/CDの作成
- テストコードの追加と設定
- 環境変数とSecretの設定
- Codecov連携と設定
- Chromatic連携と設定
- EASビルドの組み込みとCIの設定
- firebaseへのデプロイの設定
- 必要な設定類の移植
- 旧repositoryのsrcを新repositoryに移植
- 動作確認
どうやってプロダクト開発とリプレイスを同時に実現したのか
- 新repositoryのほうは基盤作りと仕組み作りのみにフォーカスして開発を進めました
- 旧repositoryではプロダクトコードの開発とリファクタにしぼり開発を進めました
- 旧repositoryでは環境変数周りの取り回しが力技になっていましたが当初から関心事と責務は切り分けていたので大きな影響を受けることなくsrcのdirectoryをコピって新repositoryに持っていきました
- あとは環境変数周りのロジックだけ差し替えて必要なパッケージをインストールするだけで実際にすぐに動作することができました
まだ残っている今後の課題
- iOSやAndroidもstorybookを使いたい
- storybookでテストをいい感じにしたい
- webとアプリどちらもE2Eテストを実施したい
- ストアまでのリリースの自動化
- EAS課金するかどうか問題(キュー長すぎ)
- Code Climateの導入と運用
- Repositoryのrename(ユビキタス言語にあわせたい)
結論
- 元々リプレイスすることを前提に考えて設計や実装を行っていたのが見事に実を結びました
さいごに
- 今回のリプレイスでDeveloperExperienceは大きく向上したと思うので引き続き最高の開発者体験を目指して定期的にアップデートしていきたいとおもいます
yutanakano
WEBエンジニア
大阪生まれのゆとり世代です
趣味はバイクでツーリングに行くこと
愛車は Ninja ZX-25R SE KRT EDITION
Expoでプロダクトを作っています
