PandaCSS × ArkUI で作る！最新フロントエンド技術を活用したモダンデモサイト構築入門

# PandaCSSとArkUIで作る！モダンなデモサイト構築術 🚀

こんにちは、@YushiYamamotoです！今回は、最近注目を集めているPandaCSSとArkUIを使った簡易的なデモサイトの作り方について解説します。フロントエンド開発の最新トレンドを押さえつつ、初心者の方でも理解しやすいように丁寧に説明していきますね。

## はじめに：PandaCSSとArkUIとは？ 🤔

まず、今回使用する2つの主要技術について簡単に説明します。

**PandaCSS**は、ビルドタイムCSS-in-JSフレームワークです。静的解析を使用してコードからCSSを生成するため、ランタイムでのスタイル計算が不要になり、パフォーマンスが向上します。また、カスケードレイヤー（`@layer`）やCSSバリアブルなどのモダンなCSS機能を活用しています。

**ArkUI**は、45以上のヘッドレスUIコンポーネントを提供するライブラリで、React、Vue、Solidなど複数のJSフレームワークに対応しています。ステートマシンを活用した堅牢なインタラクション設計が特徴で、アクセシビリティ（WCAG準拠）にも優れています。

今回は、これらの技術をピュアなHTML、CSS、JavaScriptで再現したデモサイトを作成します。

## デモサイトの全体像 📝

今回作成するデモサイトは、以下の要素で構成されています：

1. ヘッダー（ロゴとタブナビゲーション）
2. メインコンテンツ（タブ切り替え式）
3. カードコンポーネント
4. フッター

全体的な構造を図で表すと以下のようになります：

```
┌─────────────────────────────────────────┐
│ ヘッダー                                │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐       │
│ │ロゴ │ │タブ1│ │タブ2│ │タブ3│       │
│ └─────┘ └─────┘ └─────┘ └─────┘       │
├─────────────────────────────────────────┤
│ メインコンテンツ                        │
│ ┌─────────────────────────────────────┐ │
│ │タブコンテンツ                       │ │
│ │                                     │ │
│ │ ┌─────┐ ┌─────┐ ┌─────┐            │ │
│ │ │カード│ │カード│ │カード│            │ │
│ │ └─────┘ └─────┘ └─────┘            │ │
│ │                                     │ │
│ └─────────────────────────────────────┘ │
├─────────────────────────────────────────┤
│ フッター                                │
└─────────────────────────────────────────┘
```

それでは、コードを見ていきましょう！

## HTML構造の解説 🏗️

まずはHTMLファイルから見ていきます。

```html

  <header class="header">
    <div class="container">
      <h1 class="logo">PandaCSS + ArkUI デモ</h1>
      <div class="tabs-container" id="main-tabs">
        <div class="tabs-list">
          <button class="tabs-trigger" data-value="home" aria-selected="true">ホーム</button>
          <button class="tabs-trigger" data-value="features">機能</button>
          <button class="tabs-trigger" data-value="about">概要</button>
        </div>
        <div class="tabs-content" data-value="home">
          <h2>PandaCSS と ArkUI を使ったモダンなウェブサイト</h2>
          <p>このデモサイトは、PandaCSSとArkUIの概念を取り入れて作成されています。PandaCSSはビルドタイムCSS-in-JSフレームワークで、ArkUIはヘッドレスUIコンポーネントライブラリです。</p>
          
          <div class="card-grid">
            <div class="card">
              <img src="https://via.placeholder.com/400x200?text=PandaCSS" alt="PandaCSS">
              <div class="card-body">
                <h3>PandaCSS</h3>
                <p>ビルドタイムCSS-in-JSフレームワークで、型安全なスタイリングを提供します。</p>
              </div>
            </div>
            <div class="card">
              <img src="https://via.placeholder.com/400x200?text=ArkUI" alt="ArkUI">
              <div class="card-body">
                <h3>ArkUI</h3>
                <p>アクセシブルなヘッドレスUIコンポーネントライブラリで、ステートマシンによって駆動されます。</p>
              </div>
            </div>
            <div class="card">
              <img src="https://via.placeholder.com/400x200?text=ParkUI" alt="ParkUI">
              <div class="card-body">
                <h3>Park UI</h3>
                <p>ArkUIコンポーネントをPandaCSSでスタイリングしたUIコンポーネントライブラリです。</p>
              </div>
            </div>
          </div>
        </div>
        <div class="tabs-content" data-value="features" hidden>
          <h2>主な機能</h2>
          <ul>
            <li>ビルドタイム最適化によるパフォーマンス向上</li>
            <li>型安全なスタイリング</li>
            <li>アクセシブルなUIコンポーネント</li>
            <li>ステートマシンによる堅牢なインタラクション</li>
            <li>レスポンシブデザイン</li>
          </ul>
        </div>
        <div class="tabs-content" data-value="about" hidden>
          <h2>このデモについて</h2>
          <p>このデモサイトは、PandaCSSとArkUIの基本的な使い方を示すために作成されました。</p>
          <p>PandaCSSは、カスケードレイヤー、:whereセレクタ、CSSバリアブルなどのモダンな機能を使用して、最高品質のCSSを生成します。ArkUIは、アクセシビリティに優れたヘッドレスUIコンポーネントを提供し、ステートマシンによって駆動されます。</p>
        </div>
      </div>
    </div>
  </header>

  <footer class="footer">
    <p>© 2025 PandaCSS + ArkUI デモ</p>
  </footer>
```

