LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@YushiYamamoto(らくらくサイト 開発者)

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

Posted at

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ファイルから見ていきます。


  <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の特徴であるカスケードレイヤーを活用しています。

@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のステートマシンの考え方を取り入れたシンプルな実装です。

// タブ機能の実装
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カスタムプロパティ（変数）で再現しています。

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

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

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

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

.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の属性を適切に使用しています。

ホーム

実際に試してみよう！ 🚀

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

  1. 新しいフォルダを作成し、その中に以下の3つのファイルを作成します：

    • index.html
    • styles.css
    • script.js

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

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

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

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

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

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

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のアクセシビリティ、ステートマシン駆動のコンポーネント設計

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

See the Pen Untitled by Yushi Yamamoto (@yamamotoyushi) on CodePen.

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

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

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

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

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

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

👉 ポートフォリオ

🌳 らくらくサイト

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?