CandidateList

CandidateList は、AIエンジンが出力した候補手（読み筋）のリストを表示するコンポーネントです。

データの取得方法

候補手データは useKifuPlayer から自動的に取得できます。 解析済み棋譜（** 解析 候補N コメントが含まれるKIFなど）を読み込むと、candidates として現在の手数の候補手が自動的に取り出されます。

import { useKifuPlayer, CandidateList } from 'react-kifu-player';

function PlayerWithCandidates({ kifuString }) {
  const player = useKifuPlayer(kifuString);

  return (
    <CandidateList
      // player.candidates に現在手数の候補手リストが入っている
      candidates={player.candidates}
      onCandidateClick={(candidate) => {
        // クリックされた候補手の読み筋を盤面上で再生
        player.playVariation(candidate.readMoves, candidate.score);
      }}
    />
  );
}

プロパティ (Props)

Prop名	型	必須	説明
candidates	Candidate[]	✅	候補手の配列。useKifuPlayer の candidates をそのまま渡せます
onCandidateClick	(candidate: Candidate) => void		候補手がクリックされた際のコールバック

Candidate 型

type Candidate = {
  /** 候補手ID (1, 2, 3...) */
  id: number;
  /** 評価値 */
  score: number;
  /** 探索深さ */
  depth?: number;
  /** 読み筋 (USIまたはKIF形式) */
  readMoves: string;
  /** 表示用に整形された読み筋 */
  formattedMoves?: string;
};

候補手クリック時の読み筋再生

useKifuPlayer の playVariation と組み合わせることで、クリックした候補手の読み筋を盤面上で再生できます。returnToMainLine で本譜に戻ることができます。

const player = useKifuPlayer(kifuString);

<CandidateList
  candidates={player.candidates}
  onCandidateClick={(cand) => player.playVariation(cand.readMoves, cand.score)}
/>
<button onClick={player.returnToMainLine}>本譜に戻る</button>

実際の動作デモ

以下は demo.kifu（解析情報入り）を読み込み、現在手数の候補手を表示するデモです。棋譜を進めると各手の候補手が切り替わります。候補手をクリックするとその読み筋が再生されます。

Loading Demo...