ノイン株式会社 / フロントエンド・クライアントサイド
noin.shop/NOINアプリの開発・リファクタリング
TypeScript導入 noin.shop側は当時Nuxt2系で動いており、自分が入った段階ではJavaScriptで書かれており、TypeScriptが1割もない状況でした。今後、新規機能を開発を行っていくとして基盤としてはなかなか厳しい状態だったのでTypeScriptを使ったリファクタリングを行いました。 基本的にはVue2系のOptions APIの書き方でVue.extendの呼び方の場合でも型周りの担保を行うように変えていきました、Vuexなどに関してはまだTypeScriptとの相性も良くないのでnuxt-typed-vuexによるTypeScriptとの親和性を図るようにしました。 コンポーネントのテスト周り コンポーネントのテストはほぼ存在してなく、Storybookなども当時のバージョンからアップデートなどもされていなくほぼメンテナンスもされていない状態でした。 そこでStorybookのアップデート6系に変更後, 今後のStorybookが腐らないためにもStoryshotsの導入によるUI, UnitTestの担保するようにしました。 コンポーネント表示時の見え方や、propsなど値による各パターンの網羅、コンポーネントに変更が入ったときに気づくことができなかったという点をなくすためにもShotryshotsによるスナップショットテストを行うようにしました。 Core Web Vitalsの改善周り、 Core Web Vitalsのスコアも当時はあまり良いものではありませんでした。 lazy-hydrationによるTTI/TBTを短くする、画像周りの対応(次世代画像形式のWebpを使うように変更), CLS改善, カルーセル周りのLCP改善 アプリのリプレイス ネイティブのアプリに関しては当時、Kotlin, Swiftで書かれており、今後の開発をより行いやすくするためにFlutterを導入しての開発を行いました。 アプリ側での開発では、スクラムの体制をとっており、1週間スプリントで回していました。 Flutter周りのアップデートが早いので常にアップデート対応をしながらでの開発をしており、Flutterのバージョンとして2系を使うようにしていました。 状態管理はGetXを使う感じで進めていました。当時は時間がないなどの経緯もあり簡単でシンプルであり学習コストも低くできるといった点で採用などしました。