#5 React.js でプログラミング・プラモデル Vol.2 「Border7」：【出題編】画面にトランプのカードを表示する

これまで

前回までで、トランプカード表示のために必要になるカードのデータを作成しました。今回は、そのデータを使用して、画面にトランプのカードを表示します。
初めての方は #3 からご覧ください。

はじめての出題編

これまでは、プログラミング・プラモデルの導入ということで、出題と解答例を同時に提示してきましたが、今回からは出題編と解答編で別々に進めていきたいと思います。

関連ファイル

画面にトランプのカードを表示するためには、以下の三つのファイルを編集します。

・src/Border7.js
・src/components/PlayArea.js
・src/components/Card.js

ここで一度、Border7 でカードを表示するための画面構成がどのようになっているかを見ていきましょう。
Border7.js の一番下のリターン文で返却している内容を見てください。

  /**
  * Border7 コンポーネント返却
  *
  * 返却内容
  *  - PlayArea コンポーネント
  *    ※ props には以下の値を設定する
  *     - card: state card
  *
  *  - getMessage() から返却される Message コンポーネント
  *
  *  - state isGameFinished が false の場合
  *     - getButtons() から返却されるボタンコンポーネント
  *
  */
 return (
   <Box>
     {/* PlayArea コンポーネント */}
     <Box /* className={classes.messageArea} */>
       {/* getMessage() から返却されるコンポーネント */}
       {/* getButtons() から返却されるコンポーネント */}
     </Box>
   </Box>
 );

jsDoc の返却内容を見ると、PlayArea コンポーネントをセットすること、そして props.card には、state card をセットすることが書かれています。
getMessage() や getButtons() はまだ実装していませんので、保留で構いません。
続いて、PlayArea.js を見てください。

/**
* プレイエリアコンポーネント
*
* 処理概要
*  - カードを表示する
*
* 処理詳細
*  - 定数 classes を宣言して、useStyles() hook を使用して初期化する
*  - Card コンポーネントをセットする
*    ※ props.card に card オブジェクトを設定する
*
* @param {*} props
*/
export default function PlayArea(props) {
 return (
   <Box /* className={classes.playArea} */>
     <Grid container direction="row" spacing={2} alignItems="center" justify="center">
       <Grid item>{/* Card コンポーネント */}</Grid>
     </Grid>
   </Box>
 );
}

jsDoc の処理詳細を見てみると、スタイル設定をすることと、Card コンポーネントをセットすること、そして props.card に card オブジェクト（props.card で渡されてくるもの）を渡すということが書かれています。
最後に、Card.js を見てください。

/**
* Card コンポーネント
*
* 処理概要
*  - props で card オブジェクトを受け取り、カードを作成する
*
* 処理詳細
*  - 定数 classes を宣言して、useCardStyles() hook を使用して初期化する
*  - 定数 topAndBottom を宣言して props.card.suit と props.card.rank を連結した値で初期化する
*    例：　suit = "♠"、 rank = "A" → "♠A"
*  - 定数 middle を宣言して props.suit の値で初期化する
*    例：　suit = "♠" → "♠"
*
*  なお、card オブジェクトが null の場合は topAndBottom, middle の両変数の値は "?" で初期化する
*
* @param {*} props
*/
export default function Card(props) {
 return (
   <MuiCard /* className={classes.root} */>
     <Box /* className={classes.content} */ display="flex" flexDirection="column">
       <Box /* className={classes.top} */ alignSelf="flex-start">
         {/* topAndBottom */}
       </Box>
       <Box /* className={classes.middle} */>{/* middle */}</Box>
       <Box /* className={classes.bottom} */ alignSelf="flex-end">
         {/* topAndBottom */}
       </Box>
     </Box>
   </MuiCard>
 );
}

少し記述内容が多いですが、ここでのタスクは、要約すると「スタイル設定をした後、カードのデータを格納する定数を定義して、リターン文に設定する」というものになります。

ここでのタスク

さて、これで Border7.js からドリルダウンをして、コンポーネントツリーの末端までたどり着くことができました（木のてっぺんから降りてくるように、Border7.js から Card.js にたどり着きましたよね）。
以上を参考に、画面にカードが表示されるよう実装していきましょう！

ここでのタスクは三つです。

１．Border7.js で、PlayArea コンポーネントをセットする
２．PlayArea.js で、スタイル設定をして、Card コンポーネントをセッする
３．Card.js で、スタイル設定をして、トランプのデータを返却内容に設定する
※ PlayArea コンポーネントに state card の値をセットするためには、state deck や state card、そして関数 getCard() の実装が必要になります。これらは後に譲ることにして、ここではひとまず null または {suit: "♠", rank: "A"} のような仮のデータをセットしておきましょう。

以上です。このようなツリー状のコンポーネントを実装する際に、「親コンポーネントからするべきか、子コンポーネントからするべきか」と悩まれるかもしれません。
好みはあるかと思いますが、今回のような場合だと親から実装を始めて、props にセットした card オブジェクトがきちんと子に渡っているかを確認しながら進めたほうがやりやすいかもしれません。

次回

次回の #6 では、また Border7.js に戻ります。
state deck や state card の定義、そして関数 getCard() を実装します。
そして、PlayArea コンポーネントに仮で渡していたデータを、トランプの山札である state deck からランダムに一つ取り出した card オブジェクトに差し替えます。

お楽しみに！

訂正のお知らせ

Border7 の sandbox の Card.js で、定数名と jsDoc に誤りがありました。

定数名

誤：　const useStyles = makeStyles({...

正：　const useCardStyles = makeStyles({...

jsDoc（処理詳細）

誤：
*  - 定数 topAndBottom を宣言して props.suit と props.rank を連結した値で初期化する
*    例：　suit = "♠"、 rank = "A" → "♠A"
*  - 定数 middle を宣言して props.suit の値で初期化する

正：​
*  - 定数 topAndBottom を宣言して props.card.suit と props.card.rank を連結した値で初期化する
*    例：　suit = "♠"、 rank = "A" → "♠A"
*  - 定数 middle を宣言して props.card.suit の値で初期化する​

お詫びして訂正いたします。