【React】デジタル庁デザインシステムを使ってみる

デジタル庁デザインシステムのサンプルコードを導入してみるイメージ

今回はデジタル庁デザインシステムのコードスニペット（React）を既存プロジェクトで利用してみたので、手順をまとめました。

社会人として働き始めて早くて１年になりました。

今まで開発してきたシステムとは桁が違う大きなシステムの開発に携わっています。
大きなシステムに携わって体感したことは、コーディング規約と静的解析の重要さです。
色々な人が開発していく中で、ある程度規定を決めておかないとぞれぞれがプログラムを書きたいように書くと不必要な関数の増加、関数自体の肥大化など品質に影響してくるということを体感しています。

話が変わって、今回はデジタル庁デザインシステムのサンプルコードを使用してみたい思い実際に導入してみました。導入したいと思った経緯から導入手順まで紹介します。

  1. 予備知識
  2. デジタル庁デザインシステム
  3. デジタル庁デザインシステムを導入したいと思った経緯
  4. サンプルコードを導入してみる
    1. 1.必要なライブラリをインストールする
    2. 2.設定ファイルを書き換える
    3. 3.index.cssに追記する。
    4. 4.必要なフォルダをコピーする
    5. 5.完了！
  5. まとめ

予備知識

まず予備知識をまとめます。

  • デザインシステム
    デザインに関する情報を構造化したもの。組織内でデザインの一貫性を高めて、再利用可能なコンポーネントを使用することで作業を効率的に進めることができる。またデザインに関する情報を構造化することで、デザイン工程と開発工程を連携することができるため、製品開発の時間とコストを大幅に削減できます。ユーザーにとってはデザインの一貫性があることで、一貫したユーザー体験（例：どのボタンをタップしたら次に進めるか）を得られる。
  • コンポーネント駆動UI開発
    デザインを構成する要素を分解して、最小となる単位コンポーネントを組み合わせて１つのUIを作成する考え方。メリットとしてコードの重複を削減できる。コードの重複が減ることで保守性を上げることができる。基となる考え方はアトミックデザイン。
  • Figma
    ブラウザ上で簡単にデザインができるツールです。共同作業ができることによって、さまざまな人が同時にデザインを編集できます。またコメント機能により、デザインと開発をつなぐ役割を担うことができます。

デジタル庁デザインシステム

デジタル庁が公開している政府のデジタルサービスの一貫性と保守性を向上させるためのデザインシステム。各省庁がバラバラにシステムが作っておりデザインがそれぞれ異なる現状に対して、統一されたユーザーエクスペリエンスを提供することを目的としている。

デジタル庁デザインシステムはFigma　Communityで公開されています。
https://www.figma.com/@digitalagencyjp

デジタル庁では「誰一人取り残されない、人に優しいデジタル化を。」の実現を目指し、ウェブサービス・ウェブアプリケーションの使い勝手や情報の探しやすさ、アクセシビリティ等の向上に取り組んでいます。
その一環として、「デザインシステム」の構築を推進し、官民問わずすべての方が参照できる形で公開しています。
https://www.digital.go.jp/policies/servicedesign/designsystem

例えば入力フォームなどで、どのボタンを押せば入力できるかわからない、どの部分が必須項目なのか分かりにくい、どこの項目が足りていないのか分かりにくいなど体感したことがある方は多いのではないでしょうか。

デジタル庁デザインシステムを導入したいと思った経緯

理由は２つあります。

１つ目は、デザインシステムの構築が進むと考えているからです。
デジタル庁が推進していることで、官公庁のシステムは既存のシステムはデジタル庁デザインシステムを利用する流れになります。またデジタル庁が推進することで、企業でもデザインシステムの構築が進むと考えています。すでにデザインシステムを導入している企業は、SmartHRなどがあります。

自社開発だけメリットがあるように思えますが、開発をSIerに委託する企業などもデザインシステムを構築しておけば、新しくシステムを作るときにデザインの工程を削減することができます。

設計書にある程度のデザインを定義しますが、ボタンの色が違う、会社のカラーに合っていない、などで指摘が入ることも多いのではないでしょうか。また実際システムを作った後に、思った色や挙動と違うから変更することも多いのではないでしょうか。

２つ目は、Figmaからコード生成することができないかと思ったからです。

現在デジタル庁デザインシステムはFigma Communityにデザインが、githubにサンプルコード（React）が公開されています。FigmaのデザインデータからそのままUI部分のコードを生成することができないかと思っています。
実際Figmaには、コード生成できるプラグインが数多く存在します。

今回は、まず、デジタル庁デザインシステムのサンプルコードを既存のプロジェクトに導入してみたいと思います。

サンプルコードを導入してみる

適当にReactプロジェクトを作成しておきます。今回は、React＋Typescriptで作成しました。またデジタル庁デザインシステムのサンプルコードもクローンしておきます。

1.必要なライブラリをインストールする

デジタル庁デザインシステムはスタイリングにTailwind CSSとデジタル庁デザインシステムのデザイントークンをベースにしたTailwind CSSのプラグインであ@digital-go-jp/tailwind-theme-pluginを使用しています。そのため、それぞれのライブラリを入れる必要があります。

npm install tailwindcss @digital-go-jp/tailwind-theme-plugin postcss autoprefixer

2.設定ファイルを書き換える

まずTailwind CSSを使用できるように初期設定を行います。以下のコマンドを実行します。

npx tailwind init -p

実行するとtailwind.config.jsとpostcss.config.jsが作成されます。このうちtailwind.config.jsをデジタル庁デザインシステムのサンプルコードと同じとなるように下記に書き換えます。

/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{ts,tsx}'],
theme: {
extend: {
fontFamily: {
mono: ['Noto Sans Mono'],
},
},
},
plugins: [require('@digital-go-jp/tailwind-theme-plugin')],
};

3.index.cssに追記する。

プロジェクト作成のままであればindex.cssにTailwindディレクティブを追記します。

@tailwind base; 
@tailwind components; 
@tailwind utilities;

4.必要なフォルダをコピーする

最後にクローンしておいたデジタル庁デザインシステムのサンプルコードからsrc/componentsとsrc/tokensをコピーします。

5.完了！

プロジェクト内でインポートすることで使える用になりました。
使い方はクローンしておいたデジタル庁デザインシステムのサンプルコードのstorybookを起動して、確認しながら開発を進めることができます。

まとめ

今回はデジタル庁デザインシステムのサンプルコードを既存のプロジェクトに導入してみました。
久しぶりにフロントエンドを触っているので、１つ１つ思い出しながら行っています。

次回はFigmaのデザインからコード生成する検証を行ってみたいと思います。

コメント

タイトルとURLをコピーしました