この記事の目的
公式チュートリアルにある三目並べからより多くのエッセンスを吸収するために、以下のポイントを見ていきます。
これらのポイントを考えることによって、チュートリアル終了後の5つの挑戦課題を自分で考えて取り組むことができるようになるのが最終的な狙いです。
記事はその1~3までのシリーズとなっており、この記事はその2となります。
また、まずは自身でチュートリアルを1周した後にシリーズを読むことをお勧めします。
1. 使われているJS要素の洗い出し（その１）
2. 使われているReact要素の洗い出し（その２）
3. チュートリアルを要素分解し曖昧な部分をなくす（その３）
まだ記事1を読んでいない場合は、まずは記事1をご覧ください。
2. 使われているReact要素の洗い出し
公式チュートリアルで使用されている主なReactの記法は6個ほどです。
この6個について理解ができればOKです。一つずつ見ていきます。
1.useState
-
useStateは、Reactコンポーネントで状態（state）を管理するためのフック（Hook） - 状態の現在の値と、それを更新するための関数を返します
〈具体例〉
const [count, setCount] = useState(0);
// 状態を更新
setCount(count + 1);
〈結果〉
- 初期状態として
countが0 -
setCount(count + 1)を呼び出すと、countが1になります - コンポーネントが再レンダリングされ、新しい値が表示されます
〈解説〉
-
useState(初期値):
初期値を設定。 - 状態の更新と再レンダリング:
setCountを呼び出すと状態が更新され、関連するUIが再レンダリングされます。
2.JSX記法
-
JSX（JavaScript XML）は、ReactコンポーネントでUIを記述するための構文 - JavaScriptコードの中でHTMLのような構文を使うことができます
〈具体例〉
return (
<div>
<h1>Hello, world!</h1>
<p>This is a React component.</p>
</div>
);
〈結果〉
- js内で書いた記述がHTMLに変換され、ブラウザではHTMLの文法に則って表示される
〈解説〉
- JSXはJavaScriptではない:
JSXはJavaScriptの中でHTMLライクな記述が可能な構文です - JSXの動作:
Babel（トランスパイラ）によってJavaScriptに変換されます。
<h1>Hello</h1>
上記HTMLは以下のようなjsに変換されます。
React.createElement("h1", null, "Hello");
3.コンポーネント（関数型コンポーネント）
- ReactではUIを構築する単位を「コンポーネント」と呼びます
- コンポーネントは関数やクラスで定義できます（ここでは関数型コンポーネントを使用）
〈具体例〉
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
<Welcome name="Alice" />
console.log(welcome);
〈結果〉
Hello, Alice
〈解説〉
-
Welcomeというコンポーネントを作成 - 引数として
propsを受け取る:
コンポーネントは親からデータを受け取り、それをUIに表示します。
ここでの親に該当する部分は<Welcome name="Alice" />の部分、ここから子であるコンポーネントにnameプロパティを渡す。 - 再利用可能なUIパーツ:
コンポーネントを組み合わせることで、複雑なUIをシンプルに構築できます
4.Props
-
propsは、親コンポーネントから子コンポーネントにデータを渡す仕組みです
〈具体例〉
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
// 使用
<Greeting name="Alice" />
〈結果〉
Hello, Alice!
〈解説〉
- 引数のオブジェクト形式:
{ name }は分割代入を使った書き方。props.nameと書いても同じ動作。 - プロパティでUIを動的に変更:
親コンポーネントから渡されるデータに応じて、UIを動的に生成します。
5.イベントハンドリング
- Reactでは、イベントハンドラーをJSX内で設定できます
イベントハンドラーとは、ユーザーの操作やデータの変更などのイベントが発生したときに、そのイベントに対する処理を行う関数のこと。 -
onClickなどのイベント属性にコールバック関数を渡します
〈具体例〉
function ClickableButton() {
function handleClick() {
alert("Button clicked!");
}
return <button onClick={handleClick}>Click me</button>;
}
〈結果〉
- ボタンをクリックするとアラートで
"Button clicked!"が表示されます
〈解説〉
-
onClickがイベントハンドラ
Reactには決まったイベントハンドラが公式で設定されており、on~という名前になっています。 - ボタンをクリックすることで
handleClick関数(コールバック関数に該当する)が発火します - イベントハンドラに対してアロー関数で処理を直接渡すこともできます
function ClickableButton() {
<button onClick={() => alert("Hello")}>Click</button>
}
6.key属性（map）
- リスト要素を描画するとき、Reactに各要素を一意に識別させるための属性
〈具体例〉
const numbers = [1, 2, 3];
function NumberList() {
const listItems = numbers.map((number) => (
<li key={number}>{number}</li>
));
return <ul>{listItems}</ul>;
}
〈結果〉
HTMLには以下のように変換されます
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
〈解説〉
-
numbers.map((number) =>…)の部分でnumberにnumbersの各要素が順番に渡されます -
keyの必要性
・map() 内で直接 JSX 要素を使用する場合、必ず key が必要です
・配列のどの要素がどのコンポーネントに対応するのかを React が判断し、後で正しく更新するために必要
・特に配列の要素が移動（ソートなどによって）した場合、挿入された場合、あるいは削除された場合
なぜ React は key を必要とするのか
デスクトップ上のファイルに名前がない場合を想像してください。代わりに、最初のファイル、2 番目のファイルといったように、順番によってそれらを区別する必要があるとしましょう。そのうち番号に慣れるかもしれませんが、ファイルを削除した途端に混乱してしまいますね。2 番目のファイルが 1 番目のファイルになり、3 番目のファイルが 2 番目のファイルになり、という具合です。
フォルダ内のファイル名と JSX の key の目的は似ています。兄弟間で項目を一意に識別できるようにするのです。適切に選択された key は、配列内の位置よりも多くの情報を提供します。並べ替えによって位置が変更されたとしても、key のおかげで React はその項目が存在する限り、それを一意に識別できるのです。
引用：公式ドキュメント
以上で三目並べのシリーズ記事その2は終わりです！
このReactの要素6項目を理解していれば、記事その3に入ってもより理解を深めていくことができるでしょう。
まだピンと来なかった項目は、ネットの他の記事やAIを活用してあらゆる記述の具体例を見ることをお勧めします。
色々な具体例を見ることでよりピンとくる発見ができ、それをベースに他の具体例でも理解がしやすくなっていきます。
準備ができましたら、記事その3にお進みください！