Introduction
このドキュメントは https://ja.react.dev/ のTutorial: Tic-Tac-Toe に補足を入れたものです。
https://ja.react.dev/learn/tutorial-tic-tac-toe
細かい部分は原文を参照してほしいです。
About
株式会社要のReact のチュートリアルとして作成しました。
環境に関して
必要な環境はブラウザのみです。
連携するサービスで Codesandbox を利用しています。
特にアカウントを作らなくてもチュートリアルを進めることができます。
アカウントを作る場合、fork等ができるため見直しや別の環境でも利用ができます。
CodeSandboxは非常に便利なためアカウント作成をおすすめします。
このドキュメントの読み方
左のNavにあるCodeSandboxリンクというのはCodeSandboxの途中経過を保存したリンクです。 途中でわけわからなくなったらリンクから再開してください。
チュートリアル: 三目並べ
これから小さな三目並べゲームを作成します。 このチュートリアルは、既存の React 知識を前提としていません。 チュートリアルで学ぶテクニックは React アプリを構築するための基礎であり、 それを完全に理解することで React を深く理解することができます。
チュートリアルはいくつかのセクションに分かれています。
- Setup for the tutorialは、チュートリアルを進めるための開始点となります。
- 「Overview」では、 React の基礎であるコンポーネント、プロパティ、状態について説明します。
- Completing the gameと、 React 開発における最も一般的なテクニックを学ぶことができます。
- Adding time travelと、 React の独自の強みをより深く理解できるようになります。
What are you building?
このチュートリアルでは、React を使用してインタラクティブな三目並べゲームを構築します。
完成品
コードがまだ理解できない、もしくはコードの構文に慣れていない場合でも心配する必要はありません。
このチュートリアルの目的は、React とその構文を理解できるようにすることです。
チュートリアルを続ける前に、上記の三目並べゲームをチェックすることをお勧めします。
あなたが気づく機能の 1 つは、ゲームのボードの右側に番号付きのリストがあることです。
このリストにはゲーム内で発生したすべての動きの履歴が表示され、ゲームの進行に応じて更新されます。
このチュートリアルでは、より単純なテンプレートから始めます。
次のステップでは、ゲームの構築を開始できるように設定します。