アウトプットするブログ

今回からReactを利用して子供向けの足し算ゲームを作っていこうと思います。
DEMO
10秒以内に黒い星の数と同じ数だけ右の数字から選んでいく物となります。

0627

今回のコード(機能追加前)

// STAR MATCH - Starting Template
const StarMatch = () => {
  return (
    <div className="game">
      <div className="body">
        <div className="left">
          <div className="star" />
          <div className="star" />
          <div className="star" />
          <div className="star" />
          <div className="star" />
          <div className="star" />
          <div className="star" />
          <div className="star" />
          <div className="star" />
        </div>
        <div className="right">
          <button className="number">1</button>
          <button className="number">2</button>
          <button className="number">3</button>
          <button className="number">4</button>
          <button className="number">5</button>
          <button className="number">6</button>
          <button className="number">7</button>
          <button className="number">8</button>
          <button className="number">9</button>
        </div>
      </div>
    </div>
  );
};


// Math science
const utils = {
  // create an array of numbers between min and max (edges included)
  range: (min, max) => Array.from({ length: max - min + 1 }, (_, i) => min + i),

  // pick a random number between min and max (edges included)
  random: (min, max) => min + Math.floor(Math.random() * (max - min + 1)),
};

render(<StarMatch />, mountNode);

上記が今回手を入れていくコードになります。
今日はutilsの中にある変数を使用してhtmlタグの表示を動的にしてページをリロードする毎に星の数を変更したいと思います。

utilsの中身を見てみよう

Utilsの中にはrangeとrandomというプロパティが配置されていることがわかります。
後に増えていくことになるのですが、暫定的に紹介したいと思います。

range

  range: (min, max) => Array.from({ length: max - min + 1 }, (_, i) => min + i),

これはrangeの仮引数内で宣言された二つの数字の間を配列に出力してくれるものになります。

hoge(2, 6);
function hoge(min, max) {
   const range = Array.from({ length: max - min + 1 }, (_, i) => min + i);
   console.log(range);   //  (5) [2, 3, 4, 5, 6]
 }

書き直した場合こうなります。

random

 random: (min, max) => min + Math.floor(Math.random() * (max - min + 1)),

続いてrandomについてですが、rangeと同じように仮引数の中に最小,最大の数値を入れて乱数を生成する仕組みになっています。

    hoge(1, 3);
    function hoge(min, max) {
      const random = min + Math.floor(Math.random() * (max - min + 1));
      const fuga = Math.random();
      console.log(random); // 1~3のどれか
    }

書き直した場合こうなります。

JSX側の実装

const StarMatch = () => {
  const stars = utils.random(1, 9);
  return (
    <div className="game">
      <div className="body">
        <div className="left">
          {utils.range(1, stars).map((starId) => (
            <div key={starId} className="star" />
          ))}
        </div>
        <div className="right">
          {utils.range(1, 9).map((number) => (
            <button key={number} className="number">
              {number}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

前提としてhtmlタグで実装している箇所はreactで読み込めるようにするため、JSXで書かれています。
それではutilsを利用して追加した機能を説明していきましょう。

星の出力

<div className="left">
   {utils.range(1, satrs).map((starId) => (
      <div key={starId} className="star" />
   ))}
</div>

最初に用意していた静的なリストでは星の数が9つに固定されてしまっていました。なので削除してrange関数を利用して動的にしたものとなっています。
Utils.rangeの仮引数の中に星を表示する最小と最大の数を書き加えていくのですが、最大の数をレンダリングする毎に可変したいのでStarMatchの関数内に

const satrs = utils.random(1, 9);

を追加しています。
そして最小値,最大値を入力したrange関数をmapします。
動的に出力した子要素となるので、出力したタグの中にkeyを渡すためにstarIdを引数に入れます。これらが正常に入力された時星の数がレンダリングされる毎に可変することを確認できるかと思います。

数字入力側の出力

 <div className="right">
    {utils.range(1, 9).map((number) => (
       <button key={number} className="number">
           {number}
       </button>
    ))}
</div>

今回1~9までの数字を選択するゲームとなっているので、rangeの中にそのように記載しています。
それらをbuttonタグへmapしてとします。
そうすることで9つの数字が入力できるようになります。

まとめ

今回は以上で終わりたいと思います。
React以前にJSのメソッドの使い方を説明するような形になってしまいましたが、
次回も引き続き足し算ゲームを作成していきたいと思います。

ブログの投稿ログ

初めてのREACT-v11

今回のコード(機能追加前)

utilsの中身を見てみよう

range

random

JSX側の実装

星の出力

数字入力側の出力

まとめ

ブログの投稿ログ

初めてのREACT-v11

# 今回のコード(機能追加前)

# utilsの中身を見てみよう

# range

# random

# JSX側の実装

# 星の出力

# 数字入力側の出力

# まとめ

今回のコード(機能追加前)

utilsの中身を見てみよう

range

random

JSX側の実装

星の出力

数字入力側の出力

まとめ