デジタル庁デザインシステム：コンポーネントプレイグラウンドの構築-优快云博客

デジタル庁デザインシステム：コンポーネントプレイグラウンドの構築

【免费下载链接】design-system-example-components デジタル庁デザインシステムのサンプルコンポーネント项目地址: https://gitcode.com/GitHub_Trending/de/design-system-example-components

デジタル庁デザインシステム（DIGITAL AGENCY DESIGN SYSTEM）は、政府系Webサイトのデザイン統一と開発効率化を実現するための基盤です。本記事では、ReactとTailwind CSSを用いてこのデザインシステムのコンポーネントプレイグラウンドを構築する方法を解説します。完成後のプレイグラウンドでは、ボタンやフォーム部品などのUIコンポーネントを視覚的に確認し、実際のコードを簡単にコピーしてプロジェクトに組み込むことができます。

環境構築：開発環境の準備

まずはじめに、必要な開発環境を整えます。このデザインシステムのコンポーネントはReactとTypeScriptで構成されており、Storybookを使用してコンポーネントの開発と確認を行います。以下の手順に従って、開発環境をセットアップしてください。

リポジトリのクローン

まず、Gitを使用してプロジェクトのリポジトリをローカル環境にクローンします。ターミナルを開き、以下のコマンドを実行してください。

git clone https://gitcode.com/GitHub_Trending/de/design-system-example-components.git
cd design-system-example-components

依存パッケージのインストール

リポジトリをクローンしたら、次に必要な依存パッケージをインストールします。このプロジェクトではnpmを使用してパッケージ管理を行っていますので、以下のコマンドを実行してください。

npm install

このコマンドにより、package.jsonファイルに記載されているすべての依存パッケージがインストールされます。インストールにはしばらく時間がかかる場合がありますので、しばらくお待ちください。

Storybookの起動

依存パッケージのインストールが完了したら、Storybookを起動してコンポーネントのプレイグラウンドを開きます。以下のコマンドを実行してください。

npm run storybook

コマンドが正常に実行されると、Storybookの開発サーバーが起動し、デフォルトのブラウザが自動的に開いてStorybookのインターフェースが表示されます。もし自動的にブラウザが開かない場合は、ターミナルに表示されるURL（通常は http://localhost:6006）に手動でアクセスしてください。

コンポーネントの構成：主要なUI部品の紹介

このデザインシステムには、さまざまなUIコンポーネントが含まれています。これらのコンポーネントは、src/componentsディレクトリの下に整理されています。それぞれのコンポーネントには、TypeScriptの型定義やStorybookのストーリーファイルが含まれており、使い方やカスタマイズ方法を簡単に理解することができます。

主要コンポーネントの一覧

以下に、このデザインシステムで提供されている主要なコンポーネントの一覧を示します。それぞれのコンポーネントは、独立したディレクトリに格納されており、必要に応じて個別にインポートして使用することができます。

コンポーネント名	ディレクトリパス	用途
Button	src/components/Button/	さまざまなスタイルとサイズのボタンを提供します。
Input	src/components/Input/	テキスト入力フィールドを提供します。
Checkbox	src/components/Checkbox/	チェックボックスを提供します。
Radio	src/components/Radio/	ラジオボタンを提供します。
Select	src/components/Select/	プルダウンメニューを提供します。
DatePicker	src/components/DatePicker/	日付選択コンポーネントを提供します。
Dialog	src/components/v1/Dialog/	モーダルダイアログを提供します。
Breadcrumbs	src/components/Breadcrumbs/	パンくずリストを提供します。

ボタンコンポーネントの詳細

ここでは、代表的なコンポーネントとしてButtonコンポーネントの詳細について説明します。Buttonコンポーネントは、さまざまなバリエーション（solid-fill, outline, text）とサイズ（lg, md, sm, xs）を提供しており、さまざまな場面で柔軟に対応することができます。

Buttonコンポーネントのソースコード

Buttonコンポーネントのソースコードは、src/components/Button/Button.tsxファイルに記述されています。以下に、その主要部分を抜粋して示します。

export type ButtonVariant = 'solid-fill' | 'outline' | 'text';
export type ButtonSize = 'lg' | 'md' | 'sm' | 'xs';

export const buttonBaseStyle = `
  underline-offset-[calc(3/16*1rem)]
  focus-visible:outline focus-visible:outline-4 focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
  aria-disabled:pointer-events-none aria-disabled:forced-colors:border-[GrayText] aria-disabled:forced-colors:text-[GrayText]
`;

export const buttonVariantStyle: { [key in ButtonVariant]: string } = {
  'solid-fill': `
    border-4
    border-double
    border-transparent
    bg-blue-900
    text-white
    hover:bg-blue-1000
    hover:underline
    active:bg-blue-1200
    active:underline
    aria-disabled:bg-solid-gray-300
    aria-disabled:text-solid-gray-50
  `,
  'outline': `
    border
    border-current
    bg-white
    text-blue-900
    hover:bg-blue-200
    hover:text-blue-1000
    hover:underline
    active:bg-blue-300
    active:text-blue-1200
    active:underline
    aria-disabled:bg-white
    aria-disabled:text-solid-gray-300
  `,
  'text': `
    text-blue-900
    underline
    hover:bg-blue-50
    hover:text-blue-1000
    hover:decoration-[calc(3/16*1rem)]
    active:bg-blue-100
    active:text-blue-1200
    focus-visible:bg-yellow-300
    aria-disabled:bg-transparent
    aria-disabled:focus-visible:bg-yellow-300
    aria-disabled:text-solid-gray-300
  `,
};

