インストール

このガイドでは、CodeConnect Design Systemをプロジェクトに導入する方法を詳しく説明します。

前提条件

CodeConnect Design Systemを使用するには、以下が必要です:

Node.js: 18.0.0 以上
React: 19.0.0 以上
TypeScript: 5.0.0 以上 (推奨)
Tailwind CSS: 4.0.0 以上

パッケージマネージャーによるインストール

pnpm (推奨)

pnpm add @codeconnect-llc/design-system

npm

npm install @codeconnect-llc/design-system

yarn

yarn add @codeconnect-llc/design-system

セットアップ

1. スタイルのインポート

アプリケーションのエントリーポイント（app/root.tsx, _app.tsx, main.tsx など）でスタイルをインポートします:

// React Router の場合
import '@codeconnect-llc/design-system/styles'

export default function Root() {
  return (
    <html>
      <head>{/* ... */}</head>
      <body>{/* ... */}</body>
    </html>
  )
}

// Next.js の場合
// pages/_app.tsx または app/layout.tsx
import '@codeconnect-llc/design-system/styles'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

// Vite の場合
import '@codeconnect-llc/design-system/styles'
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

2. Tailwind CSS 4 の設定

Tailwind CSS 4では、tailwind.config.tsではなく、CSSファイル内で@themeディレクティブを使って設定します。

メインCSSファイルの作成

プロジェクトのメインCSSファイル（app.css、globals.css、index.cssなど）を作成します:

/* app.css, globals.css, index.css など */
@import "tailwindcss";
@import "@codeconnect-llc/design-system/styles";

@theme {
  /* デザインシステムのカラートークンを上書き可能 */
  --color-brand: var(--color-brand-base);
  --color-brand-hover: var(--color-brand-hover);
  --color-brand-active: var(--color-brand-active);

  --color-text-primary: var(--color-text-primary);
  --color-text-secondary: var(--color-text-secondary);
  --color-text-tertiary: var(--color-text-tertiary);

  --color-bg-primary: var(--color-bg-primary);
  --color-bg-secondary: var(--color-bg-secondary);
  --color-bg-tertiary: var(--color-bg-tertiary);

  --color-border: var(--color-border-primary);
  --color-border-secondary: var(--color-border-secondary);
}

重要: Tailwind CSS 4ではtailwind.config.tsは不要です。すべてのカスタマイズは@themeディレクティブ内で行います。

PostCSS の設定（必要な場合）

一部のフレームワークではpostcss.config.jsが必要です:

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

3. TypeScript の設定（オプションだが推奨）

tsconfig.json でパスエイリアスを設定すると便利です:

{
  "compilerOptions": {
    "strict": true,
    "paths": {
      "@/*": ["./src/*"],
      "@codeconnect-llc/design-system": ["./node_modules/@codeconnect-llc/design-system"]
    }
  }
}

フレームワーク別セットアップ

React Router 7

import '@codeconnect-llc/design-system/styles'
import { Links, Meta, Outlet, Scripts } from 'react-router'

export default function Root() {
  return (
    <html lang="ja">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  )
}

Next.js 15 (App Router)

import '@codeconnect-llc/design-system/styles'
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My App',
  description: 'Built with CodeConnect Design System',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  )
}

Vite + React

import '@codeconnect-llc/design-system/styles'
import './index.css' // Tailwind CSS の @import を含む
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

@import 'tailwindcss';

Astro

---
import '@codeconnect-llc/design-system/styles'
---

<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{Astro.props.title}</title>
  </head>
  <body>
    <slot />
  </body>
</html>

インストールの確認

セットアップが完了したら、簡単なコンポーネントをテストしてみましょう:

import { Button } from '@codeconnect-llc/design-system'

export default function TestPage() {
  return (
    <div style={{ padding: '2rem' }}>
      <h1>インストール成功!</h1>
      <Button variant="primary" onClick={() => alert('動作しています!')}>
        テストボタン
      </Button>
    </div>
  )
}

トラブルシューティング

CSS変数が反映されない

デザインシステムのスタイルが正しくインポートされているか確認してください:

// ❌ 間違い
import 'tailwindcss'

// ✅ 正しい
import '@codeconnect-llc/design-system/styles'

Tailwind CSS のクラスが効かない

メインCSSファイルで正しく@importしているか確認:

/* ❌ 間違い: デザインシステムのスタイルが読み込まれていない */
@import "tailwindcss";

/* ✅ 正しい */
@import "tailwindcss";
@import "@codeconnect-llc/design-system/styles";

型定義が見つからない

TypeScriptプロジェクトの場合、@types/react と @types/react-dom がインストールされているか確認:

pnpm add -D @types/react @types/react-dom

モノレポでの使用

モノレポ環境では、ワークスペース参照を使用します:

{
  "dependencies": {
    "@codeconnect-llc/design-system": "workspace:*"
  }
}

次のステップ

セットアップが完了したら:

開発者向けガイド - 基本的な使い方を学ぶ
コンポーネント一覧 - 利用可能なコンポーネントを確認
デザイン原則 - デザインシステムの思想を理解
Storybook - インタラクティブなドキュメントを確認