概要

React.jsの新しいチュートリアルとして、ベータ版ではあるが公開された。（現在は英語のみ対応)
その中で、最初のチュートリアルとして紹介されていた五目並べを行った。

著者について

業務で、React.jsを使う経験がある。全てのドキュメントを網羅しているわけではないが、一通り基本的なHooksなどの使い方は知っている

本編

前提

このチュートリアルでは、小さな三目並べゲームを作成します。このチュートリアルは、既存のReactの知識を前提としたものではありません。このチュートリアルで学ぶテクニックは、あらゆるReactアプリを構築するための基本であり、これを完全に理解することでReactを深く理解することができます。(deepl訳)

準備

チュートリアルとして2つのやり方が提供されていた

sandbox上でそのまま開発する
sandboxのものをforkしてlocalで開発する

自分はeditorによる補完が効くのでlocalで開発することにした。

https://codesandbox.io/s/wjwuw8?file=/App.js

上記をFileからzipファイルをダウンロード、解凍したあとEditorで開く。

準備されたコードの説明

Reactにおけるcomponentについて

Reactでは、コンポーネントはユーザーインターフェースの一部を表す再利用可能なコードの一部です。コンポーネントは、アプリケーションのUI要素のレンダリング、管理、および更新に使用されます。(deepl訳)

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

export default と export の違い

export defaultはこのファイルのデフォルトの関数を示しています。(javascriptの説明になるので深くは触れません。以下を参考にしてください。）

JSX要素について

is a JSX要素です。 JSX要素とは、JavaScriptのコードとHTMLタグの組み合わせで、表示したい内容を記述したものです。className="square "は、ボタンのプロパティまたはプロップとして、CSSにボタンのスタイルを指示します。Xはボタンの内側に表示されるテキストで、はJSX要素を閉じて、次のコンテンツがボタンの内側に配置されないようにすることを示します。（deepl訳)

JSX要素はHTMLタグのように見えますが、onClick や classNameやvalueといったPropsを持ったものです。そういった意味では、デフォルトで用意されているcomponentだと思っても差し支えないかと思います。

その他

その他 index.css や index.js 等に書かれている内容が説明されていました。ここではあまり重要ではないと思ったので省略します

Boardの構築

五目並べには9枚のタイルが必要です。9枚のタイルを愚直に表示するところから始めます。

Componentには単一のJSX要素を返す

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

少し読みづらいですが、2枚のタイルを愚直に書いてみました。

しかし、この状態ではErrorになってしまいます

/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

Componentには単一のJSX要素を返す必要があります。上記だと、複数 (buttonとbuttonのJSX要素)のJSX要素を返しているためErrorになってしまいます。

これを解消するにはフラグメントを使用する方法があります <> </>

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

フラグメントを使用することで単一のJSX要素を返すことに成功しました。

cssを当てる

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>
    </>
  );
}

component名をRename Square -> Board

export default function 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>
    </>
  );
}

`<button className="square">1</button>`　をcomponent化

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


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

propsの説明などは、省略しました。

{ value } 分割代入してPropsを受け取っていますが、propsとして受け取り、 const value = props.value などとしてもOKです。

インタラクティブなコンポーネントの作成

function Square({ value }) {
  function handleClick() {
    console.log('clicked!');
  }

  return (
    <button
      className="square"
      onClick={handleClick}
    >
      {value}
    </button>
  );
}

onClickは buttonの JSX要素に用意されているものです。ボタンを押した時に行うアクションを記述できます。

状態を持ったコンポーネントの作成

動的に値を変更するには useStateを使います。下記ではクリックした時に valueを nullから Xに変えることで、表示を変更しています。

function Square() {
  const [value, setValue] = useState(null);

  function handleClick() {
    setValue('X');
  }

  return (
    <button
      className="square"
      onClick={handleClick}
    >
      {value}
    </button>
  );
}

Beta版 React Tutorial 五目並べ 2に続く...

Beta版 React Tutorial 五目並べ 1

概要