#6 【React.jsで、BlackJackを作る】：STANDしてみる

これまで

前回は、カードを重ねて表示するようにしました。

BlackJack アプリの sandbox

BlackJack アプリの sandbox は以下です。

BlackJack - CodeSandbox

この sandbox は、連載が進むのと同時に更新されていきます。
「私も作りたい！」という方は、フォークして一緒に作り始めることができます。

はじめから作りたい方はこちら

#16 after - CodeSandbox

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連携ができます。
以下は今回のコミットによる差分です。

#6 揃 hakolab/blackjack@d5649b1

次回

プレイヤーが STAND できるようになったので、次回はディーラーがカードを引く処理を実装します！