🗜️

「デジタル庁デザインシステム」のコンポーネントを ESLint で 1 つのファイルにバンドルする

に公開
CSS
ESLint
JavaScript
デザインシステム
tech

TL;DR

  • デジタル庁デザインシステムの HTML 版コードスニペットを、Bootstrap のように「1 ファイル読み込むだけ」で利用可能にするバンドルスクリプト、及びそのバンドルファイルを公開しました。

https://m-tsuru.github.io/dads-bundling-tools

  • 「バンドルする」とは、モジュール化された多数の JavaScript ファイルと、それらが依存するパッケージを解析し、ブラウザでの実行に最適化された少数のファイルにまとめることです。「デジタル庁デザインシステム」では、各コンポーネントがモジュール化されています

  • CSS / JS ファイルは GitHub Releases からダウンロードできます

概要

「デジタル庁デザインシステム コードスニペット (HTML 版)」では、デジタル庁デザインシステムがプレーンな HTML / CSS / JavaScript で実装されています。デジタル庁の狙いとして、このコードスニペットは複製・複写（コピー）して利用することを推奨しています。これは、

当コードスニペットはパッケージとしての配布を前提としていません。コピーして導入されたコードはプロジェクト固有の資産として扱われ、継続的なバージョンアップは想定されていません。[1][2]

という考えによるものです。

ところで、筆者は普段から React などでフロントエンドを本格的に開発・展開することは稀で、どちらかというと Web API を実装した後に、バニラな JavaScript を使って HTML 1 枚程度のプロトタイプやサンプルページを作成することが多いです。そのため、わざわざ Node.js や npm といったパッケージマネージャを利用して重厚な開発環境を構築するのではなく、サッとコードを書いて Go や Python のサーバー機能で手軽にサーブ（配信）するスタイルを好んでいます。

そこで、筆者は「導入方法」のページにある通り、GitHub リポジトリ の src/components から直接ファイルを取得し、モジュールとして導入することで、利用していました[3]。

<html>
  <head>
    <!-- ... -->
    <link rel="stylesheet" href="path/to/global.css">
    <link rel="stylesheet" href="path/to/components/button/button.css">
    <link rel="stylesheet" href="path/to/components/date-picker/date-picker.css">
    <script type="module" src="path/to/components/date-picker/date-picker.js"></script>
  </head>
  <body>
    <!-- ... -->
    <button class="dads-button" data-size="md" data-type="solid-fill">ボタン</button>
    <dads-date-picker>
        <!-- ... -->
    </dads-date-picker>
    <!-- ... -->
   </body>

いくつかの CSS と JS ファイルのみでデジタル庁デザインシステムに準拠したスタイルを導入できる為、この方法をいたく気に入りました。しかし、利用するコンポーネントが増えるごとに、ファイルを得たり、モジュールを import したりするのが億劫になりました。

筆者は、Bootstrap CSS のバンドルファイルのように、このデザインシステムを扱いたかったのです。

リリース

GitHub Actions を用いてリリースしたものがここにあります。ここに書いてあることをしなくても、ダウンロードするだけで動作します。

https://github.com/m-tsuru/dads-bundling-tools/releases

リリース名は 日付+時刻 (UTC) で示され、その時点でのリポジトリ digital-go-jp/design-system-example-components-html の main ブランチが参照されます。

仕組み

1. 対象の JS/CSS ファイルの場所を取得 (getFilesList)

GitHub Git Trees API で元のリポジトリの src/ 配下のバンドルする対象のファイルのリストを取得します。この時、StoryBook などに関連する、実際のサイトには必要のないファイルはすべて除外します。

2. 各ファイルをダウンロード

手順 1. のリストを元に、必要なファイルを取得します。

3. 仮想エントリーポイント（_entry.css、_entry.js）を作成

手順 1. のリストを元に、バンドルのためのエントリーポイントとなるファイルを仮想的に作成します。単に、全ファイルを @import / import で読み込むだけです。

4. ESBuild でバンドルされたファイルを生成

dads-components-bundle.css と dads-components-bundle.js およびそのソースマップが出力されます。

バンドルサイズ

バンドルサイズは 2025年12月24日 (UTC) 時点で以下になります。もし、あなたのプロジェクトに通信帯域に対してよりシビアな要求があったり、あるいはプロダクション環境で運用したい場合は、他の選択肢をとった方が良いでしょう。

  • CSS [102 KB]
  • CSS ソースマップ [196 KB]
  • JS [27 KB]
  • JS ソースマップ [71 KB]

リポジトリ

https://github.com/m-tsuru/dads-bundling-tools

おわりに

おわりです。

脚注

  1. https://design.digital.go.jp/dads/html/?path=/docs/documents-導入方法--docs&globals=outline:!true ↩︎

  2. shadcn/ui などの思想に似ている、と筆者は解釈しています ↩︎

  3. あるいは、@import path/to/components の形で参照することもできます。 ↩︎

Discussion