クラウドソーシングサービス「クラウドワークス」（以下、crowdworks.jp）のエンジニア bugfire です。
フロントエンド活動の振り返りをしてみよう
3年にわたるこの活動を継続し、今年も振り返りを行います。
タイミングは Advent Calendar より少し早くなってしまいました。
qiita.com
engineer.crowdworks.jp
engineer.crowdworks.jp
フロントエンド活動の総括
まずは crowdworks.jp の全体のフロントエンド活動を総括していきます。
合同スプリント
合同スプリントは、チーム間の垣根を無くし、チームのドメインに依存しないこと、ロストボールや後回しになっていたことなど、エンジニア全体で取り組む機会として設定されています。
今年は2回実施され、どちらのスプリントでもチーム間の協力があり、フロントエンドの技術的負債をいくつか解消することができました。
開発ドキュメントの改善
フロントエンドに関わるメンバーが増える中、新しいメンバーを中心にドキュメントの整備が進み、よりスムーズに開発を始められるようになりました。
engineer.crowdworks.jp
パッケージドキュメントの追加
ADRの導入により、パッケージ導入の判断が記録されるようになりましたが、既存のパッケージについてもドキュメントを整備し始めています。利用用途、利用箇所、削除検討、更新時の動作確認などを文書化することで、運用の効率化が期待できます。
package.json に新たに追加されたパッケージに対応するドキュメントがない場合に、CIでエラーが発生するようにしています。
ドキュメント例
デザインシステムが進化中
コンポーネントライブラリの充実と活用が進み、全体に浸透しています。
ヘッダー・フッターなど全ての画面において一定の実装がなされています。
詳細についてはデザインシステム側の報告を待ちましょう。
engineer.crowdworks.jp
erbのVue.js化活動が拡大
この両輪で Vue.js の利用箇所が増えており、全ての要素を Vue.js を用いて描画する画面も増えてきています。
複数のチームで Vue.js を用いた新規実装や既存実装のリファクタリングを行い、良い手応えを感じています。
Node.js v20 に更新
昨年は EOL の迫っていた v18 に更新しましたが、今年は Node.js v18 の EOL を待たずに v20 に更新しました 。
Storybook v8 に更新
開発において重要なツールである Storybook ですが、現時点における最新である 8 系列に更新しました。
Storybook、msw、storycap、reg-suit の組み合わせは最高です。
title 自動生成が楽になって良いです。
CSF3 にはまだ変更しておりませんので、どこかで対応する必要があります。
Storybook
Storybook Play Function の導入
Storybookでのテスト範囲がさらに広がりました。
新たな flaky test との戦いが始まるのかもしれない！
ESLint v9 / FlatConfig に更新
ESLint v10 から必須となる新しい設定形式の FlatConfig を、ESLint v8 でまず移行し、その後 v9 に更新しました。
幸い利用しているプラグインはすべて FlatConfig 形式に対応済みだったので @eslint/migrate-config および FlatCompat は使用せずに移行できました。
crowdworks.jp で利用している plugin/config は以下の通りです
eslint-config-prettiereslint-plugin-compateslint-plugin-importeslint-plugin-jesteslint-plugin-vueeslint-plugin-vue-scoped-csstypescript-eslintvue-eslint-parser
yarn v4 に更新
内部的には workspace ではなく hoisting を多用した変則的な構成になっていますが、パッケージマネージャを yarn v1 から yarn v4 に更新しました。
各所でその場凌ぎの resolutions 指定が不要になりました。
corepack を用いているので、このあたり将来 CI の設定変更が必要になりそうです。
Vue 3.5 に更新
昨年の 3.3 から、今年は 3.4 を経て 3.5 に追従しました。
Vite/Vitest の採用
限定的な利用にとどまっていますが Storybook と Storybook の Snapshot Test などにおいて vite （+ vitest） を利用しています。
Storybook開発環境はすぐさま起動するようになりました
Snapshot Test は 並列性を上げるような他の改善もあわせて 240 秒から 18 秒になり快適になりました。
過去の経緯や、過去においては最善と思われていたものが現状に即していないものなど、フロントエンド内でのディレクトリの整理を行いました。TypeScript（vue-tsc）や Snapshot Test, VRT に守られているので、リファクタリングが容易で良いです。
Rails の未使用 route、ファイルの剪定
フロントエンドでは Vue を中心として動作していますが、バックエンドや過去の実装は Rails と Sprockets で実装されています。
そのため、重要な画面から移行をすすめていますが、存在価値のないページや到達できないページが残っている可能性があります。
そのため、いくつかの手法を用いて未使用の実装を取り除いています。
静的解析
ルーティングが存在するが、実装がないケースです。
ルーティング上のゴミなので剪定します。
人力で未使用のものを検索するのは難しいため、アクセス解析を通じて候補を抽出しました。削除は人力での調査を加えますが、候補の抽出は自動的に行えます。
幸い、アクセスのあった Controller と action はログに記録されているため、ルーティング上は存在するものの、アクセスがないケースを検出することができました。最低3ヶ月の期間を見るようにしています。
アクセス解析では頻度が低いものの重要である可能性があるため、即座に削除するのではなく、呼び出された際にアラートが表示されるコードをファイルに追加しました。
ActiveSupport::Notifications で render_template 系のイベントを購読し、初回のみログに出力するようなコードを追加しました。
ログによる負荷を下げるために、オンメモリでプロセスの寿命においてはファイルあたり一度しか出力しないようになっています。
イベントの購読
このログ解析で、template単位で3ヶ月以上使用されていないものについても、同様にアラートを追加しました。
アラートの追加
まとめ
これらの解析を通じて判明した数百ファイルを調査し、100を超えるメソッドやファイルを未使用としてマーキングまたは削除しました。
今回はアクセスがないものを対象としましたが、十分に少ないものや、あらゆるメソッドに適用して確率的なログ出力から統計的に削除候補として導出するのも良いかもしれないと考えています。
おわりに
今年も多くのチームがフロントエンドの技術的負債解消に取り組み、より良い開発環境が整いました。
crowdworks.jp では、フロントエンドなど事業上の課題に取り組みたい方を募集しています！
