メインコンテンツまでスキップ

ShogiBoard

ShogiBoard は将棋盤・駒・持ち駒を描画するビューコンポーネントです。状態そのものは持たないため、useKifuPlayer や useShogiProblem などのフックで管理された position を渡して使用します。

useKifuPlayer との関係​

棋譜を再生するケースでは、useKifuPlayer で状態を管理し、ShogiBoard にその状態を渡します。

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

function Player({ kifuString }) {
  // useKifuPlayer が position・lastMove などを全て管理する
  const player = useKifuPlayer(kifuString);

  return (
    <ShogiBoard
      position={player.position}
      lastMove={player.lastMoveCoords || undefined}
      // 盤面クリックで進む/戻る
      onForward={player.forward}
      onBackward={player.backward}
    />
  );
}

useShogiProblem との関係​

ユーザーが実際に駒を動かせるインタラクティブモードには、useShogiProblem フックとの組み合わせが必要です。useShogiProblem が返す handleSquareClick や selectedSquare などをそのまま渡すだけで合法手判定・ハイライト表示まで自動で動きます。

import { useShogiProblem, ShogiBoard } from 'react-kifu-player';

function InteractiveBoard() {
  const problem = useShogiProblem({
    sfen: 'lnsgkgsnl/1r5b1/ppppppppp/9/9/9/PPPPPPPPP/1B5R1/LNSGKGSNL b - 1', // 平手初期局面
    playerColor: 'black',
    correctMoves: [], // 空にすると自由に指せる
  });

  return (
    <ShogiBoard
      position={problem.position}
      lastMove={problem.lastMove}
      interactive={true}
      onSquareClick={problem.handleSquareClick}  // クリックハンドラをそのまま渡す
      selectedSquare={problem.selectedSquare}    // 選択中マスのハイライト
      highlightSquares={problem.legalMoveSquares} // 合法手の青丸表示
      showReverseButton={true}
    />
  );
}

プロパティ (Props)​

Prop名型必須説明
positionPosition✅盤面の状態
interactivebooleantrue にすると駒がクリック可能になり（UI上の変化）、onSquareClick イベントが発火するようになります。※注: これをtrueにするだけで自動的に駒が動くようになるわけではありません。 駒を動かすには、親コンポーネントで onSquareClick を受け取り、position を更新する独自のロジックやフック（例：useShogiProblem）が必要です。
onSquareClick(sq: SquareClick) => voidinteractive={true} 時に発火するクリックハンドラ。クリックされたマスの座標や持ち駒情報が渡されます。
selectedSquareBoardSquareCoord | null選択中のマス（黄色ハイライト）。useShogiProblem の selectedSquare をそのまま渡せます
highlightSquaresBoardSquareCoord[]合法手候補のマス（薄い青丸）。useShogiProblem の legalMoveSquares をそのまま渡せます
showReverseButtonboolean盤面右上に反転ボタンを表示するかどうか
onForward() => void盤面右半分クリック時（interactive={false} 時のみ有効）
onBackward() => void盤面左半分クリック時（interactive={false} 時のみ有効）

実際の動作デモ​

以下は、interactive={true} と useShogiProblem（1手問題用のフック）を組み合わせた動作デモです。 ※ useShogiProblem は1手専用のため、1回動かすと正誤判定が行われ、その後は操作できなくなります（自由に何手も指せるわけではありません）。

Loading Demo...