![見出し画像](https://assets.st-note.com/production/uploads/images/48670832/rectangle_large_type_2_6816bf5beb03cd38c82ec623ecb94901.jpeg?width=1200)
#6 【React.jsで、BlackJackを作る】:STANDしてみる
これまで
前回は、カードを重ねて表示するようにしました。
BlackJack アプリの sandbox
BlackJack アプリの sandbox は以下です。
この sandbox は、連載が進むのと同時に更新されていきます。
「私も作りたい!」という方は、フォークして一緒に作り始めることができます。
はじめから作りたい方はこちら
STAND ボタンを押したときの処理を実装する
まずはプレイヤーが STAND(「もうカードは引きません」という宣言)できるようにしましょう。
src/BlackJack.js
関数 doStand() を見つけてください。
元のコードはこちらです。
function doStand() {
const card = getCard();
setCard(card);
const isWin = getRankNum(card.rank) < 7;
setIsWin(isWin);
isWin ? setWinCount(winCount + 1) : setLoseCount(loseCount + 1);
setAnswered(true);
}
「STAND しました」という state を定義して、この関数で更新するようにしましょう。
state の名前を考える
「STAND しました」という状態を表現する名前を考えてみましょう。
・isStand:簡潔ですが「スタンドかどうか」となり、意味合いとしては少しずれている印象です
・isStanded:「STAND」を動詞として扱い、「STAND したかどうか」のような意味合いです
・isDeclaredStand:ちょっと長いですが、文字通り「STAND が宣言されているか」という意味合いです
isDeclaredStand にしました
ちょっと長いのが少し気になりますが、私は「パッとみてわかる」ほうが好みなので isDeclaredStand にします。
state の定義と更新
state の名前が決まりましたので state isDeclaredStand を定義して、関数 doStand() で更新しましょう。
const [isDeclaredStand, setIsDeclaredStand] = useState(false)
function doStand() {
setIsDeclaredStand(true)
}
現在の画面
画面には特に変更はありませんでした。
詳しい変更はこちら
Codesandbox は GitHub連携ができます。
以下は今回のコミットによる差分です。
次回
プレイヤーが STAND できるようになったので、次回はディーラーがカードを引く処理を実装します!
この記事があなたのお役に立ちましたら、よろしければサポートをお願いいたします! より良い記事をお届けできるよう、活動費に充てさせていただきます。