From 68f26896bd48d3b8b33c24eb42c32f75b24b36ad Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 30 Apr 2023 11:47:38 +0900 Subject: [PATCH] Translate "Tutorial: Tic-tac-toe" --- src/content/learn/tutorial-tic-tac-toe.md | 476 +++++++++++----------- src/sidebarLearn.json | 2 +- 2 files changed, 239 insertions(+), 239 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 28d997b04..b1c6993a4 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -1,31 +1,31 @@ --- -title: 'Tutorial: Tic-Tac-Toe' +title: 'チュートリアル：三目並べ' --- -You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you'll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React. +このチュートリアルでは、小さな三目並べゲーム (tic-tac-toe) を作成します。このチュートリアルを読むにあたり、React に関する事前知識は一切必要ありません。このチュートリアルで学ぶ技法は React アプリを構築する際の基礎となるものであり、完全に理解することで React についての深い理解が得られます。 -This tutorial is designed for people who prefer to **learn by doing** and want to quickly try making something tangible. If you prefer learning each concept step by step, start with [Describing the UI.](/learn/describing-the-ui) +このチュートリアルは、**実践しながら学ぶ**ことを好む方や、今すぐ何か具体的に動くものを作ってみたいと考えている方向けに設計されています。一歩ずつ概念を学びたい場合は、[UI の記述](/learn/describing-the-ui)から始めてください。 -The tutorial is divided into several sections: +このチュートリアルはいくつかのセクションに分かれています。 -- [Setup for the tutorial](#setup-for-the-tutorial) will give you **a starting point** to follow the tutorial. -- [Overview](#overview) will teach you **the fundamentals** of React: components, props, and state. -- [Completing the game](#completing-the-game) will teach you **the most common techniques** in React development. -- [Adding time travel](#adding-time-travel) will give you **a deeper insight** into the unique strengths of React. +- [チュートリアルのセットアップ](#setup-for-the-tutorial)は、以下のチュートリアルを進めていく**出発点**です。 +- [概要](#overview)では、React の**基礎**であるコンポーネント、props、および state を学びます。 +- [ゲームを完成させる](#completing-the-game)では、React 開発における**最も一般的な手法**を学びます。 +- [タイムトラベルの追加](#adding-time-travel)では、React の独自の強みに関する**深い洞察**を得ることができます。 -### What are you building? {/*what-are-you-building*/} +### チュートリアルで作成するもの {/*what-are-you-building*/} -In this tutorial, you'll build an interactive tic-tac-toe game with React. +このチュートリアルでは、React を使ってインタラクティブな三目並べゲームを作成します。 -You can see what it will look like when you're finished here: +完成したときにどのような見た目になるか、以下で確認できます。 @@ -194,15 +194,15 @@ body { -If the code doesn't make sense to you yet, or if you are unfamiliar with the code's syntax, don't worry! The goal of this tutorial is to help you understand React and its syntax. +まだコードが理解できない、あるいはこのコードの構文に慣れていない場合でも、心配はいりません！ このチュートリアルの目的は、React とその構文を理解するお手伝いをすることです。 -We recommend that you check out the tic-tac-toe game above before continuing with the tutorial. One of the features that you'll notice is that there is a numbered list to the right of the game's board. This list gives you a history of all of the moves that have occurred in the game, and it is updated as the game progresses. +チュートリアルを続ける前に、まずは上記の三目並べゲームを実際に触ってみることをお勧めします。いろいろな機能がありますが、ゲームの盤面 (board) の右側にある番号付きリストに着目してください。このリストはゲーム内で発生したすべての着手 (move) の履歴を示すもので、ゲームが進むにつれて更新されていきます。 -Once you've played around with the finished tic-tac-toe game, keep scrolling. You'll start with a simpler template in this tutorial. Our next step is to set you up so that you can start building the game. +完成した三目並べゲームで遊んでみたら、ページのスクロールを続けてください。このチュートリアルではもっとシンプルなテンプレートから始めます。次のステップは、ゲームを作成を始められるように準備を行うことです。 -## Setup for the tutorial {/*setup-for-the-tutorial*/} +## チュートリアルのセットアップ {/*setup-for-the-tutorial*/} -In the live code editor below, click **Fork** in the top-right corner to open the editor in a new tab using the website CodeSandbox. CodeSandbox lets you write code in your browser and preview how your users will see the app you've created. The new tab should display an empty square and the starter code for this tutorial. +下にあるライブコードエディタで、右上の **Fork** をクリックして新しいタブを開き、CodeSandbox というウェブサイトのエディタを表示してください。CodeSandbox を使うと、ブラウザ上でコードを書き、作成したアプリがユーザにどのように表示されるかプレビューすることができます。新しいタブには、正方形のマス目 (square) と、このチュートリアルのスタータコードが表示されるはずです。 @@ -261,33 +261,33 @@ body { -You can also follow this tutorial using your local development environment. To do this, you need to: +このチュートリアルはローカル開発環境でも進めていくことができます。そのためには以下の手順が必要です。 -1. Install [Node.js](https://nodejs.org/en/) -1. In the CodeSandbox tab you opened earlier, press the top-left corner button to open the menu, and then choose **File > Export to ZIP** in that menu to download an archive of the files locally -1. Unzip the archive, then open a terminal and `cd` to the directory you unzipped -1. Install the dependencies with `npm install` -1. Run `npm start` to start a local server and follow the prompts to view the code running in a browser +1. [Node.js](https://nodejs.org/en/) をインストール +1. さきほど開いた CodeSandbox のタブで、左上隅のボタンを押してメニューを開き、そのメニューで **File > Export to ZIP** を選択して、ファイルをローカルにアーカイブとしてダウンロード +1. アーカイブを解凍し、ターミナルを開いて解凍したディレクトリに `cd` する +1. `npm install` で依存ライブラリをインストール +1. `npm start` でローカルサーバを起動し、プロンプト通りに操作し、ブラウザで実行されるコードを確認する -If you get stuck, don't let this stop you! Follow along online instead and try a local setup again later. +うまくいかない場合でもここで挫けるのは止めましょう！ オンラインで進めて、後で再度ローカル環境のセットアップにトライしてください。 -## Overview {/*overview*/} +## 概要 {/*overview*/} -Now that you're set up, let's get an overview of React! +セットアップが完了したので、React の概要を確認してみましょう！ -### Inspecting the starter code {/*inspecting-the-starter-code*/} +### スタータコードの確認 {/*inspecting-the-starter-code*/} -In CodeSandbox you'll see three main sections: +CodeSandbox 画面には、以下の 3 つの主要なセクションが表示されます。 -![CodeSandbox with starter code](../images/tutorial/react-starter-code-codesandbox.png) +![CodeSandbox のスタータコード](../images/tutorial/react-starter-code-codesandbox.png) -1. The _Files_ section with a list of files like `App.js`, `index.js`, `styles.css` and a folder called `public` -1. The _code editor_ where you'll see the source code of your selected file -1. The _browser_ section where you'll see how the code you've written will be displayed +1. `App.js`、`index.js`、`styles.css` などのファイルリストや `public` というフォルダがある _Files_ セクション +1. 選択したファイルのソースコードが表示される _コードエディタ_ +1. 書いたコードがどのように表示されるかがわかる _Browser_ セクション -The `App.js` file should be selected in the _Files_ section. The contents of that file in the _code editor_ should be: +_Files_ セクションで `App.js` ファイルが選択されているはずです。そのファイルの内容は _コードエディタ_ に以下のように表示されています。 ```jsx export default function Square() { @@ -295,15 +295,15 @@ export default function Square() { } ``` -The _browser_ section should be displaying a square with a X in it like this: +_ブラウザ_ セクションには、以下のように X の入ったマス目が表示されているはずです。 -![x-filled square](../images/tutorial/x-filled-square.png) +![X と書かれたマス目](../images/tutorial/x-filled-square.png) -Now let's have a look at the files in the starter code. +それでは、スタータコードのファイルを見ていきましょう。 #### `App.js` {/*appjs*/} -The code in `App.js` creates a _component_. In React, a component is a piece of reusable code that represents a part of a user interface. Components are used to render, manage, and update the UI elements in your application. Let's look at the component line by line to see what's going on: +`App.js` にあるコードは*コンポーネント*を作成します。React では、コンポーネントとは UI の部品を表す再利用可能なコードのことです。コンポーネントは、アプリケーションの UI 要素を表示し、管理し、更新するために使用します。コンポーネントの中身を 1 行ずつ見ていって、何が起こっているかを確認しましょう。 ```js {1} export default function Square() { @@ -311,7 +311,7 @@ export default function Square() { } ``` -The first line defines a function called `Square`. The `export` JavaScript keyword makes this function accessible outside of this file. The `default` keyword tells other files using your code that it's the main function in your file. +最初の行では、`Square` という関数を定義しています。`export` という JavaScript キーワードは、この関数をこのファイルの外部からアクセスできるようにします。`default` キーワードは、このコードを使用する他のファイルに、これがこのファイルのメイン関数であるということを伝えます。 ```js {2} export default function Square() { @@ -319,15 +319,15 @@ export default function Square() { } ``` -The second line returns a button. The `return` JavaScript keyword means whatever comes after is returned as a value to the caller of the function. `` closes the JSX element to indicate that any following content shouldn't be placed inside the button. +2 行目のコードはボタンを返しています。`return` という JavaScript キーワードは、後に書くものが関数の呼び出し元に値として返されるということを意味します。この `` は JSX 要素を閉じて、これ以降に書かれた内容がボタンの内部に出てこないようにします。 #### `styles.css` {/*stylescss*/} -Click on the file labeled `styles.css` in the _Files_ section of CodeSandbox. This file defines the styles for your React app. The first two _CSS selectors_ (`*` and `body`) define the style of large parts of your app while the `.square` selector defines the style of any component where the `className` property is set to `square`. In your code, that would match the button from your Square component in the `App.js` file. +CodeSandbox の _Files_ セクションにある `styles.css` というファイルをクリックしてください。このファイルには、React アプリのスタイルが定義されています。最初の 2 つの _CSS セレクタ_（`*` と `body`）は、アプリケーションの全体的なスタイルを定義しており、`.square` というセレクタは、`className` プロパティが `square` となっているコンポーネントのスタイルを定義します。今回のコードでは、これは `App.js` ファイルの Square コンポーネントが表示するボタンにマッチします。 #### `index.js` {/*indexjs*/} -Click on the file labeled `index.js` in the _Files_ section of CodeSandbox. You won't be editing this file during the tutorial but it is the bridge between the component you created in the `App.js` file and the web browser. +CodeSandbox の _Files_ セクションにある `index.js` というファイルをクリックしてください。このチュートリアルでこのファイルを編集することはありませんが、`App.js` ファイルで作成したコンポーネントと Web ブラウザとの橋渡しを行っています。 ```jsx import { StrictMode } from 'react'; @@ -337,20 +337,20 @@ import './styles.css'; import App from './App'; ``` -Lines 1-5 brings all the necessary pieces together: +1〜5 行目で、必要なすべての部品を取り出しています： * React -* React's library to talk to web browsers (React DOM) -* the styles for your components -* the component you created in `App.js`. +* Web ブラウザとやり取りするための React ライブラリ (React DOM) +* コンポーネント用のスタイル +* `App.js` であなたが作成したコンポーネント -The remainder of the file brings all the pieces together and injects the final product into `index.html` in the `public` folder. +ファイルの残りの部分では、これらの部品を全部まとめて、最終的な成果物を `public` フォルダ内の `index.html` に注入しています。 -### Building the board {/*building-the-board*/} +### 盤面の作成 {/*building-the-board*/} -Let's get back to `App.js`. This is where you'll spend the rest of the tutorial. +それでは `App.js` に戻りましょう。このチュートリアルの残りは、このファイル内で作業します。 -Currently the board is only a single square, but you need nine! If you just try and copy paste your square to make two squares like this: +現在の盤面 (board) にはマス目 (square) が 1 つしかありませんが、本来は 9 つ必要です！ 2 つ目のマス目を作るために単純にコピーペーストすると… ```js {2} export default function Square() { @@ -358,7 +358,7 @@ export default function Square() { } ``` -You'll get this error: +以下のようなエラーが表示されます： @@ -366,7 +366,7 @@ You'll get this error: -React components need to return a single JSX element and not multiple adjacent JSX elements like two buttons. To fix this you can use *fragments* (`<>` and ``) to wrap multiple adjacent JSX elements like this: +React コンポーネントからは、このボタンのように JSX 要素を複数隣り合わせて返すのではなく、単一の JSX 要素を返す必要があります。これを修正するには、複数の隣接する JSX 要素は、以下のように*フラグメント*（`<>` および ``）で囲むようにします。 ```js {3-6} export default function Square() { @@ -379,17 +379,17 @@ export default function Square() { } ``` -Now you should see: +これで以下のように表示されるはずです： -![two x-filled squares](../images/tutorial/two-x-filled-squares.png) +![X の入ったマス目が 2 つ](../images/tutorial/two-x-filled-squares.png) -Great! Now you just need to copy-paste a few times to add nine squares and... +素晴らしいです！ あとは、マス目が 9 個になるまで何度かコピーペーストすれば… -![nine x-filled squares in a line](../images/tutorial/nine-x-filled-squares.png) +![1 行に X の入ったマス目が 9 個](../images/tutorial/nine-x-filled-squares.png) -Oh no! The squares are all in a single line, not in a grid like you need for our board. To fix this you'll need to group your squares into rows with `div`s and add some CSS classes. While you're at it, you'll give each square a number to make sure you know where each square is displayed. +あれ？ 盤面のマス目はグリッド状に並べたいのですが、1 行に並んでしまっています。これを修正するには、`div` を使って複数のマス目を行単位でグループ化し、CSS クラスを追加する必要があります。ついでに各マス目に番号をつけて、どれがどこに表示されているのか確認できるようにしましょう。 -In the `App.js` file, update the `Square` component to look like this: +`App.js` ファイルで、`Square` コンポーネントを以下のように書き換えてください： ```js {3-19} export default function Square() { @@ -415,11 +415,11 @@ export default function Square() { } ``` -The CSS defined in `styles.css` styles the divs with the `className` of `board-row`. Now that you've grouped your components into rows with the styled `div`s you have your tic-tac-toe board: +`styles.css` で定義されている CSS が、`className` が `board-row` となっている div をスタイル化します。スタイル化された `div` でコンポーネントを 3 行にまとめたので、三目並べの盤面ができました。 -![tic-tac-toe board filled with numbers 1 through 9](../images/tutorial/number-filled-board.png) +![1 から 9 までの数字が入った三目並べの盤面](../images/tutorial/number-filled-board.png) -But you now have a problem. Your component named `Square`, really isn't a square anymore. Let's fix that by changing the name to `Board`: +しかし別の問題が出てきました。`Square` という名前のコンポーネントなのに、実際にはもう 1 個のマス目ではなくなっています。これを直すため、名前を `Board` に変えます。 ```js {1} export default function Board() { @@ -427,7 +427,7 @@ export default function Board() { } ``` -At this point your code should look something like this: +この段階で、コードは次のようになっているはずです。 @@ -504,15 +504,15 @@ body { -Psssst... That's a lot to type! It's okay to copy and paste code from this page. However, if you're up for a little challenge, we recommend only copying code that you've manually typed at least once yourself. +うーん、ちょっとタイピングが大変ですよね！ このページからコードをコピーペーストしても問題ありません。ただし、ちょっと挑戦してみたい気分であれば、自分で 1 度は手入力したものだけをコピーすることをおすすめします。 -### Passing data through props {/*passing-data-through-props*/} +### props を通してデータを渡す {/*passing-data-through-props*/} -Next, you'll want to change the value of a square from empty to "X" when the user clicks on the square. With how you've built the board so far you would need to copy-paste the code that updates the square nine times (once for each square you have)! Instead of copy-pasting, React's component architecture allows you to create a reusable component to avoid messy, duplicated code. +次に、ユーザがマス目をクリックしたら、空白だった中身が "X" に変化するようにしたいと思います。ですが先ほどのように盤面を作成していたのでは、この先マス目の中身を更新するコードを 9 回（各マス目に対して 1 回ずつ）コピーペーストしなくてはならなくなってしまいます！ そのようなコピーペーストをする代わりに、React のコンポーネントアーキテクチャを使って再利用可能なコンポーネントを作成することで、重複だらけのごちゃごちゃとしたコードを書かずに済むようになります。 -First, you are going to copy the line defining your first square (``) from your `Board` component into a new `Square` component: +まず、`Board` コンポーネントから最初のマス目を定義している行 (``) をコピーし、新たに書く `Square` コンポーネントに貼り付けます。 ```js {1-3} function Square() { @@ -524,7 +524,7 @@ export default function Board() { } ``` -Then you'll update the Board component to render that `Square` component using JSX syntax: +次に、`Board` コンポーネントを更新し、JSX 構文を使用してこの `Square` コンポーネントをレンダーするようにしましょう。 ```js {5-19} // ... @@ -551,15 +551,15 @@ export default function Board() { } ``` -Note how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter. +ブラウザの `div` とは異なり、自分で作成するコンポーネントである `Board` と `Square` は、大文字で始める必要があることに注意してください。 -Let's take a look: +どうなったか見てみましょう。 -![one-filled board](../images/tutorial/board-filled-with-ones.png) +![1 だらけの盤面](../images/tutorial/board-filled-with-ones.png) -Oh no! You lost the numbered squares you had before. Now each square says "1". To fix this, you will use *props* to pass the value each square should have from the parent component (`Board`) to its child (`Square`). +あれ？ 先ほどまでの番号付きのマス目がなくなってしまいました。すべてのマス目が "1" になってしまっています。これを修正するには、各マス目が持つべき値を親コンポーネント (`Board`) から子コンポーネント (`Square`) に伝えるために、*props* というものを使用します。 -Update the `Square` component to read the `value` prop that you'll pass from the `Board`: +`Square` コンポーネントを更新して、`Board` から渡される `value` プロパティを読み取るようにします。 ```js {1} function Square({ value }) { @@ -567,9 +567,9 @@ function Square({ value }) { } ``` -`function Square({ value })` indicates the Square component can be passed a prop called `value`. +`function Square({ value })` は、`Square` コンポーネントに props として `value` という名前の値が渡されることを示しています。 -Now you want to display that `value` instead of `1` inside every square. Try doing it like this: +次は各マス目に、受け取った `value` を表示させる必要があります。次のようにしてみましょう。 ```js {2} function Square({ value }) { @@ -577,11 +577,11 @@ function Square({ value }) { } ``` -Oops, this is not what you wanted: +おっと、これは意図したものではありません。 -![value-filled board](../images/tutorial/board-filled-with-value.png) +!["value" の文字列だらけの盤面](../images/tutorial/board-filled-with-value.png) -You wanted to render the JavaScript variable called `value` from your component, not the word "value". To "escape into JavaScript" from JSX, you need curly braces. Add curly braces around `value` in JSX like so: +コンポーネントから `value` という名前の JavaScript 変数の値を表示させたかったのであって、"value" という単語自体を表示させたかったわけではありませんね。ここでは JSX の中から「JavaScript の記法に戻る」ために、波括弧が必要です。JSX の中で `value` の周りに波括弧を追加してみましょう。 ```js {2} function Square({ value }) { @@ -589,11 +589,11 @@ function Square({ value }) { } ``` -For now, you should see an empty board: +今のところ、空白の盤面が表示されているはずです。 -![empty board](../images/tutorial/empty-board.png) +![空の盤面](../images/tutorial/empty-board.png) -This is because the `Board` component hasn't passed the `value` prop to each `Square` component it renders yet. To fix it you'll add the `value` prop to each `Square` component rendered by the `Board` component: +これは `Board` コンポーネントが、レンダーしている各 `Square` コンポーネントにまだ props として `value` を渡していないからです。これを修正するには、`Board` コンポーネントがレンダーしている `Square` コンポーネントのそれぞれに、props として `value` を追加していきます： ```js {5-7,10-12,15-17} export default function Board() { @@ -619,11 +619,11 @@ export default function Board() { } ``` -Now you should see a grid of numbers again: +これで、再び数値が入ったグリッドが表示されるようになりました： -![tic-tac-toe board filled with numbers 1 through 9](../images/tutorial/number-filled-board.png) +![1 から 9 までの数字で埋められた三目並べの盤面](../images/tutorial/number-filled-board.png) -Your updated code should look like this: +ここまでで、コードは以下のようになっているはずです： @@ -702,9 +702,9 @@ body { -### Making an interactive component {/*making-an-interactive-component*/} +### インタラクティブなコンポーネントの作成 {/*making-an-interactive-component*/} -Let's fill the `Square` component with an `X` when you click it. Declare a function called `handleClick` inside of the `Square`. Then, add `onClick` to the props of the button JSX element returned from the `Square`: +では `Square` コンポーネントをクリックすると `X` が表示されるようにしてみましょう。`Square` の中に `handleClick` という関数を宣言します。次に、`Square` から返される button JSX 要素に、props として `onClick` を追加します。 ```js {2-4,9} function Square({ value }) { @@ -723,19 +723,19 @@ function Square({ value }) { } ``` -If you click on a square now, you should see a log saying `"clicked!"` in the _Console_ tab at the bottom of the _Browser_ section in CodeSandbox. Clicking the square more than once will log `"clicked!"` again. Repeated console logs with the same message will not create more lines in the console. Instead, you will see an incrementing counter next to your first `"clicked!"` log. +ここでクリックしてみると、CodeSandbox の _Browser_ セクションの下部にある _Console_ タブに `"clicked!"` というログが表示されるはずです。複数回クリックすると、再び `"clicked!"` がログとして記録されますが、同一のメッセージが繰り返しコンソールに表示されることはありません。代わりに、最初の `"clicked!"` ログの隣にカウンタが表示され、その数字が増えていきます。 -If you are following this tutorial using your local development environment, you need to open your browser's Console. For example, if you use the Chrome browser, you can view the Console with the keyboard shortcut **Shift + Ctrl + J** (on Windows/Linux) or **Option + ⌘ + J** (on macOS). +このチュートリアルをローカルの開発環境で実施している場合は、ブラウザのコンソールを開く必要があります。例えば、Chrome ブラウザを使っている場合は、**Shift + Ctrl + J** (Windows/Linux) または **Option + ⌘ + J** (macOS) というキーボードショートカットで、コンソールを表示できます。 -As a next step, you want the Square component to "remember" that it got clicked, and fill it with an "X" mark. To "remember" things, components use *state*. +次のステップとして、`Square` コンポーネントに、クリックされたことを「記憶」して "X" マークを表示してもらうことにします。何かを「記憶」するために、コンポーネントは *state* というものを使用します。 -React provides a special function called `useState` that you can call from your component to let it "remember" things. Let's store the current value of the `Square` in state, and change it when the `Square` is clicked. +React は、`useState` という特別な関数を提供しており、コンポーネントからこれを呼び出すことで「記憶」を行わせることができます。`Square` の現在の値を state に保存し、`Square` がクリックされたときにその値を変更しましょう。 -Import `useState` at the top of the file. Remove the `value` prop from the `Square` component. Instead, add a new line at the start of the `Square` that calls `useState`. Have it return a state variable called `value`: +ファイルの先頭で `useState` をインポートします。`Square` コンポーネントから `value` プロパティを削除します。代わりに、`Square` の先頭に新しい行を追加して `useState` を呼び出します。`value` という名前の state 変数が返されるようにします。 ```js {1,3,4} import { useState } from 'react'; @@ -747,9 +747,9 @@ function Square() { //... ``` -`value` stores the value and `setValue` is a function that can be used to change the value. The `null` passed to `useState` is used as the initial value for this state variable, so `value` here starts off equal to `null`. +`value` が state の現在値を格納し、`setValue` はその値を更新するために使う関数です。`useState` に渡される `null` は、この state 変数の初期値として使用されるので、この `value` はまず `null` という値から始まります。 -Since the `Square` component no longer accepts props anymore, you'll remove the `value` prop from all nine of the Square components created by the Board component: +`Square` コンポーネントがもはや props を受け取らないようになったので、`Board` コンポーネントが作成している 9 個の `Square` コンポーネントすべてから `value` プロパティを削除しましょう。 ```js {6-8,11-13,16-18} // ... @@ -776,7 +776,7 @@ export default function Board() { } ``` -Now you'll change `Square` to display an "X" when clicked. Replace the `console.log("clicked!");` event handler with `setValue('X');`. Now your `Square` component looks like this: +次に、`Square` をクリックすると "X" が表示されるようにします。イベントハンドラの `console.log("clicked!");` を `setValue('X');` に置き換えます。これで、`Square` コンポーネントは次のようになります。 ```js {5} function Square() { @@ -797,13 +797,13 @@ function Square() { } ``` -By calling this `set` function from an `onClick` handler, you're telling React to re-render that `Square` whenever its `