#40 ボタンをキーボードで操作する：React でプロプラ！ Vol.3 「BlackJack」

「React.js でプログラミング・プラモデル」の連載第３弾。
React.js で、カジノゲーム「BlackJack」を作ろう！

これまで

前回は、デッキが少なくなったらシャッフルする処理を実装しました。

現時点の Sandbox

前回までの Sandbox はこちら。
はじめての方は、ここから一緒に作り始めることができます。

BlackJack #39 - CodeSandbox

今回のゴール

・ボタンをキーボードで操作できるようにする

今回の設計書

src/components/BlackJackButtons.js

ブラックジャックボタンコンポーネント
// function BlackJackButtons(props) 内に
// useEffect(() => {}, []) を宣言して、以下の処理を実装してください
-----
■useEffect() の第一引数のアロー関数内に、以下の処理を実装する
1. 以下の関数を宣言する
 function click(event){} // 実装は後で
2 document オブジェクトに、以下のイベントリスナーを登録する
 - 第一引数: "keydown"
 - 第二引数: 関数 click()
 - 第三引数: {passive: true}
3 クリーンアップ関数を宣言し、「1.2」で設定したエベントリスナーを除去する

■関数 click(event) の実装
1. event.key が "h" のとき
 1.1 props.onClickHit() を実行する
2. event.key が "s" のとき
 2.1 props.onClickStand() を実行する

ヒント

・ { passive: true } は、「イベント内で e.preventDefault() はしないよ！」という意味だよ！
・クリーンアップ関数は、コンポーネントのアンマウント時（コンポーネントが画面から消えるとき）に実行されるよ！

副作用フックの利用法 – React

・useEffect() 内で「関数 click(event) の定義」「イベントリスナーの登録・除去」をしていることがポイントだよ！ボタンが表示されていなければ、イベントは不要だよね！

実装例

BlackJack #40 - CodeSandbox

キーボードでボタン操作できましたか？
START ボタンや NEXT ボタンを押したときの処理も実装してみましょう！

完成です！

おめでとうございます！
これでブラックジャックは完成です！
次回は、ちょっとだけあとがきを書きます。