React公式チュートリアル '三目並べ' 攻略その1

この記事の目的

公式チュートリアルにある三目並べからより多くのエッセンスを吸収するために、以下のポイントを見ていきます。
これらのポイントを考えることによって、チュートリアル終了後の5つの挑戦課題を自分で考えて取り組むことができるようになるのが最終的な狙いです。
記事はその1~3までのシリーズとなっており、この記事はその1となります。
また、まずは自身でチュートリアルを1周した後にシリーズを読むことをお勧めします。

1. 使われているJS要素の洗い出し（その１）
2. 使われているReact要素の洗い出し（その２）
3. チュートリアルを要素分解し曖昧な部分をなくす（その３）

1. 使われているJS要素の洗い出し

公式チュートリアルで使用されている主なJSの記法は10個ほどです。
この10個について理解ができればOKです。一つずつ見ていきます。

---

1, 変数の宣言（const, let）

• const:
  ・再代入できない変数を宣言します。
  ・配列やオブジェクトは内容の変更が可能。

• let:
  ・再代入可能な変数を宣言します。
  ・ブロックスコープ（{}内のみ有効）を持つ。

〈具体例〉

const squares = [null, null, null];
let currentMove = 0;

currentMove += 1; // `currentMove`の値を更新

〈結果〉

• const squares:
  ・不変の配列。
  ・squaresそのものの再代入は不可だが、要素の変更は可能。
• let currentMove:
  ・状態が変化する値として利用。

---

2. 配列操作（slice, map, スプレッド構文）

• slice():
  配列の一部を取り出して新しい配列を作成。
• map():
  各要素に処理を施し、新しい配列を生成。
  Reactではリストを描画する際によく使う。
• スプレッド構文(...):
  配列を展開して新しい配列を作成。

〈具体例〉

const squares = [null, "X", "O"];
const newSquares = squares.slice(); // コピー作成
newSquares[0] = "X";

const moves = squares.map((value, index) =>
  value ? `Square ${index + 1}: ${value}` : `Square ${index + 1} is empty`
);

const extendedSquares = [...newSquares, "O"];

〈結果〉

• newSquares:
  [null, "X", "O"] → "X"に変更後、["X", "X", "O"]
  (解説)
  squaresをnewSquaresにコピーし、newSquares配列の0番目の要素をXとした(squares配列の要素は変化していない)
  　

• moves:
  ["Square 1 is empty", "Square 2: X", "Square 3: O"]
  (解説)
  mapメソッドに引数valueとindexを持たせている。Squares配列の各要素がtruthyなら:の左側の記述を、falthyなら:の右側の記述に基づいて新しい配列を生成する。
  元の配列のコピーをしているのではなく、全く新しい配列を生成。
  　

• extendedSquares:
  ["X", "X", "O", "O"]
  (解説)
  newSquares配列の最後の要素としてOを追加。
  既存の配列の値に追加した新しい配列を生成している。

---

3. 配列の長さとインデックス

• length: 配列の要素数を取得。
• インデックス:
  配列の各要素の位置を示す連番(0, 1, 2, 3…)。配列の要素のアクセスに必要

〈具体例〉

const squares = [null, "X", "O"];
const lastElement = squares[squares.length - 1];

〈結果〉

• squares.length:3(配列の要素数を取得)
• lastElement:'0'(配列の長さ3から-1した要素にアクセス)

---

4. 配列やオブジェクトの分割代入

• 配列やオブジェクトから特定の要素を抽出して、変数に代入する操作

〈具体例〉

const squares = ["X", "O", null];
const [first, second, third] = squares;

console.log(first);
console.log(second);

const obj = { a: 1, b: 2 };
const { a, b } = obj;

console.log(a);
console.log(b);

〈結果〉

• first: "X"、second: "O"
  (解説)
  squares配列から値を取り出し、それぞれを変数first second thirdに代入している。
  その結果firstはX、secondはO、thirdは'null'を保持している。
• a: 1、b: 2
  (解説)
  オブジェクトobjのaプロパティとbプロパティがそれぞれ同名の変数に格納されている。

---

5. 条件分岐（if, 三項演算子）

• if: 条件が真の場合にブロックを実行
• 三項演算子: 条件式の簡略形

〈具体例〉

const winner = "X";
if (winner) {
  console.log("We have a winner!");
} else {
  console.log("Game continues.");
}

