MDX で React コンポーネントを使う 🚀

このページでは、MDX内でReactコンポーネントをインポートして使用する方法を実演します。

1. シンプルなカウンター

通常のMarkdownテキストの中に、Reactコンポーネントを埋め込むことができます：

React Counter

10

➕ Increment➖ Decrement🔄 Reset

Current count: 10

上のカウンターは完全にインタラクティブなReactコンポーネントです！

コード例

import Counter from "@components/Counter.tsx";

// MDX内で使用
<Counter client:load initialCount={10} />

2. Todo リスト

もっと複雑な状態管理を持つコンポーネントも問題なく動作します：

React Todo List

追加

• Astroを学ぶ✕
• Reactコンポーネントを作る✕
• MDXを使いこなす✕

完了: 2 / 全体: 3

このTodoリストは：

• ✅ 状態管理（useState）
• ✅ イベントハンドリング
• ✅ 条件付きレンダリング
• ✅ TypeScript型定義

すべてが完璧に機能しています！

3. タブコンポーネント

DaisyUIのスタイルを使用したタブUIも簡単に実装できます：

概要特徴メリット

概要

ReactコンポーネントをMDX内で使用することで、インタラクティブなUIを簡単に構築できます。

4. 複数のカウンター

同じコンポーネントを異なる初期値で複数配置することも可能：

Astro の Client Directives

Reactコンポーネントを使用する際は、client:* ディレクティブを指定します：

• client:load - ページロード時に即座にハイドレーション
• client:idle - メインスレッドがアイドル状態になったらハイドレーション
• client:visible - コンポーネントがビューポートに入ったらハイドレーション
• client:media - 特定のメディアクエリに一致したらハイドレーション
• client:only - サーバーサイドレンダリングをスキップ

例

<Counter client:load />           // 即座に読み込み
<Counter client:idle />           // アイドル時に読み込み
<Counter client:visible />        // 表示時に読み込み
<Counter client:only="react" />   // クライアントのみ

コンポーネントファイル構造

src/
├── components/
│   ├── Counter.tsx      # Reactコンポーネント
│   ├── TodoList.tsx     # Reactコンポーネント
│   └── Tabs.tsx         # Reactコンポーネント
└── content/
    └── blog/
        └── react-in-mdx.mdx  # このファイル

メリット

1. 再利用性 - 一度作ったコンポーネントを複数のMDX記事で使用可能
2. 型安全 - TypeScriptで型チェックが効く
3. モジュール性 - 複雑なロジックをカプセル化
4. エコシステム - npmの豊富なReactライブラリを活用可能
5. パフォーマンス - Astroの部分的ハイドレーションで最適化

まとめ

MDX + React + Astro の組み合わせにより：

• 📝 Markdownの書きやすさ
• ⚛️ Reactの強力なコンポーネントシステム
• ⚡️ Astroの高速なパフォーマンス

すべてを同時に享受できます！

---