- 運営しているクリエイター
2021年3月の記事一覧
【最終回】React.js でプログラミング・プラモデル Vol.2 「Border7」：あとがき
これまでこれまで16回に渡る連載で、React.js でトランプのカードゲーム「Border7」を作りました。
現時点のコードこの連載で作成したコードは以下です。
もし「私も作ってみたい！」と思ったら、#3からぜひチャレンジしてみてください！
あとがきプログラミング・プラモデル、いかがだったでしょうか？
お楽しみ頂けましたら幸いです。
2020年の暮れ、私は「React やってみよう！」と
#16 React.js でプログラミング・プラモデル Vol.2 「Border7」：CHALLENGE TASK!!を実装する
これまで前回は、バグの解消をしてゲームを完成させました。
現時点のコード前回までの工程で出来上がるコードは以下です。
はじめましての方はこの sandbox 上でコーディングしてみてください。
今回のタスク・src/components/Border7Buttons.js の CHALLENGE TASK!! を実装する
・src/components/GameProgressButton.j
#15 React.js でプログラミング・プラモデル Vol.2 「Border7」：ゲームを仕上げよう！
これまで前回は、ゲーム進行ボタンを実装しました。
現時点のコード前回までの工程で出来上がるコードは以下です。
はじめましての方はこの sandbox 上でコーディングしてみてください。
今回のタスク・ゲームが終わっているのに FINISH ボタンが表示され続けるバグの解消
・総点検
では、早速始めましょう！
ゲームが終わっているのに FINISH ボタンが表示され続けるバグ現在のコードの状
#14 React.js でプログラミング・プラモデル Vol.2 「Border7」：ゲーム進行ボタンを実装する
これまで前回は、Message コンポーネントの実装をして、画面にメッセージが出力されるようにしました。
現時点のコード前回までの工程で出来上がるコードは以下です。
はじめましての方はこの sandbox 上でコーディングしてみてください。
今回のタスク・src/components/GameProgressButton.js の処理を実装する
・src/Border7.js の関数 next
#13 React.js でプログラミング・プラモデル Vol.2 「Border7」：数値の判定結果を出力する②
これまで前回は、画面にメッセージを表示するための事前準備として、Message コンポーネントの実装をしました。
現時点のコード前回までの工程で出来上がるコードは以下です。
はじめましての方はこの sandbox 上でコーディングしてみてください。
今回のタスク・Message コンポーネントをインポートする
・関数 getMessage() の処理を実装する
・関数 getMessage()
#12 React.js でプログラミング・プラモデル Vol.2 「Border7」：数値の判定結果を出力する①
これまで前回は、数字選択ボタン（トランプの数が 7 より大きいか、小さいか、または等しいかを選択するボタン）をクリックしたときの処理を実装しました。
現時点のコード前回までの工程で出来上がるコードは以下です。
はじめましての方はこの sandbox 上でコーディングしてみてください。
今回のタスク今回は、画面上にメッセージを出力するための事前準備として以下のタスクを実施してください。
・カー
#11 React.js でプログラミング・プラモデル Vol.2 「Border7」：数字選択ボタンの処理の実装
これまで前回は、数字選択ボタン（トランプのカードが 7 より大きいか、小さいか、または等しいかを選択するボタン）を画面に表示するまで進めました。
今回から新しい進め方でいきます詳しくはこちらをご覧ください。
現時点のコードこれまでの工程を実装したコードを提示します。
この sandbox 上で「今回のタスク」を実装してください。
※ この連載で、すでに sandbox をフォークして、ご自身
#11の前に【お知らせ】 React.js でプログラミング・プラモデル Vol.2 「Border7」
これから記事ごとにプログラミングが完結するように進めていきます具体的には、以下の手順で進めます。
１．これまでのコードが実装してある sandbox を提示
２．「今回のタスク」を提示
３．「今回のタスク」を実装した sandbox を提示
「これまでのコード」とは、前回までの工程で出来上がっているコードを指します。
今回の場合でいうと、#10までの工程で出来上がっているコードのことですね。
#10 【解答編】数字予想ボタンを表示する
この記事は #9 の解答編です。この記事で紹介するコードは、あくまで一例です。
ご自身で作成されて、すでに問題なく動いているようであれば何も問題ありません。
src/Border7.js
Border7Buttons.js をインポートします。
import Border7Buttons from "./components/Border7Buttons";
関数 getButtons()
#9 【出題編】数字予想ボタンを表示する
プログラミング・プラモデル Vol.2 「Border7」初めての方は、#3 からどうぞ。
訂正Border7 の sandbox の関数 getButtons() の jsDoc に誤りがありました。
誤： * 処理詳細 * 省略 * * - state answered が false の場合 * - Border7 ボタンコンポーネント HighAndLowButt
#8 【解答編】山札からランダムに一枚引く
プログラミング・プラモデル Vol.2 「Border7」 この記事は、#6 の解答例です。
この記事で紹介するコードは、あくまで一例です。
ご自身で作成されて、すでに問題なく動いているようであれば何も問題ありません。
src/Border7.jsfunction getDeck() { const suits = ["♠", "♣", "❤", "♦"]; const ranks = ["A"
#7 【解答編】画面にトランプのカードを表示する
プログラミング・プラモデル Vol.2 「Border7」この記事は、#5の記事の解答例です
この記事で紹介するコードは、あくまで一例です。
ご自身で作成されて、すでに問題なく動いているようであれば何も問題ありません。
src/Border7.jsBorder7.js はファイルが大きいので、修正部分のみ掲載します。
import React, { useState } from "react
#6 React.js でプログラミング・プラモデル Vol.2 「Border7」：【出題編】山札からランダムに一枚引く
これまで前回までで、画面にトランプカードを表示するところまで進めました。
初めての方は、#3からご覧ください。
さて、PlayArea コンポーネントと Card コンポーネントをセットするときに、 props.card には仮の値をセットしていたと思います。
今回は、山札となる state deck を定義し、その中からランダムに一枚引いた値を state card にセット。そして、それを
#5 React.js でプログラミング・プラモデル Vol.2 「Border7」：【出題編】画面にトランプのカードを表示する
これまで前回までで、トランプカード表示のために必要になるカードのデータを作成しました。今回は、そのデータを使用して、画面にトランプのカードを表示します。
初めての方は #3 からご覧ください。
はじめての出題編これまでは、プログラミング・プラモデルの導入ということで、出題と解答例を同時に提示してきましたが、今回からは出題編と解答編で別々に進めていきたいと思います。
関連ファイル画面にトランプの