ID:67861さん

プロジェクト概要

目的

モビリティ事業におけるtoC向けのサービスサイト、および社内セールス用の業務システムの開発
サービスの拡大に伴う機能開発と並行し、AWSのコスト削減、古くなったアーキテクチャのリプレース案件をリードエンジニアとして対応

担当業務

• AWSコスト削減
  • アーキテクチャを変更し、不要なリソースの削除
    • インスタンスの数を減らし、サーバレスアーキテクチャ（基本はLambda）へ移行
      • スケーラビリティを維持するために一部をプロビジョニングの同時実行の設定、割り当てメモリの見直し、インメモリキャッシングを活用することで不要な処理を全般的に排除
• フロントエンド再設計
  • Gatsby + React → Astro + SolidJSに移行のための技術調査
  • リポジトリパターン設計(monorepoにて複数リポジトリを統合)
  • UI設計（デザインシステム、Scssのコーディング規約など）
  • コードレビュー

メンバー規模

• PM 1名
• PL 1名（自身）
• メンバー 5名

課題と解決策

スタイルシートとしてBulma, Stylus, Scssが点在している、かつRGBコードなどが直書きされているためデザインの統一がされていない

Scss + Bootstrap5の構成にて再構築。Tailwindの採用も検討したが、applyを使わない限りクラスが多くなってしまうことから基本はモジュール化してScssクラスを当てることとし、margin, paddingなどの調整はBootstrapクラスで行うように変更。
RGBコードなどはScssの変数として定義ではなく、CSSカスタムプロパティにて管理することでOptimizeのScriptからスタイルを容易に変更できるようにした。

Gatsby (SSG) で作成しているもののサイトスピードの向上が見込めず、サイトスピードによる離脱者の増加やCWVの低下、かつ一部のページにVue.js（SPA）のソースが残っておりSEOとして弱い状況になった。

原因はSSGの仕様を活かせていない作り（コンテキストで渡すべきものをクライアントでREST経由でフェッチしているなど）、かつReactのHooksが大量に使われていることによるスピード低下だったため、仮想DOMを必要としないSolidJSの採用。およびハイドレーションの仕組みを容易に作れ、不要なJSの削減が見込めるメタフレームワークとしてAstroを採用。

サービスサイト側のみでリポジトリが5個以上存在し、軽微な改修でも複数のリポジトリの修正を必要とし、修正漏れなどの不具合が多発した。

共有できるロジックなどが多く存在したため、monorepo (Nx) 構成に変更。
変更に強く、ユニットテストが行いやすいようにレイヤードアーキテクチャ、クリーンアーキテクチャの思想を元にロジックを分割化。
GraphQLでJSONを直接取得していた箇所をインターフェースの抽象化を行いBFFを立てることでJSONフォーマットの変更があった際の変更箇所を最小限に留めた。