フロントエンドのダッシュボードを作ってみたらいい感じだったので紹介です。 作ったもの zx と Datadog、GitHub Actions を使って以下画像のように、フロントエンドのコードベースの各指標を可視化するダッシュボードを作りました。 値はデモ用に書き換えています 現在、計測している指標はこちらです。 Vue SFCファイルにしめるTypeScriptの割合 Vue SFCファイルにしめるComposition APIの割合 strict: trueにした場合のType Errorの数(tsc & vue-tsc) Jestの各種カバレッジ 各指標は毎朝9時に更新していて、時系列での推移も確認できます。 なぜ作った? 技術的負債解消等コードベースのリファクタリングの活動は、機能追加に比べ進捗を把握しにくい、成果が伝わりにくいという問題があり、それを解消したいと考えたからです。 こ
![zx + Datadog + GitHub Actions でフロントエンドのコードベースの健全性を可視化する](https://cdn-ak-scissors.b.st-hatena.com/image/square/c525b436b45b5cb0dc4c17eb2247e336b8fae45e/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--wf5uhYaI--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3Azx%252520%25252B%252520Datadog%252520%25252B%252520GitHub%252520Actions%252520%2525E3%252581%2525A7%2525E3%252583%252595%2525E3%252583%2525AD%2525E3%252583%2525B3%2525E3%252583%252588%2525E3%252582%2525A8%2525E3%252583%2525B3%2525E3%252583%252589%2525E3%252581%2525AE%2525E3%252582%2525B3%2525E3%252583%2525BC%2525E3%252583%252589%2525E3%252583%252599%2525E3%252583%2525BC%2525E3%252582%2525B9%2525E3%252581%2525AE%2525E5%252581%2525A5%2525E5%252585%2525A8%2525E6%252580%2525A7%2525E3%252582%252592%2525E5%25258F%2525AF%2525E8%2525A6%252596%2525E5%25258C%252596%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aryo_kawamata%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzU2N2NiMTI0ZWYuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)