#33 ディーラーのスコアを表示する：React でプロプラ！ Vol.3 「BlackJack」

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

これまで

前回は、プレイヤーのスコアを表示しました。

現時点の Sandbox

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

BlackJack #32 - CodeSandbox

今回のゴール

・ディーラーのスコアを画面に表示する

実装の前に

プレイヤーのターンが終わるまで、ディーラーの２枚目のカードは伏せられています。
なので、ディーラーのスコアは「プレイヤーのターンが終わってから」表示します！

今回の設計書

src/components/PlayArea.js

プレイエリアコンポーネント
// JSX内のコメントで
// {/* Task 1 */} を見つけてください。
-----
■表示条件の設定
1. 親要素（Box）の visibility 属性に以下の式を設定する
 props.isPlayersTurnEnd が true のとき "visible"、false のとき "hidden"
■処理詳細
1. props.dealersHand.length が 2 以上のとき
 1.1 ディーラーのスコアを表示する

ヒント

・属性に式を設定するときは { } で囲むよ！
・if 文は文なので式としては使えないよ！そんなときは三項演算子で書こう！

JSX を深く理解する – React

条件付きレンダー – React

実装例

BlackJack #33 - CodeSandbox

ディーラーのスコアは表示できましたか？
条件付きレンダーは、いろんな表示をするときに便利なのでぜひ身につけておきましょう！

次回

次回から複数回に分けて、勝敗を表示します！