課題

• 開発チームのスキルセットからフロントエンドスキルが弱い

Rails + jQueryでのMPA構成だったのですが、以下のように全く設計がされておらずメンテナンス不可能な状態でした。

フロントエンドのテストコードがない

よくある構成なのですがインタラクションをjQueryで制御しているのですがテストコードがないため、グロースする際に常にバグの発生や影響範囲の不明瞭さがありました。

jsコードが整理されていない

webpack + babelでassetsファイルをコンパイルしているにもかかわらず、コンパイル対象に含まれないhtmlのscriptタグにjsコードが書かれているなど統制が全くされていませんでした。

CSSの乱立

CSSが乱立しておりスタイルの重複や、関連性のないスタイルが至る所で使われていました。また、カラーコードやフォントサイズなど基本的なスタイルも共通化されていない状態でした。

暫定対応

Rails + jQueryでのMPA構成とフロントエンドフレームワークを導入したSPA構成でのPros/Consを整理してチームメンバーに以下のような内容を共有し認識合わせを行いました。

• UXを高めるモダンなUIが難しいこと
  • 可能ではあるがシステムの複雑性が下がりカバーが難しいため品質と将来のSPA化のコストが増えてしまいROIが低いこと。
• 初期フェーズではスピードを重視するためローンチ後のグロースフェーズに負債を返却しなければシステムがボトルネックになりグロースが難しいこと。

とは言っても、ローンチまでは現状の開発スピードを落とさずに機能開発を進める必要があり、その後も、サービスの根幹となる機能で高いUXの提供が必要になり、1つの画面で複数のリソースのCRUDを行うUIが必要になりました。 現状のままデメリットをカバーする方法を考え、テスト方針や実装方針など開発ガイドラインの策定と知見の共有を行い応急手当を行いました。 また、ローンチ後にフロントエンドフレームワークの導入予定とCSSの整理やコンポーネント設計を行う事など、システムの方針や開発計画と事業計画のすり合わせを行いました。

恒久対応

もともと認識を合わせていた「UXを高めるモダンなUIが難しいこと」という前提が変わったことから、既存のフロントエンドの課題が大きい状態で新しく複雑な処理やUIを構築することで技術的負債が大きく増えると判断し、UXを最大化しつつシステムの複雑さ、開発スピード、品質を担保することへの優先度が高まり以下のような開発基盤の構築を行いました。

• 技術スタック選定
• 開発環境構築
  • ビルド環境整備
  • テスト環境構築
  • tsconfig設定/prettier/eslint
• ステート管理、コンポーネント設計/管理方針、CSS管理方針などアーキテクチャ設計