フロントエンドのコードベースの健全性を可視化するryo_kawamata2022/06/23に公開2022/06/24TypeScriptshelldatadogzxtechフロントエンドのダッシュボードを作ってみたらいい感じだったので紹介です。使って以下画像のように、フロントエンドのコードベースの各指標を可視化するダッシュボードを作りました。値はデモ用に書き換えています現在、計測している指標はこちらです。vue-tsc)Jestの各種カバレッジ各指標は毎朝9時に更新していて、時系列での推移も確認できます。作った?技術的負債解消等コードベースのリファクタリングの活動は、機能追加に比べ進捗を把握しにくい、成果が伝わりにくいという問題があり、それを解消したいと考えたからです。このダッシュボードには日時でデータが蓄積されていくので、どのようなペースで負債を解消していったのかが一目瞭然です。しきい値を定めれば、目標への到達具合も把握できてモチベーションにも繋がります。その他、コードベースの良くない傾向(例:カバレッジの継続的な低下)なども、このダッシュボードを定期確認することで検知できます。計測スクリプトの実装方法をまとめます。基本的な構成はこちらです。Actions上でPull)に対して実行。その結果をDatadogにメトリクスとして送信しています。Datadogのメトリクスを使う利点は、結果の永続化のために専用のRDBを新たに作る必要がないという点です。計測スクリプトのフォルダー構成はこちらです。なっているところは、計測対象のプロジェクトを想定しています。Actionsで計測スクリプトを実行する際に、最新コードをpullする想定です。...zxでの各指標の計測zxはJSでシェルスクリプトを記述できるツールです。https://github.com/google/zxこちらを用いて、各種指標を計測するスクリプトを書いています。1つ目はTypeScript化の指標の集計です。計測対象のプロジェクトのパスを受け取り、そのパスに対してtscやvue-tscコマンドを実行しています。[]).lengthでエラー数を計測し、戻り値としています。result;};2つ目はVueファイルの集計です。APIが使われているVueファイルの総数を計測しています。};};最後はカバレッジの計測です。zxでjestのカバレッジをJSONに出力するコマンドを実行し、そのJSONに対してjqで各指標を取り出し、戻り値としています。使っているところです。codeが1以外のシェルスクリプトを実行すると例外が投げられてしまいます。codeが1以外となる場合があるので(grepでマッチしない値がある時など)、意図せぬ例外を防ぐためnothrowでシェルスクリプトのコマンドを囲っています。次にDatadogのメトリクスへの送信部分です。Datadogへのクライアントの実装は以下です。APIを叩いているのみです。}}各種指標の集計から、Datadogへの送信までは以下ですね。さきほど紹介した、各指標の集計メソッドを実行して、その結果をDatadogに送信しています。Actionsで定期実行すれば完了です。Actionsのスケジュールトリガーで毎日UTCの1時に実行されるように設定しています。スクリプト実行前に、計測対象のリポジトリをpullしているので、実行時点での最新の指標を計測できます。}}これで、日時でDatadog上のメトリクスにコードベースの指標の集計結果が蓄積されていくので、あとはその値を利用してダッシュボードを作れば完成です。今後もこの指標をもとに、地道な改善活動を頑張っていきたいです。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。