デザインシステムの利用
ホストアプリにライブラリをインストールし、テーマプロバイダーを適用して、未使用のコンポーネントをtree-shakingし、バージョンアップで最新状態を保ちます。
「デザインシステムの利用」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
インストールとセットアップ
デザインシステムを依存関係として追加します。ライブラリによっては、プロバイダー、CSSのインポート、フォントの読み込みなど、追加の設定が必要です。
npm install @yourorg/design-system
// app/layout.tsx (or main.tsx)
import '@yourorg/design-system/dist/tokens.css';
import { DesignSystemProvider } from '@yourorg/design-system';
<DesignSystemProvider theme="light">
<App />
</DesignSystemProvider>Theme Provider
ほとんどのデザインシステムには、テーマ（ライト／ダーク）、ロケール、共有コンテキストのための最上位プロバイダーが用意されています。アプリを一度ラップしてください。
<DesignSystemProvider
theme={isDarkMode ? darkTheme : lightTheme}
locale="en"
>
<App />
</DesignSystemProvider>コンポーネントをインポートする
必要なものだけをインポートします。tree-shakingと組み合わせることで、使用するコンポーネントだけが提供されます。
import { Button, Card, TextField } from '@yourorg/design-system';
function LoginForm() {
return (
<Card>
<TextField label="Email" type="email" />
<TextField label="Password" type="password" />
<Button variant="primary">Sign In</Button>
</Card>
);
}サブパスインポート
一部のライブラリでは、コードを明確にし、バンドルサイズを削減するためにサブパスインポートを使用できます。
// Subpath (e.g., MUI):
import Button from '@yourorg/design-system/Button';
import Card from '@yourorg/design-system/Card';
// Tree-shakeable named exports also work for ESM:
import { Button, Card } from '@yourorg/design-system';Tree-shakingのヒント
tree-shakingは、バンドル時に未使用のexportを削除します。必要な条件は、ESMビルド、ライブラリのpackage.jsonでのsideEffects: falseの指定、コード内での名前付きインポートです。バンドルアナライザーで確認してください。
テーマによるカスタマイズ
ライブラリをフォークせずにテーマトークンを上書きし、ブランドに合わせられます。
import { defaultTheme } from '@yourorg/design-system';
const customTheme = {
...defaultTheme,
colors: {
...defaultTheme.colors,
primary: '#ff5733'
}
};
<DesignSystemProvider theme={customTheme}>
<App />
</DesignSystemProvider>コンポーネントの拡張
ボタンを少しだけ変えたい場合は、フォークせずにコンポーズします。
import { Button as DSButton } from '@yourorg/design-system';
function IconButton({ icon, ...props }) {
return (
<DSButton {...props}>
<Icon name={icon} />
{props.children}
</DSButton>
);
}アップグレード前にCHANGELOGを読む
MAJORバージョンにアップグレードする前には、必ずCHANGELOGを読んでください。破壊的変更、移行用codemod、推奨される新しいAPIを確認します。
メジャーアップグレード用のCodemod
優れたライブラリには、破壊的変更への移行を自動化するcodemod（jscodeshiftスクリプト）が用意されています。
npx @yourorg/design-system-codemod v2 src/
# automatically renames old prop names, updates imports, fixes deprecated APIsピン留めとCaret
"^1.4.2"では1.x.yへのアップグレードが許可されますが、ライブラリがSemVerを厳密に守らない場合は危険です。"1.4.2"は完全に固定するため最も安全ですが、手動で更新する必要があります。RenovateやDependabotを使うと、毎週の更新を自動化できます。
上流への問題報告
バグを見つけましたか？最小限の再現コードを添えてissueを登録してください。機能が必要ですか？まずdiscussionを開始してください。修正を上流に還元することで、全員が使うデザインシステムを改善できます。
スタイルの上書きを避ける
!importantや子孫セレクターを使ってデザインシステムの内部に入り込まないでください。公開されているテーマAPIを使います。応急処置のような上書きは、次回のアップグレードで壊れてしまいます。
クイックチェック
デザインシステムがESMとnamed exportを使用している場合、必要なコンポーネントだけを利用する最もすっきりした方法は何でしょうか？
まとめ: デザインシステムの利用
インストールし、テーマを指定したDesignSystemProviderでラップします。tree-shakingにはnamed ESM importを使います。ブランドに合わせてテーマトークンを上書きします。フォークせずにコンポーズします。MAJORアップグレードの前にCHANGELOGを読み、用意されていればcodemodを実行します。ピン留めとcaretは慎重に使います。バグやPRを上流に報告します。公開APIを避けるために!importantを使わないでください。
よくある質問
「デザインシステムの利用」レッスンは無料ですか？
はい。「デザインシステムの利用」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「デザインシステムの利用」で何を学びますか？
ホストアプリにライブラリをインストールし、テーマプロバイダーを適用して、未使用のコンポーネントをtree-shakingし、バージョンアップで最新状態を保ちます。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「デザインシステムの利用」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。