Skip to main content

<KifuLite> Reactコンポーネント

前提​

  • reactとreact-domはpeerDependenciesに入っており、ライブラリ使用側でインストールする必要があります。hooksを使用しているため、React 16.8以上が必要です。
  • 状態管理にmobx@4とmobx-react@6を使用しています。

設計思想​

  • <KifuLite> は、KifuStoreオブジェクトをprop経由で受け取り、そのオブジェクトを介して盤の状態を監視・操作します。
  • <KifuLite> は、監視・操作が不要な場合の簡単のため、オプションオブジェクト options を直接propsとして受け取れます。

一旦描画するだけの場合​

盤を表示したあと、特にその盤を監視したり操作したりする必要ない場合かつ、optionsも後に変更する必要がない場合は、このコンポーネントをuncontrolledな状態で使用できます。すなわち、kifuStore propを使わず、<KifuLite>コンポーネントのpropsにオプションをオブジェクトとして渡すだけでよいです。

import { KifuLite } from "kifu-for-js";

const options = {
    kifu: "▲７六歩 △３四歩",
    ply: 2,
    static: {
        last: "hidden"
    }
}

function MyComponent () {
    return <KifuLite {...options} />
}
caution

optionsは、最初の描画時にKifuStoreを生成する際に使われるのみで、あとからpropを変更しても反映されません。

誤り
import { useState } from "react";
import { KifuLite } from "kifu-for-js";

const options = {
    kifu: "▲７六歩 △３四歩",
    static: {
        last: "hidden"
    }
}

function MyComponent () {
    const [ply, setPly] = useState(0);
    return (
      <>
        <button onClick={() => setPly(ply + 1)}>一手進める</button>
        {/* ⚠️ plyが変わっても反映されない*/}
        <KifuLite {...options} ply={ply} />
      </>
    )
}

描画後に監視・操作したりoptionsを変更する場合​

盤を表示した後、盤の状態を監視したり操作したりする必要があったり、options を後から変更する必要がある場合は、このコンポーネントをcontrolledな状態で使用する必要があります。すなわち、kifuStore propにKifuStoreオブジェクトを渡し、このオブジェクトを介して状態を監視したり操作したりします。

具体的には次のように、optionsを使ってKifuStoreオブジェクトを生成し、<KifuLite>のkifuStore propに渡します。この例では、MyComponentに渡されたplyが変わるのに応じて局面も変更します。

import { useEffect, useState } from "react";
import { KifuLite } from "kifu-for-js";

const options = {
    kifu: "▲７六歩 △３四歩",
    static: {
        last: "hidden"
    }
}

function MyComponent ({ply}) {
    const [kifuStore, setKifuStore] = useState(() => new KifuStore({...options, ply}));
    
    useEffect(() => {
        kifuStore.player.goto(ply);
    }, [ply])
    
    return <KifuLite kifuStore={kifuStore}/>
}

なお、uncontrolledな(kifuStore propが渡っていない) <KifuLite> を簡単にcontrolledにするために、kifuStoreと他のoptionsを同時にpropsに渡す方法も許容されています。

import { useEffect, useState } from "react";
import { KifuLite } from "kifu-for-js";

const options = {
  kifu: "▲７六歩 △３四歩",
  static: {
    last: "hidden"
  }
}

function MyComponent ({ply}) {
  // optionsを渡していないことに注意
  const [kifuStore, setKifuStore] = useState(() => new KifuStore());

  useEffect(() => {
    kifuStore.player.goto(ply);
  }, [ply])

  // propsにoptionsを渡す
  return <KifuLite kifuStore={kifuStore} ply={ply} {...options}/>
}
caution

KifuLiteにkifuStore以外のpropsを渡した場合、new KifuStore(options)に渡されたoptionsの値は上書きされるため無視されます。

誤り
import { useEffect, useState } from "react";
import { KifuLite } from "kifu-for-js";

const options = {
  kifu: "▲７六歩 △３四歩",
  static: {
    last: "hidden"
  }
}

function MyComponent ({ply}) {
  // ⚠️ ここで渡したoptionsは無視される！
  const [kifuStore, setKifuStore] = useState(() => new KifuStore(options)); 

  useEffect(() => {
    kifuStore.player.goto(ply);
  }, [ply])

  // plyを指定しているため、再度optionsの初期化が行われ、KifuStoreに渡された値は無視される
  return <KifuLite kifuStore={kifuStore} ply={ply}/>
}