このHTMLでは、以下のポイントに注目してください：

1. **アクセシビリティ対応**: `aria-selected`属性を使用して、現在選択されているタブを示しています
2. **データ属性の活用**: `data-value`属性を使って、タブとコンテンツの関連付けを行っています
3. **セマンティックHTML**: 適切な見出しタグ（`h1`、`h2`、`h3`）を使用しています

## CSSレイヤーの活用 🎨

次に、CSSファイルを見ていきましょう。PandaCSSの特徴である**カスケードレイヤー**を活用しています。

```css
@layer reset, base, tokens, recipes, utilities;

/* Reset Layer */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}

/* Tokens Layer */
@layer tokens {
  :root {
    --colors-blue-500: #3B82F6;
    --colors-blue-600: #2563EB;
    --colors-blue-700: #1D4ED8;
    --colors-blue-100: #DBEAFE;
    --colors-gray-100: #F3F4F6;
    --colors-gray-200: #E5E7EB;
    /* 他のトークン */
  }
}

/* Base Layer */
@layer base {
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    color: var(--colors-gray-800);
    background-color: var(--colors-gray-100);
  }
  /* 基本スタイル */
}

/* Recipes Layer */
@layer recipes {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
  }
  
  .header {
    background-color: var(--colors-white);
    padding: var(--space-4) 0;
    box-shadow: var(--shadows-sm);
    margin-bottom: var(--space-8);
  }
  
  /* 他のコンポーネントスタイル */
}
```

### CSSレイヤーの重要性 💡

PandaCSSの特徴である`@layer`を使用することで、以下のメリットがあります：

1. **詳細度の戦争を防ぐ**: レイヤーの順序によって詳細度が決まるため、CSSの詳細度による予期せぬ上書きを防げます
2. **関心の分離**: リセット、ベース、トークン、レシピなど、役割ごとにスタイルを分類できます
3. **保守性の向上**: コードの見通しがよくなり、メンテナンスが容易になります

## JavaScriptでのインタラクション実装 ⚙️

最後に、JavaScriptファイルを見ていきましょう。ArkUIのステートマシンの考え方を取り入れたシンプルな実装です。

```javascript
// タブ機能の実装
document.addEventListener('DOMContentLoaded', () => {
  const tabsContainer = document.getElementById('main-tabs');
  const triggers = tabsContainer.querySelectorAll('.tabs-trigger');
  const contents = tabsContainer.querySelectorAll('.tabs-content');
  
  // タブ切り替え機能
  triggers.forEach(trigger => {
    trigger.addEventListener('click', () => {
      const value = trigger.getAttribute('data-value');
      
      // トリガーの状態を更新
      triggers.forEach(t => {
        t.setAttribute('aria-selected', t === trigger);
      });
      
      // コンテンツの表示/非表示を切り替え
      contents.forEach(content => {
        const contentValue = content.getAttribute('data-value');
        if (contentValue === value) {
          content.hidden = false;
        } else {
          content.hidden = true;
        }
      });
    });
  });
});
```

このJavaScriptコードは、以下のような流れで動作します：

