今回は、MDXとReactを使って、クリックするだけで運勢を占えるおみくじコンポーネントを作ってみました。 このおみくじは、大吉から大凶までの7段階の運勢をランダムに表示します。

おみくじを試してみよう

以下のボタンをクリックして、あなたの運勢を占ってみましょう：

おみくじを引いてみましょう

おみくじを引く

実装の解説

このおみくじコンポーネントは、ReactのuseStateフックとランダム値の生成を組み合わせて実装しています。 コードを詳しく見ていきましょう：

import { useState } from 'react';

export default function Omikuji() {
  const [fortune, setFortune] = useState<string | null>(null);
  const fortunes = ['大吉', '吉', '中吉', '小吉', '末吉', '凶', '大凶'];

  const drawFortune = () => {
    const randomIndex = Math.floor(Math.random() * fortunes.length);
    setFortune(fortunes[randomIndex]);
  };

  return (
    <div className="omikuji">
      <div className="fortune-display">
        {fortune ? (
          <>
            <p className="result">結果:</p>
            <p className="fortune">{fortune}</p>
          </>
        ) : (
          <p className="instruction">おみくじを引いてみましょう</p>
        )}
      </div>
      <button onClick={drawFortune} className="fortune-button">
        おみくじを引く
      </button>
    </div>
  );
}

コードの説明

1. 状態管理:

   • useState<string | null>(null)で結果を保持する状態変数を作成
   • 初期値はnullで、おみくじを引くまで結果は表示されない

2. 運勢の定義:

   • 7段階の運勢を配列で定義
   • すべての運勢が同じ確率で出現する

3. ランダム選択:

   • Math.random()で0から1未満の乱数を生成
   • fortunes.lengthを掛けて配列のインデックス範囲の数値を得る
   • Math.floor()で整数に変換

まとめ

このように、ReactとMDXを組み合わせることで、インタラクティブな要素を 簡単に記事に組み込むことができます。今回作成したおみくじコンポーネントは、 シンプルながらも楽しい機能を提供しています。