大手スポーツECサイトの開発
■ 概要 大手スポーツECサイトの機能追加、運用・保守、パフォーマンス改善、リファクタリングを担当。 ・規模感:100万PV/日 超えのECサイト、フロントエンドのコード約22万行 ・チーム構成:フロントエンド 6名(プロジェクト全体 約30名) ・役割:フロントエンドチームのサブリーダー ■ 使用技術や開発環境 ・言語/フレームワーク:React, Next.js, TypeScript, Emotion ・状態管理:MobX ・UI管理:React Cosmos ・テスト:Jest ・パフォーマンス:NewRelic, SpeedCurve ・その他:Docker、AWS ■ 取り組んだ課題 <<課題の内容>> 1. PageSpeedInsights(以下PSI)のスコアが低かった 2. TypeScript導入済みだが型エラーが多く、生産性・保守性に問題があった <<課題の解決>> 1. PSIのスコアが低かった ECサイトのパフォーマンス改善として、主に利用される「トップ、一覧、詳細」画面の改善を行いました。PSIの結果から大きな問題として、以下2点を改善しました。 ・初期描画に必要ないサードパーティのスクリプトが読み込まれている ・初期描画時には読み込まず、画面スクロールで表示に必要になった際に読み込むよう変更しました。 また、画像に高さが設定されておらず、ガタつきが発生していました。画像に初期の高さを付与することでガタつきを軽減しました。 2. TypeScript導入済みだが型エラーが多く、生産性・保守性に問題があった 型エラーが約3000件あったので、ファイル単位でリスト化し、メンバーに割り振り対応しました。 工夫した点として、メンバーは他タスクをやりながらの作業だったので、負担になりすぎない程度でノルマを設けてスケジュールを算出し、遅れが発生しないように進行しました。 <<成果>> 1. PSIのスコアが低かった UXが向上(画面読み込みが早くなる・ガタつきがなくなる)し、PSIのスコアも向上しました。 2. TypeScript導入済みだが型エラーが多く、生産性・保守性に問題があった 型エラーの解決により、コード補完が効くようになったりなどで生産性の向上、 型チェックを有効にすることで型エラーによる不具合を事前に防げるようになりました。 以上です。