React 公式チュートリアル 解説 (第1回)

React
2024.02.07

はじめに

2023年3月現在、Reactの公式ドキュメント がリニューアルされました。

それに伴い、チュートリアルも更新されるので、解説してみることにしました。

お題はリニューアル後も変わらず、「三目並べ」です。

注意点

こちらはReact公式チュートリアル を筆者なりに解釈したものです。

基本的には公式も見ながら進めることを推奨します。

（もちろん、この記事だけでも作業できるように配慮しています。）

実務で大事そうなところは詳しく取り上げたり、

逆に優先度高くないと感じた箇所はスキップしています。

やること

公式にある通りですがこんな感じです。

  • Reactの基礎である「コンポーネント」、「props」、「state」の理解
  •  ゲームを完成させることで、React 開発の基本的なテクニックを理解
  • 履歴表示機能を追加し、より深い理解に繋げる

やらないこと

HTMLやCSS、Javascriptが多少わかる方向けを想定しています。

HTML、CSS、Javascriptで簡単なサイトを作ったことがあるレベルであれば大丈夫です。

  • HTML、CSS、基本的なJavaScript
  • 高度なReactの機能

環境構築

ブラウザ上で実施する

公式にあるように「チュートリアルのセットアップ」のコードエディターで、右上隅の「Fork」をクリック。

自分のエディターで環境構築

まずはNode.jsのインストールが必要です。

インストール記事は別途書きましたので、こちらを参考に進めてください。

Nodeのバージョンは18以上を推奨します。（node -vコマンドで確認できます）

次にgitからソースをクローンしてきます。

git cloneもしくは「Download Zip」からソースを取得できます。

ソースはこちら

最初のコード

App.jsを見てみます。(git cloneした方はjsxになっています、今回は気にしないで進めてOKです。)

export default function Square() {

  return <button className="square">X</button>;

}

関数の前に「export default」をつけることで、関数を他のjsファイルから読み込むことが可能になります。

しばらくはこのApp.jsファイルしかいじりません。

では関数の中身を見ていきます。

Reactの関数

Reactの関数はコンポーネントとよく呼びます。今回の例だと「Squareコンポーネント」と呼びます。

以下のような決まりがあります。

  • 関数名は大文字で始める
  • returnでhtml（JSX）を返す
  • htmlのclass属性はclassNameになる

Squareコンポーネントはbuttonタグを返していることがわかります。これが画面上にも表示されているはずです。

ボードの構築

では、buttonを2つに増やしてみましょう。

下記のようにコピペで増やしてみます。

export default function Square() {

  return <button className="square">X</button><button className="square">X</button>;

}

するとどうでしょう、エラーになるはずです。

「returnの中では1つのタグにまとめないといけない」というReactのお作法があるためです。

今はbuttonを要素をまとめずに2つ返していることになるので、エラーになっています。

解決法はこうです。

export default function Square() {  
  return (
      <>
        <button className="square">X</button>
        <button className="square">X</button>
      </>
    );
}

button2つを囲むようにして

<></>

（フラグメント）をつけます。

ここはdivタグとかでもOKです。

とにかく要素を1つに括ることが大事です。

これで2つ表示されました！

「三目並べ」なのでマスは9つ必要です。

export default function Square() {
  return (
    <>
      <button className="square">X</button>
      <button className="square">X</button>
      <button className="square">X</button>
      <button className="square">X</button>
      <button className="square">X</button>
      <button className="square">X</button>
      <button className="square">X</button>
      <button className="square">X</button>
      <button className="square">X</button>
    </>
  );
}

これだと横に並んでしまうので、HTMLの構造を修正します。

export default function Square() {
  return (
    <>
      <div className="board-row">
        <button className="square">1</button>
        <button className="square">2</button>
        <button className="square">3</button>
      </div>
      <div className="board-row">
        <button className="square">4</button>
        <button className="square">5</button>
        <button className="square">6</button>
      </div>
      <div className="board-row">
        <button className="square">7</button>
        <button className="square">8</button>
        <button className="square">9</button>
      </div>
    </>
  );
}

これで1~9の数字が入ったボードができるはずです。

board-rowクラスで3つずつ横並びにしています。

最後に関数の名前について見直してみましょう。

この関数（コンポーネント）ではもうSquareを表しているのではなくなっています。

Square9つ集まった「ボード」を表しています。

ここでは「ボートコンポーネント」とするのが正しいでしょう。

export default function Board() { // SquareからBoardに修正
  return (
    <>
      <div className="board-row">
        <button className="square">1</button>
        <button className="square">2</button>
        <button className="square">3</button>
      </div>
      <div className="board-row">
        <button className="square">4</button>
        <button className="square">5</button>
        <button className="square">6</button>
      </div>
      <div className="board-row">
        <button className="square">7</button>
        <button className="square">8</button>
        <button className="square">9</button>
      </div>
    </>
  );
}

名前を修正して、今回は以上にします。

ここまではhtml、cssがある程度わかっていればできるかと思います。

次回から、このゲームボードが動くようにしていきます。

PR