Omletのようなサービスを使えば、Reactデザインシステムが各プロジェクトでどのように使われているかを把握できます。これはデザインシステムの運用を担うチームにとって非常に有用です。しかし料金体系は決して安くなく、Reactコンポーネントの数に応じて価格が上がります。そこで、コストをかけずに同様の知見を得られる自前の仕組みを構築する方法を模索しました。

react-scanner

react-scannerは、Reactアプリケーションを静的に解析するnpmパッケージです。特定のパッケージに含まれるコンポーネントがコードベース全体でどのように使われているかを記述したJSONを出力できます。

@typescript-eslint/typescript-estreeとastrayを使い、このパッケージはコードベースの抽象構文木（AST）を構築して走査します。デザインシステムからインポートされたコンポーネントや、どのpropsが使われているかを検出します。

CLIのセットアップ

私はreact-scannerをCLIでラップし、各リリース時にプロジェクトのCIパイプラインで実行できるようにしました。

#! /usr/bin/env node

import { Command } from "@commander-js/extra-typings";

const program = new Command().option(
  "-d, --dir <path>",
  "set project directory"
);

program.parse();

const options = program.opts();

const dir = path.resolve(options.dir) || cwd();

const scannerConfig = {
  rootDir: dir,
  crawlFrom: "./src",
  includeSubComponents: true,
  importedFrom: "your-design-system-package",
  processors: [["raw-report", { outputTo: `${dir}/raw-report.json` }]],
};

await scanner.run(scannerConfig);

この構造の詳細はreact-scannerのドキュメントで確認できます。

また、プロジェクトに関する追加のデータを収集し、別のproject info JSONファイルに書き出すようにしました。

const pkg = JSON.parse(fs.readFileSync(`${dir}/package.json`, "utf8"));

// Create project info file
const projectInfo = {
  name: pkg.name,
  pkgVersion: pkg.dependencies["your-design-system-package"],
  timestamp: new Date().getTime(),
  url: process.env.CI_PROJECT_URL,
};

if (!projectInfo.pkgVersion) {
  console.log(
    "No design system package version found in package.json, exiting..."
  );
  process.exit();
}

• name - レポートがどのプロジェクト由来かを識別するためのプロジェクト名
• pkgVersion - プロジェクトで使用されているデザインシステムパッケージのバージョン。各プロジェクトがどれだけ最新の状態かを把握するために使用します
• timestamp - レポートが生成された時刻。レポート自体がどれだけ新しいかを把握し、経時的な変化を確認するのに役立ちます
• url - プロジェクトのURL。コンポーネントが使われているファイルへ直接遷移するリンクを生成するために使用します。私たちはGitLabを使用しており、この環境変数はGitLab CIパイプラインで設定されます

データの保存と表示

データの表示には、DORAメトリクスで採用したアプローチと同様に、シンプルな静的サイトを使うことにしました。

プロジェクト用のGitLabプロジェクトアクセストークンを設定し、GitLab Commits APIを使ってデータリポジトリのmainブランチにデータをプッシュするようにしました。これによりサイトの新しいリリースがトリガーされ、raw reportとproject infoのJSONファイルに対してデータ処理が行われます。

フロントエンドプロジェクトでは共通のCIテンプレートを使用しているため、他のチームのプロジェクトからデータをスキャンしてプッシュするデプロイ後のステップを追加できました。

現在の運用状況

現在、共有コンポーネントが各プロジェクトでどのように使われているかを一目で確認できる場所ができました。挙動の変更がプロジェクトにどのような影響を与えるかを検討するうえで、エンジニアにとってもデザイナーにとっても役立っています。

今後は、この情報をデザインシステムの戦略にどう活かせるかを模索していきたいと考えています。デザインシステムの採用状況を経時的に計測することで、チームをより良くサポートする方法を理解する手がかりになります。チームが新しいコンポーネントを使い始めたり、使うのをやめたりしたタイミングを把握できれば、声をかけて理由を理解する機会にもなります。