![見出し画像](https://assets.st-note.com/production/uploads/images/53965839/rectangle_large_type_2_27c124587cd0f8c754ec7c3ae82e4c3a.jpeg?width=1200)
#40 ボタンをキーボードで操作する:React でプロプラ! Vol.3 「BlackJack」
「React.js でプログラミング・プラモデル」の連載第3弾。
React.js で、カジノゲーム「BlackJack」を作ろう!
これまで
前回は、デッキが少なくなったらシャッフルする処理を実装しました。
現時点の Sandbox
前回までの Sandbox はこちら。
はじめての方は、ここから一緒に作り始めることができます。
今回のゴール
・ボタンをキーボードで操作できるようにする
今回の設計書
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() はしないよ!」という意味だよ!
・クリーンアップ関数は、コンポーネントのアンマウント時(コンポーネントが画面から消えるとき)に実行されるよ!
・useEffect() 内で「関数 click(event) の定義」「イベントリスナーの登録・除去」をしていることがポイントだよ!ボタンが表示されていなければ、イベントは不要だよね!
実装例
キーボードでボタン操作できましたか?
START ボタンや NEXT ボタンを押したときの処理も実装してみましょう!
完成です!
おめでとうございます!
これでブラックジャックは完成です!
次回は、ちょっとだけあとがきを書きます。
この記事があなたのお役に立ちましたら、よろしければサポートをお願いいたします! より良い記事をお届けできるよう、活動費に充てさせていただきます。