#39 デッキをシャッフルする②：React でプロプラ！ Vol.3 「BlackJack」

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

これまで

前回は、デッキの枚数が少なくなったら reducer() にディスパッチする処理を実装しました。

現時点の Sandbox

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

BlackJack #38 - CodeSandbox

今回のゴール

・デッキをシャッフルする処理を実装する

今回の設計書

src/BlackJack.js

レデューサー
// case "shuffle": を見つけてください
-----
1. action.type が "shuffle" のとき、以下の処理を行う
 1.1 定数 newDeck を宣言し、BlackJackUtils.getDeck(numberOfDeck) の戻り値で初期化する
 1.2 state.deck を newDeck で更新する
 1.3 state を返却する

ヒント

・「シャッフルする」といっても、プログラム的には「作り直す」ってことだね！
・デッキは 3つだよ！
・1.2 ~ 1.3 は、もうすっかりお馴染みのスプレッド構文で 1行にまとめよう！

実装例

BlackJack #39 - CodeSandbox

デッキをシャッフルできましたか？
動作確認する場合は、前回と同じようにコンソールを仕込みましょう！
「32 → 156」と出力されていればオッケーです！

src/BlackJack.js

// シャッフルタイム
useEffect(() => {
 console.log(state.deck.length);
 if (state.deck.length <= state.minimumNumber) {

次回

ゲームとしてはこれで完成ですが、遊びやすさを少し追求してみましょう。
ボタン操作をキーボードでできるようにします！

次回で最終回の予定です！