export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
  const { asChild, children, className, variant, size, ...rest } = props;

  const classNames = `${buttonBaseStyle} ${buttonSizeStyle[size]} ${
    variant ? buttonVariantStyle[variant] : ''
  } ${className ?? ''}`;

  // コンポーネントのレンダリング処理...
});

ボタンのバリエーションと使用例

Buttonコンポーネントには、3種類のバリエーション（solid-fill, outline, text）と4種類のサイズ（lg, md, sm, xs）が用意されています。以下に、それぞれのバリエーションの使用例を示します。

ソリッドボタン（solid-fill）

<Button variant="solid-fill" size="md">
  送信
</Button>

アウトラインボタン（outline）

<Button variant="outline" size="sm">
  キャンセル
</Button>

テキストボタン（text）

<Button variant="text" size="xs">
  詳細を表示
</Button>

スタイリング：Tailwind CSSのカスタマイズ

このデザインシステムでは、Tailwind CSSを使用してコンポーネントのスタイリングを行っています。さらに、デジタル庁のデザイントークンをベースにした専用のTailwindプラグイン@digital-go-jp/tailwind-theme-pluginを使用して、一貫したデザインを実現しています。

デザイントークンの確認

デザイントークンは、src/tokensディレクトリにまとめられています。ここには、色、フォントサイズ、間隔、境界半径など、さまざまなデザインに関する定義が含まれています。必要に応じて、これらのトークンを参照してコンポーネントをカスタマイズすることができます。

主要なトークンファイルの一覧：

src/tokens/Colors.tsx - 色に関するトークン
src/tokens/Typography.tsx - フォントサイズや行間などのタイポグラフィに関するトークン
src/tokens/Radius.tsx - 境界半径に関するトークン
src/tokens/Elevation.tsx - 影の深さに関するトークン

Tailwindの設定

Tailwind CSSの設定は、tailwind.config.jsファイルで行われています。このファイルでは、デジタル庁のデザイントークンを取り込むためのプラグインの設定や、プロジェクト固有のカスタマイズを行うことができます。

// tailwind.config.js
const { digitalGoJpTheme } = require('@digital-go-jp/tailwind-theme-plugin');

module.exports = {
  theme: {
    extend: {
      // プロジェクト固有の設定を追加
    },
  },
  plugins: [
    digitalGoJpTheme(),
    // その他のプラグイン...
  ],
};

カスタマイズと拡張：独自のコンポーネントを追加する

このデザインシステムは、基本的なUIコンポーネントを提供するものですが、実際のプロジェクトでは、さらにカスタマイズや拡張が必要になる場合があります。ここでは、既存のコンポーネントをカスタマイズしたり、新しいコンポーネントを追加する方法について説明します。

既存コンポーネントのカスタマイズ

既存のコンポーネントをカスタマイズする場合は、元のコンポーネントを継承して新しいコンポーネントを作成する方法が推奨されます。これにより、元のコンポーネントの機能を維持しつつ、必要な変更を加えることができます。

例えば、Buttonコンポーネントに新しいバリエーションを追加する場合は、以下のようにします。

import { Button, ButtonProps } from '../Button';

export const CustomButton = (props: ButtonProps) => {
  const { variant = 'custom', ...rest } = props;
  
  // カスタムバリエーションのスタイルを定義
  const customVariantStyle = 'bg-green-900 hover:bg-green-1000';
  
  return (
    <Button
      {...rest}
      variant={variant === 'custom' ? 'solid-fill' : variant}
      className={`${variant === 'custom' ? customVariantStyle : ''} ${props.className}`}
    />
  );
};

新しいコンポーネントの追加

新しいコンポーネントを追加する場合は、src/componentsディレクトリの下に新しいディレクトリを作成し、その中にコンポーネントファイルとStorybookのストーリーファイルを配置します。例えば、Cardコンポーネントを追加する場合は、以下のようなディレクトリ構造になります。

src/components/
├── Card/
│   ├── Card.tsx
│   ├── Card.stories.tsx
│   └── index.ts

コンポーネントの実装が完了したら、Storybookで確認することができます。新しいコンポーネントは、Storybookを再起動することで自動的に検出されます。

まとめと次のステップ

この記事では、デジタル庁デザインシステムのコンポーネントプレイグラウンドの構築方法について説明しました。リポジトリのクローンから環境構築、コンポーネントの使用方法、カスタマイズまで、基本的な手順を一通り取り上げました。

これで、あなたはこのデザインシステムを使用して、政府系Webサイトの開発を効率化することができるようになりました。次のステップとしては、実際のプロジェクトにこれらのコンポーネントを導入してみることを推奨します。また、Storybookを活用してコンポーネントの挙動を詳しく調べたり、必要に応じてカスタマイズを行ったりすることで、より使いやすいUIを構築することができます。

最後に、このデザインシステムは継続的に開発が進められています。最新の情報については、公式のGitHubリポジトリやドキュメントを定期的に確認してください。新しいコンポーネントや機能が追加された際には、速やかに活用することができます。

公式ドキュメント: src/docs/introduction.mdx コンポーネント一覧: src/components/

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考