#3 React.js でプログラミング・プラモデル Vol.3 「BlackJack」：トランプのデータを作る

これまで

前回は、ゲームを開始するためのボタンを作成しました。

現時点の Sandbox

前回までの連載で出来上がる Sandbox は以下です。
はじめての方は、この Sandbox をフォークしてください。
ここから一緒に作り始めることができます。

BlackJack #2 - CodeSandbox

今回のゴール

・トランプのデータを作る

今回の設計書

src/utils/BlackJackUtils.js

関数 getDeck(numberOfDeck = 1)
-----
■定数宣言
1. suits: ["♠", "♣", "❤", "♦"] で初期化する
2. ranks: ["A", "2", "3" ~ "K"] で初期化する
3. deck: 空の配列で初期化する
■処理詳細
1. 引数で渡される numberOfDeck の数だけ、以下の処理を繰り返す
 1.1 定数 suits, ranks の全ての組み合わせで 52枚のカードオブジェクトを作成する
     ※オブジェクトの形式は {suit: string, rank: string} とする
 1.2 作成したオブジェクトは、定数 deck に push する
2. 定数 deck を呼び出し元に返却する
 完成イメージ：
 [{suit: "♠", rank: "A"},{suit: "♠", rank: "2"},...{suit: "♦", rank: "K"}]

ヒント

・配列の各要素に対して処理を行う場合は map() や forEach() を使おう！
・map() と forEach() のどちらが今回適しているかを考えてみよう！

実装例

BlackJack #3 - CodeSandbox

トランプのデータは作れましたか？
動作確認をする場合は、src/BlackJack.js から関数 getDeck() を呼び出してコンソールに出力してみましょう！

src/BlackJack.js

/** デッキ初期値 */
const initialDeck = BJUtils.getDeck(3);
console.log(initialDeck);

もしわからない場合は、過去の連載でほぼ同じ処理を紹介していますので参考にしてみてください！

次回

次回は、デッキの最少枚数を求める処理を実装します！