【ITニュース解説】I built a Chrome Extension to extract Tailwind & Figma tokens (and got blocked by Reddit bots 🤖)

システムエンジニアを目指す初心者の皆さんにとって、今回のニュース記事は、現代のソフトウェア開発現場でどのような課題があり、それを技術でどう解決していくか、具体的な事例として非常に興味深い内容だ。この記事の筆者は、デザイン作業と開発作業の間で生じる非効率な部分を、自らの手でツールを開発することで解決した。そのプロセスと開発されたツール「Token Inspector」について詳しく解説する。

まず、記事の背景にある課題から説明する。現代のWebサービスやアプリケーション開発では、UI/UXデザインと、それをコードとして実装するフロントエンド開発という二つの重要な工程がある。UI/UXデザインは、ユーザーが直接触れる部分の見た目や操作性を設計する工程で、Figmaのようなデザインツールが広く使われている。Figmaでは、ボタンの色、フォントサイズ、余白の広さなど、デザインに関するあらゆる要素が視覚的に設計される。一方、フロントエンド開発は、HTML、CSS、JavaScriptといった言語を使って、デザインされたものを実際にWebページとして形にする工程だ。この記事の筆者は、特にCSSフレームワークの一つであるTailwind CSSを使ってコンポーネント（部品）を開発している。

ここで問題となるのが、Figmaで定義されたデザイン要素と、Tailwind CSSでコードとして表現する際の連携だ。Figmaでデザインされたボタンの色が「#FF0000」だとすると、開発者はTailwind CSSの設定ファイル（tailwind.config.js）にこの色を定義し、その色を使ってボタンをスタイル付けする。しかし、デザインツールで定義された要素の情報（例えばカラーコードやフォントサイズなど）を、開発者が手動で一つ一つ確認し、コピー＆ペーストでコードに落とし込む作業は、非常に手間がかかり、時間も浪費してしまう。筆者は、この手作業での情報抽出、特に「computed CSS（計算済みCSS）」と呼ばれる、最終的に要素に適用されるスタイルを確認する作業に多くの時間を費やしていたという。このプロセスは非効率であるだけでなく、人間が手作業で行う以上、誤入力や見落としといったヒューマンエラーが発生する可能性も常に伴う。

このような課題を解決するために、筆者が開発したのがChrome拡張機能「Token Inspector」だ。Chrome拡張機能とは、Google ChromeというWebブラウザに、追加の機能を与える小さなソフトウェアのことだ。ユーザーはこれをインストールすることで、ブラウザの機能を拡張し、特定のタスクを自動化したり、情報を収集したりすることができる。「Token Inspector」もその一つで、特定のWebページ（おそらくFigmaのデザインプロトタイプがWeb上に公開されている場合や、すでにTailwind CSSで構築されたサイトを検証する場合）から、デザインに関する「トークン」と呼ばれる情報を自動で抽出し、開発に役立つ形式で出力する。

ここでいう「トークン」とは、デザインシステムにおいて、色、フォント、余白、影など、デザインの基本的な要素を抽象化し、名前を付けたもののことだ。例えば、特定の色を「primary-color」というトークンとして定義することで、デザイン全体で一貫した色使いを保証し、後からその色を変更したい場合でも、トークンの定義を一つ変更するだけで、その色を使っているすべての箇所に反映させることが可能になる。これは、デザインの一貫性を保ち、大規模なプロジェクトでの変更管理を容易にする上で非常に重要な概念だ。

「Token Inspector」の具体的な機能は多岐にわたる。最も中心的な機能は、ワンクリックで「すぐに使えるTailwind設定ファイル」をエクスポートできる点だ。これは、手作業でtailwind.config.jsを作成する手間を完全に省き、Figmaから直接、開発者がすぐに利用できる形式でデザイン情報を渡せることを意味する。これにより、デザイナーと開発者の間の情報の受け渡しが格段にスムーズになり、開発者はデザインの意図を正確にコードに反映させやすくなる。

さらに、「Token Inspector」は「Tokens Studio JSON」形式でのエクスポートもサポートしている。Tokens Studioは、デザインツールで定義されたデザインシステムを管理するためのツールの一つで、JSON形式でトークン情報をやり取りできる機能がある。この互換性があることで、筆者の拡張機能が生成するトークン情報を、より広範なデザインシステム管理ツールと連携させることが可能となり、柔軟な開発ワークフローを構築できる。

また、Webページ内で使用されている「インラインSVG」をすべてZIPファイルとして保存する機能も搭載されている。SVG（Scalable Vector Graphics）は、Web上で広く使われるベクター画像形式で、拡大・縮小しても画質が劣化しないという特徴がある。デザインで使用されるアイコンやイラストがSVG形式で提供されている場合、それらを一括でダウンロードできるこの機能は、開発者がアセット（画像などの素材）を収集する手間を大きく省くことができる。

特筆すべきは、「Token Inspector」が「100%クライアントサイド」で動作するという点だ。これは、抽出されたデザイン情報がユーザーのブラウザ内で完結し、外部のサーバーに送信されることがない、ということを意味する。プライバシーやセキュリティの観点から、このようなデータ処理方法はユーザーに安心感を与える。

筆者はこの画期的なツールを開発した後、より多くのユーザーに利用してもらいたいと考え、情報共有プラットフォームであるRedditに投稿を試みた。しかし、Redditの自動モデレーター（通称：automods）によって、投稿が「リンクがある」という理由で即座に削除されてしまったという。これは、スパム投稿を防ぐためのRedditの自動システムが、新しいツールを紹介しようとする筆者の投稿を誤ってスパムと判断した結果だ。この経験から、筆者はRedditで提供する予定だったプロモーションコード「REDDITPRO」を、代わりにこの記事が投稿されているDev.toコミュニティ（そしてこの記事を読んでいる皆さん）に提供することにした。このコードを使うことで、通常は有料であるプレミアム版の「Token Inspector」を、完全に無料で利用できる。これは、筆者が自分のツールを多くの人に使ってもらい、フィードバックを得たいという強い思いの表れだ。

この事例は、システムエンジニアを目指す初心者にとって多くの学びがある。まず、日々の業務の中で感じる「不便」や「非効率」は、新しい技術やツールの開発のきっかけになるということだ。筆者は、自身の作業の中で時間のかかる手作業に気づき、それを自動化する解決策を自ら作り出した。これは、問題を発見し、それを技術で解決するというエンジニアリングの根源的な姿勢を示している。次に、Chrome拡張機能という形で、比較的手軽に開発できるツールが、開発プロセス全体に大きな効率改善をもたらす可能性を示している。Webブラウザは現代の作業において中心的なツールであり、その機能を拡張できることは、特定のニッチな問題を解決する上で非常に強力な手段となる。そして、開発したツールを広く普及させるための課題と、それに対する対応も示されている。Redditでの自動ブロックは、テクノロジーを利用した情報共有の難しさの一例だが、それに対してプロモーションコードを別のコミュニティに提供するという柔軟な対応は、コミュニティとの関係構築の重要性を示唆している。

「Token Inspector」は、UI/UXデザインとフロントエンド開発の間の連携をスムーズにし、開発者の負担を軽減し、最終的にはより高品質なプロダクトを迅速に提供するための強力な支援ツールとなる。このツールの開発とその背景にある筆者の課題解決への情熱は、未来のシステムエンジニアにとって大いに参考になるだろう。