![見出し画像](https://assets.st-note.com/production/uploads/images/53199227/rectangle_large_type_2_193a1f13e4c5597d29ab6ec2c70b30ce.jpeg?width=1200)
#32 ハンドのスコアを表示する④:React でプロプラ! Vol.3 「BlackJack」
「React.js でプログラミング・プラモデル」の連載第3弾。
React.js で、カジノゲーム「BlackJack」を作ろう!
これまで
前回は、ハンドに Ace が含まれているかを判定しました。
現時点の Sandbox
前回までの Sandbox はこちら。
はじめての方は、ここから一緒に作り始めることができます。
今回のゴール
・プレイヤーのスコアを画面に表示する
今回の設計書
src/components/PlayArea.js
プレイエリアコンポーネント
// JSX内のコメントで
// {/* Task 4 */} を見つけてください。
-----
1. コメント {/* Task 4 */} を以下の処理で置き換える
props.playersHand.length が 2 以上であれば、ハンドのスコアを表示する
ヒント
・React の条件つきレンダーという技術が必要だよ!
実装例
プレイヤーのスコアは表示できましたか?
ソフトハンドのときに「3 | 13」のように表示されるか確認してみましょう!
次回
次回は、ディーラーのスコアを画面に表示します!
この記事があなたのお役に立ちましたら、よろしければサポートをお願いいたします! より良い記事をお届けできるよう、活動費に充てさせていただきます。