#9 【出題編】数字予想ボタンを表示する

プログラミング・プラモデル Vol.2 「Border7」

プログラミング・プラモデル Vol.2「Border 7」｜はこだてたろう｜note

初めての方は、#3 からどうぞ。

訂正

Border7 の sandbox の関数 getButtons() の jsDoc に誤りがありました。

誤：
  * 処理詳細
  *  省略
  *
  *  - state answered が false の場合
  *     - Border7 ボタンコンポーネント HighAndLowButtons を返却する
  
正：
  * 処理詳細
  *  省略
  *
  *  - state answered が false の場合
  *     - Border7 ボタンコンポーネント Border7Buttons を返却する

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

ここでのタスク

・画面に数字選択ボタン（カードの数字が 7 より大きいか小さいか、または等しいかを選択するボタン）を表示する

関連ファイル

・src/Border7.js
・src/components/Border7Buttons.js

Border7.js

Border7.js を開き、関数 getButtons() を見つけてください。
jsDoc を以下に記載します。

  /**
  * ボタンコンポーネント取得関数
  *
  * 処理概要
  * state answered の値に従って、ボタンコンポーネントを返却する
  *
  * 処理詳細
  *  - state answered が true の場合
  *     - ゲーム進行ボタンコンポーネント GameProgressButton を返却する
  *       ※ props には以下の関数、値を設定する
  *        - onClickNext: next()
  *        - isTheLastGame: deck.length が 0 かどうか
  *
  *  - state answered が false の場合
  *     - Border7 ボタンコンポーネント Border7Buttons を返却する
  *       ※ props には以下の関数を設定する
  *        - onClickOver: chechOver()
  *        - onClick7: check7()
  *        - onClickUnder: checkUnder()
  *
  * 参考
  *   省略
  *
  * @return {component} <GameProgressButton /> or <Border7Buttons />
  */

処理詳細には、state answered の値に従って表示分けをすると書かれています。

もう一つの GameProgressButton とは、トランプの数字を予想した後、次の予想に進むためのボタンです。このボタンを表示するためには、Border7Buttons をクリックしたときに実行される数字チェック関数の実装が必要です。
なので、まずは表示分けの設定はせず、Border7Buttons を画面に表示するまで実装してください。

Try!

・Border7Buttons.js をインポートして、関数 getButtons() で Border7Buttons コンポーネントを返却する
・jsDoc を参考にして、Border7Buttons コンポーネントの props に関数をセットする
・return文で関数 getButtons() のコメントアウトを解除する

Border7Buttons.js

Border7Buttons.js を開いてください。
jsDoc を以下に記載します。

/**
* Border7 ボタンコンポーネント
*
* 処理概要
*  - Over ボタン、７ ボタン、Under ボタンを作成する
*
* 処理詳細
*  - Over ボタンの onClick プロパティに props.onClickOver を設定する
*  - 7 ボタンの onClick プロパティに props.onClick7 を設定する
*  - Under ボタンの onClick プロパティに props.onClickUnder を設定する
*
* ボタンの名称を設定する
* Over ボタン → "OVER"
* 7 ボタン → "7"
* Under ボタン → "UNDER"
*
* CHALLENGE TASK!!
*   省略
*
* @param {*} props
*/

Try!

・処理詳細を参考にして、props から関数を受け取り、各ボタンに設定する
・各ボタンの名称を設定する

CHALLENGE TASK について

jsDoc に「CHALLENGE TASK!!」というものがあります。
これは Border7 ゲームをPCで遊ぶ際に、キーボードで操作できるようにするためのものです。
これが無くても問題はありませんので、余力があればチャレンジしてみてください。

次回

画面に数字選択ボタンは表示されましたか？
次回は、数字選択ボタンをクリックした際に実行される関数の実装を行います。

感想を教えてください

最後までご覧くださり、ありがとうございます！
プログラミングを記載するという性質上、どうしても文字数が増えてしまいましたが、本文のみをカウントすると、今回はちょうど1000文字程度になりました。
「読みやすくなった」「いや、まだまだ長いよ」など、ご意見をお寄せ頂ければ幸いです。

3/21 追記

次回 #10 は予定変更して、今回 #9 の解答編とさせていただきます。
#11 からは進め方を見直して、よりサクッと学んでいけるようになりますのでお楽しみに！