```
┌─────────────────┐       ┌─────────────────┐       ┌─────────────────┐
│ タブクリック    │ ───▶ │ タブ状態更新    │ ───▶ │ コンテンツ切替  │
└─────────────────┘       └─────────────────┘       └─────────────────┘
      │                         │                         │
      ▼                         ▼                         ▼
┌─────────────────┐       ┌─────────────────┐       ┌─────────────────┐
│ data-value取得  │       │ aria-selected   │       │ hidden属性      │
│                 │       │ 属性の更新      │       │ の切り替え      │
└─────────────────┘       └─────────────────┘       └─────────────────┘
```

## 実装のポイント 🔑

### 1. デザイントークンシステム

PandaCSSの特徴であるデザイントークンシステムを、CSSカスタムプロパティ（変数）で再現しています。

```css
:root {
  --colors-blue-500: #3B82F6;
  --space-4: 1rem;
  --fontSizes-xl: 1.25rem;
  --radii-md: 0.375rem;
  /* 他のトークン */
}
```

これにより、デザインの一貫性を保ちながら、変更が必要な場合も一箇所を修正するだけで済みます。

### 2. レスポンシブデザイン

メディアクエリを使用して、様々な画面サイズに対応しています。

```css
.card-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
```

### 3. アクセシビリティ対応

ArkUIの特徴であるアクセシビリティを考慮し、WAI-ARIAの属性を適切に使用しています。

```html
ホーム
```

## 実際に試してみよう！ 🚀

このデモサイトを自分で試してみたい方は、以下の手順に従ってください：

1. 新しいフォルダを作成し、その中に以下の3つのファイルを作成します：
   - `index.html`
   - `styles.css`
   - `script.js`

2. 上記で紹介したコードをそれぞれのファイルにコピーします。

3. ブラウザで`index.html`を開きます。

## 発展：実際のPandaCSSとArkUIを使う場合 🔍

今回は純粋なHTML/CSS/JavaScriptでデモを作成しましたが、実際のプロジェクトでPandaCSSとArkUIを使用する場合は、以下のようなセットアップが必要です：

```bash
# 依存関係のインストール
npm install @ark-ui/react
npm install --save-dev @pandacss/dev
```

PandaCSSの設定ファイル（`panda.config.ts`）の例：

```typescript
import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  // CSSリセットを使用するかどうか
  preflight: true,
  
  // CSSの宣言を探す場所
  include: ['./src/**/*.{ts,tsx,js,jsx}'],
  
  // 除外するファイル
  exclude: [],
  
  // JSXフレームワークの指定
  jsxFramework: 'react',
  
  // 出力ディレクトリ
  outdir: 'styled-system',
})
```

## まとめ 📝

今回は、PandaCSSとArkUIの概念を取り入れた簡易的なデモサイトの作り方を解説しました。

- **PandaCSS**のカスケードレイヤー、デザイントークン、アトミックCSSの考え方
- **ArkUI**のアクセシビリティ、ステートマシン駆動のコンポーネント設計

これらの最新技術を理解することで、より効率的で保守性の高いフロントエンド開発が可能になります。実際のプロジェクトでは、これらのライブラリを直接使用することで、さらに強力な機能を活用できます。

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="emYRVpR" data-pen-title="Untitled" data-editable="true" data-user="yamamotoyushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yamamotoyushi/pen/emYRVpR">
  Untitled</a> by Yushi Yamamoto (<a href="https://codepen.io/yamamotoyushi">@yamamotoyushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

皆さんも是非、PandaCSSとArkUIを試してみてください！質問やフィードバックがあれば、コメント欄でお待ちしています。

次回は、実際のReactプロジェクトでPandaCSSとArkUIを使った実践的な開発方法について解説する予定です。お楽しみに！

---

*この記事が参考になったら、いいね👍やシェア🔄をお願いします！*

---

### 最後に：業務委託のご相談を承ります

私は、業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用し、レスポンシブなWebサイトやインタラクティブなアプリケーション、API連携など、幅広いニーズに対応可能です。

「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、ぜひお気軽にご相談ください。一緒にビジネスの成長を目指しましょう！

👉 [ポートフォリオ](https://yushiyamamoto.vercel.app/)

🌳 [らくらくサイト](https://rakuraku-site.prodouga.com/)