const status = winner ? `Winner: ${winner}` : "Next player's turn";

〈結果〉

• if: "We have a winner!"を出力
  (解説)
  winnerがtruthyなので真判定となり、if文の最初のブロックが出力される
• 三項演算子: "Winner: X"
  (解説)
  winnerがtruthyなので真判定となり、コロンより左側が出力される

---

6. 関数

• 通常の関数宣言: 関数の名前を付けて定義
• アロー関数: 簡潔な構文で関数を定義

〈具体例〉

const squares = ["X", "X", "X"];

function calculateWinner(squares) {
  return squares[0] === squares[1] && squares[1] === squares[2] ? squares[0] : null;
}
console.log(winner); // "X"（勝者は"X"）

const checkEmpty = (squares, index) => squares[index] === null;
console.log(checkEmpty(squares, 1)); // true

〈結果〉

• calculateWinner: 勝利条件を満たした場合に勝者（"X"や"O"）を返す
  (解説)
  squares配列の各要素について、0番目=1番目かつ1番目=2番目なら0番目の要素を出力する。もしその式が成立しなければnullが返される
• checkEmpty: 指定マスが空ならtrue
  (解説)
  checkEmptyは二つの引数を受け取る。
  squaresは現在の状態を表す配列、indexは判定対象の要素のインデックス。

---

7. 関数の引数としてコールバックを渡す

• 別の関数に引数として渡され、必要なときにその関数内で実行される関数

〈コールバック関数を使う必要性〉
1,柔軟性の向上
・呼び出し元が処理内容を指定できるため、関数の汎用性が高まる
2,非同期処理の制御
・時間がかかる処理（例: APIコール）の結果をコールバックで受け取る
3,イベント駆動型プログラム
ボタンのクリックや入力の変更など、ユーザー操作に応じた処理を実行

〈具体例〉

  const moves = history.map((squares, move) => {
    let description;
    if (move > 0) {
      description = "Go to move #" + move;
    } else {
      description = "Go to game start";
    }
    return (
      <li key={move}>
        <button onClick={() => jumpTo(move)}>{description}</button>
      </li>
    );
  });

〈結果〉

• コールバック関数になっている部分
  ①history.map((squares, move) => {...})
  ②<button onClick={() => jumpTo(move)}>

〈解説〉
①history.map((squares, move) => {...})

mapメソッドに渡されたコールバック関数
history配列の各要素に対して実行され、squares（現在の状態）とmove（インデックス）を引数として受け取ります。
ここでは渡されたコールバック関数のロジックに基づいて、新しい配列が生成されます。

[引数に渡す部分]
history.mapメソッドの呼び出し時に、コールバック関数(squares, move) => {...}を引数として渡しています。

②<button onClick={() => jumpTo(move)}>

onClickイベントに渡されたコールバック関数
ボタンがクリックされたときにこの関数が呼び出され、jumpTo(move)が実行されます。

[引数に渡す部分]
ボタンのonClickプロパティに、このコールバック関数を渡しています。

---

8.比較演算子（===, !==）

• ===: 厳密等価演算子（同じ値かつ同じ型ならtrue）
• !==: 厳密不等価演算子（厳密等価の逆。値または型が異なる場合にtrue）

(具体例)

const x = 10;
console.log(x === 10); // true 
console.log(x !== "10"); // true

---

9.ループ（for）

• 繰り返し処理

〈具体例〉

for (let i = 0; i < 3; i++) {
  console.log(`Iteration ${i}`);
}

〈結果〉

• "Iteration 0", "Iteration 1", "Iteration 2"を順番に出力
  〈解説〉
  変数iが3より大きくなるまで変数iに1を足し続ける。

---

10.テンプレートリテラル

• バックティック（`）で囲み、文字列に式を埋め込む

〈具体例〉

const player = "X";
const status = `Next player: ${player}`;

〈結果〉
変数statusには文字列"Next player: X"が代入されている。

---

以上で三目並べのシリーズ記事その１は終わりです！
このjsの要素10項目を理解していれば、記事その２に入ってもより理解を深めていくことができるでしょう。
まだピンと来なかった項目は、ネットの他の記事やAIを活用してあらゆる記述の具体例を見ることをお勧めします。
色々な具体例を見ることでよりピンとくる発見ができ、それをベースに他の具体例でも理解がしやすくなっていきます。

準備ができましたら、記事その２にお進みください！