utsusie
プレイグラウンドに戻る

CodePreview コンポーネント

プレイグラウンド用コード・プレビュー表示コンポーネント - デフォルト左右配置（特別な場合のみ上下配置）

基本的な使用例

デフォルトの左右配置レイアウト。デスクトップで効率的にコードとプレビューを同時に確認できます。

ボタンコンポーネント

TSX
import { Button } from '@/components/Button';

export default function Example() {
  return (
    <div className="space-y-4">
      <Button variant="primary">
        プライマリボタン
      </Button>
      <Button variant="secondary">
        セカンダリボタン
      </Button>
    </div>
  );
}

プレビュー

Variant設定カラム

3カラム構成でVariant設定を含む例。設定により動的にプレビューが変更されます。

設定

ボタンコンポーネント

TSX
import { Button } from '@/components/Button';

export default function Example() {
  return (
    <Button 
      variant="primary" 
      size="md"
    >
      サンプルボタン
    </Button>
  );
}

プレビュー

上下レイアウト

コードとプレビューを上下に配置するレイアウト。モバイルや狭い画面でのレスポンシブ表示に適しています。

カードコンポーネント

TSX
import { Card } from '@/components/Card';

export default function Example() {
  return (
    <Card className="max-w-sm">
      <Card.Header>
        <Card.Title>製品カード</Card.Title>
        <Card.Description>
          シンプルで美しいカードコンポーネント
        </Card.Description>
      </Card.Header>
      <Card.Content>
        <div className="space-y-4">
          <img 
            src="/placeholder.jpg" 
            alt="製品画像"
            className="w-full h-32 object-cover rounded"
          />
          <p className="text-gray-600 dark:text-gray-400">
            このカードコンポーネントは柔軟性があり、
            様々なコンテンツに対応できます。
          </p>
        </div>
      </Card.Content>
      <Card.Footer>
        <Button variant="primary" className="w-full">
          詳細を見る
        </Button>
      </Card.Footer>
    </Card>
  );
}

プレビュー

製品カード

シンプルで美しいカードコンポーネント

このカードコンポーネントは柔軟性があり、様々なコンテンツに対応できます。

左右レイアウト（デフォルト）

コードとプレビューを左右に配置する標準レイアウト。デスクトップで効率的にコードと結果を同時に確認できます。

カードコンポーネント

TSX
import { Card } from '@/components/Card';

export default function CardExample() {
  return (
    <Card className="max-w-sm">
      <Card.Header>
        <Card.Title>カードタイトル</Card.Title>
        <Card.Description>
          カードの説明文です。
        </Card.Description>
      </Card.Header>
      <Card.Content>
        <p>カードのメインコンテンツ</p>
      </Card.Content>
    </Card>
  );
}

実際の表示

カードタイトル

カードの説明文です。

カードのメインコンテンツ

プレビューのみ

コード表示が不要な場合のプレビュー専用表示

アイコン一覧

1
2
3
4
5
6
7
8
9
10
11
12

コードのみ

プレビューが不要な場合のコード専用表示

設定ファイル

JSON
{
  "name": "sample-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.0.0"
  }
}

シンタックスハイライト

react-syntax-highlighterによる美しいコードハイライト

JavaScript

JavaScript
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const result = fibonacci(10);
console.log(`Fibonacci(10) = ${result}`);

実行結果

$ node fibonacci.js
Fibonacci(10) = 55

CSS

CSS
.button {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: none;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

スタイル適用例

HTML

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルページ</title>
</head>
<body>
  <header>
    <h1>ウェブサイトタイトル</h1>
    <nav>
      <ul>
        <li><a href="#home">ホーム</a></li>
        <li><a href="#about">について</a></li>
      </ul>
    </nav>
  </header>
</body>
</html>

レンダリング結果

ウェブサイトタイトル

複数パターン表示

異なるバリエーションを比較表示

小さいボタン

TSX
<Button size="sm" variant="primary">
  小さいボタン
</Button>

プレビュー

大きいボタン

TSX
<Button size="lg" variant="primary">
  大きいボタン
</Button>

プレビュー

レスポンシブ動作

デバイスサイズに応じた自動レイアウト調整

レスポンシブ仕様:

• モバイル（〜1024px）: 常に上下レイアウト

• デスクトップ（1024px〜）: デフォルト左右配置（特別な場合のみ上下配置を指定）

• コード・プレビューは等幅で表示（flex-1）

• オーバーフロー時は自動スクロール対応

使用方法

CodePreviewコンポーネントの基本的な使用方法

基本的なインポートと使用

TSX
// インポート
import { CodePreview } from '@/components/CodePreview';

// 基本的な使用（デフォルト：左右配置）
<CodePreview>
  <CodePreview.Code title="コード" language="tsx">
    {`コードの内容`}
  </CodePreview.Code>
  <CodePreview.Preview title="プレビュー" centered={true}>
    {/* プレビューコンテンツ */}
  </CodePreview.Preview>
</CodePreview>

// 特別な場合のみ上下配置を指定
<CodePreview layout="vertical">
  <CodePreview.Code title="コード" language="tsx">
    {`コードの内容`}
  </CodePreview.Code>
  <CodePreview.Preview title="プレビュー" centered={true}>
    {/* プレビューコンテンツ */}
  </CodePreview.Preview>
</CodePreview>

Props 一覧:

CodePreview:

  • • layout: "horizontal" | "vertical" (デフォルト: "horizontal" - 左右配置、特別な場合のみ"vertical"を指定)
  • • className: カスタムCSSクラス

CodePreview.Code:

  • • title: コードブロックのタイトル
  • • language: シンタックスハイライトの言語 (tsx, js, css, html, json等)
  • • syntax: シンタックスハイライトの有効/無効 (デフォルト: true)
  • • flex: フレックスレイアウトの適用 (デフォルト: true)

CodePreview.Preview:

  • • title: プレビューエリアのタイトル
  • • background: "white" | "gray" | "transparent" (デフォルト: "white")
  • • centered: 中央配置の有効/無効 (デフォルト: true)
  • • align: 縦方向の配置 ("start" | "center" | "end" | "stretch")
  • • justify: 横方向の配置 ("start" | "center" | "end" | "between" | "around" | "evenly")
  • • direction: フレックス方向 ("row" | "column")
  • • flex: フレックスレイアウトの適用 (デフォルト: true)