デジタル庁デザインシステム：コントリビューター向け開発環境構築ガイド
项目地址: https://gitcode.com/GitHub_Trending/de/design-system-example-components はじめに
あなたがデジタル庁デザインシステムのコンポーネント開発に貢献したいと考えているなら、このガイドが必要です。デジタル庁デザインシステムは、行政のデジタルサービスの品質向上を目指したもので、React/Tailwind CSSで実装されたサンプルコンポーネントの集合です。このガイドでは、開発環境の構築手順を詳しく説明します。
前提条件
開発を始める前に、以下のソフトウェアがインストールされていることを確認してください。
- Node.js (v20.x以上)
- npm (v10.x以上)
- Git
リポジトリのクローン
まず、プロジェクトのリポジトリをローカルにクローンします。以下のコマンドを実行してください。
git clone https://gitcode.com/GitHub_Trending/de/design-system-example-components.git
cd design-system-example-components
依存パッケージのインストール
リポジトリをクローンしたら、次に依存パッケージをインストールします。以下のコマンドを実行してください。
npm install
このコマンドは、package.jsonファイルに記載されているすべての依存パッケージをインストールします。主な依存パッケージには、React、React Aria Components、Tailwind CSSなどが含まれています。
Storybookの起動
開発環境の構築が完了したら、Storybookを起動してコンポーネントを確認できます。以下のコマンドを実行してください。
npm run storybook
このコマンドは、ローカルサーバーを起動し、ブラウザでStorybookを開きます。デフォルトでは、http://localhost:6006 でアクセスできます。Storybookでは、各コンポーネントの動作やスタイルを確認することができます。
コンポーネントの構造
プロジェクトのコンポーネントは、src/componentsディレクトリに格納されています。各コンポーネントは個別のディレクトリに配置され、主に以下のファイルで構成されています。
Component.tsx: コンポーネントの実装ファイルComponent.stories.tsx: Storybookのストーリーファイルindex.ts: コンポーネントのエクスポートファイル
例えば、Buttonコンポーネントは以下のパスにあります。
src/components/Button/
├── Button.tsx
├── Button.stories.tsx
└── index.ts
開発ワークフロー
- 新しい機能やバグ修正のために、新しいブランチを作成します。
- コンポーネントの実装や修正を行います。
- Storybookを使ってコンポーネントの動作を確認します。
- コードのフォーマットとリントを実行します。
npm run format # コードのフォーマット
npm run lint # コードのリント
- 変更をコミットし、プルリクエストを作成します。
ビルドの実行
コンポーネントの開発が完了したら、本番用のビルドを生成できます。以下のコマンドを実行してください。
npm run build
このコマンドは、TypeScriptのコンパイルとViteによるバンドルを実行し、dist/ディレクトリに出力します。
検証済み環境
本プロジェクトは以下の環境で動作を確認しています。
ブラウザ
- Google Chrome最新版
- Microsoft Edge最新版
- Safari最新版
- Firefox最新版
スクリーンリーダー
- NVDA
- iOS VoiceOver
- TalkBack
- Mac VoiceOver
コンポーネントのバージョンについて
DADS v2はv2.0.0以降の最新のガイドラインとデザインデータを基に作られたコンポーネントです。v1.x系統が基となっているDADS v1のコンポーネントは非推奨となっています。非推奨のコンポーネントは、src/components/v1/ディレクトリに格納されています。
不具合報告・機能要望
本コードスニペットに関する不具合や機能要望は、GitHubのリポジトリからIssueを作成して報告してください。詳細については、src/docs/introduction.mdxを参照してください。
まとめ
このガイドでは、デジタル庁デザインシステムの開発環境構築手順を説明しました。リポジトリのクローン、依存パッケージのインストール、Storybookの起動など、開発の準備段階から実際の開発フローまでをカバーしています。これであなたもコンポーネントの開発に取り掛かることができます。ぜひ、行政のデジタル環境向上に貢献してください！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
