こんにちは！Reiです (˵ •̀ ᴗ – ˵) ✧
Reactで入力欄を作ってみたけど、
文字が打てなかったり、入力しても画面に反映されなかったり…
こんな経験ありませんか？ 👀
こういう「入力した内容や表示が変わる値」を扱うために使うのが、State（ステート） です！
今回は、Reactで画面に表示する値をどう管理していくのか、その基本になるStateの考え方について見ていきます！
＼＼ この記事で学べること ／／
・Stateがどういう役割を持つのかが分かる
・useStateの基本的な使い方が分かる
・Stateを更新したときに何が起きているのかが理解できる
StateはReactで「動きのある画面」を作るときに欠かせない仕組み。
ここが分かってくると、フォームやカウント処理など「どうやって実装すればいいか」がわかるようになります！
Stateとは？
まずはここから！
Reactでは、画面に表示する値の中でも「あとから変わる値」をState（ステート）として扱います。
たとえば、
・入力フォームに入れた文字
・ボタンを押した回数
・表示のON / OFF
こういった「変わっていく値」がStateです。
そして、このStateをどう扱うかという考え方のことを、「状態管理」と呼びます。
状態管理って何？
Stateは「状態」という意味で、
その状態をどう扱うか？ という考え方が 状態管理 です。
ちょっと難しそうに聞こえるんですが、
やっていることはちょーシンプルです 👀
値を覚えておいて、変わったら画面にも反映する
ただ、これだけ！
ただ、これだけなんですけど、この仕組みが reactではとっても重要なんです！
なぜStateが必要なのか
たとえば、カウントの処理をこんなふうに書いたとします 👀
let num = 0;
const onClickButton = () => {
num = num + 1;
};これ、コード上はちゃんと値が増えていますよね。
でも実際には、
画面の表示はまったく変わりません 💦
「あれ、なんで…？」ってなりますよね ( ; ˘•ω•)
ここでポイントになるのが、
Reactがどうやって画面を更新しているか と言うことです。
Reactは、「値が変わったら自動で画面を書き換える」わけではないのです。
つまり、ただの変数が変わっても、Reactはそれに気づくことができません 💦
では、どうすれば画面も一緒に更新されるのかというと、ここで出てくるのがStateです。
Reactでは、Stateが更新されたかどうかを見て、画面を更新するかどうかを判断しています 👀
つまり、画面に反映したい値は、ただの変数として持つのではなく、Stateとして管理する必要があるのです！
PropsとStateの違い
ここもよく混ざるポイント！
特に、「この値ってどこで持てばいいんだろう？」と迷ったときに、PropsとStateがごちゃっとしやすいです 👀
PropsとStateはどちらもデータですが、持っている場所が違います。
Propsは親コンポーネントから渡される値で、Stateはコンポーネント自身が持つ値です。
つまり、その値を「誰が管理しているのか」が違うのです。
- 表示するだけで変わらない値や、外から決まる値であれば → Props
- ボタン操作や入力などで変わっていく値であれば → State
こんなふうに分けて使い分けてみるのが、おすすめです！
useState で状態を管理する
Reactでは、状態を管理するときに使うのが、useStateです。
useState とは、State（状態）を使えるようにするための仕組み のこと。
基本の形はこんな感じ↓
const [値, 更新する関数] = useState(初期値);
- 値：今の状態を持つ変数
- 更新する関数：値を変更するための関数
- 初期値：最初に入っている値
この形で、Stateは「値」と「更新するための関数」をセットで持っています。
では、実際のコードで見てみましょう 👀
import { useState } from "react";
export const App = () => {
const [num, setNum] = useState(0);
const onClickButton = () => {
setNum(num + 1);
};
return (
<>
<button onClick={onClickButton}>カウントUP</button>
<p>{num}</p>
</>
);
};
このコードでは、useStateを使うことで、ボタンを押すたびに増える数字を管理できるようになります。
useStateでやっていることはとってもシンプル。
最初に初期値を設定して値を用意し、
変更するときは更新用の関数を使って新しい値に置き換えています。
このように、値と更新するための処理をセットで扱うのがStateの特徴なのです！
Stateを更新すると画面が変わる仕組み
ここ、けっこう大事なポイントです！
setNum(num + 1);
この更新用の関数が実行されると、Reactの中ではこんなことが起こります 👀
1. setNum(...) が呼ばれる
2. Reactが「Stateが変わった」と判断する
3. コンポーネントをもう一度実行する
4. 新しい値で画面が描き直される
つまり、Stateを更新すると、Reactが画面を作り直す動きになるのです。
ここでちょっと意識しておきたいのが、
「値を書き換えたから画面が変わる」
のではなく、
「Stateを更新したからReactが再実行する」
というところ。
ここ、けっこう大事なので覚えておいてください 👀
Stateの更新ルール
Stateを更新するときは、いくつか気をつけたいポイントがあります！
この仕組みを知らないと、「値は変わっているのに画面が変わらない」といったところでつまずきやすいところ…！
ここからは、Stateを更新するときのポイントを見ていきます 👀
Stateは直接書き換えない
ここでよくやりがちな書き方をご紹介します…！
num = num + 1;
この num は、さっきの
const [num, setNum] = useState(0);
で定義したStateの値です。
一見これでも値は変わりそうに見えますが…、
この書き方では画面は更新されないのです！
なんでかというと、
Reactが見ているのは更新用の関数が呼ばれたかどうか。
なので、Stateを変更するときは
setNum(num + 1);
のように書く必要があります！
Stateは、「変数を書き換える」のではなく、「更新用の関数で値を変える」 と覚えておきましょう！
配列やオブジェクトは新しく作って更新する
Stateには、配列やオブジェクトを入れることもできます。
const [list, setList] = useState(["りんご", "みかん"]);
ここでやりがちなミスがこちら↓
list.push("バナナ");
setList(list);
この書き方だと、元の配列をそのまま変更してしまっているので、Reactは「新しい値になったかどうか」を検知できず画面は更新されません 💦
なので、配列を更新するときは、新しい配列を作ってから渡す必要があります…！
const onClickAdd = () => {
setList([...list, "バナナ"]);
};
配列やオブジェクトは一手間必要ですが、元のデータは直接変更せず、新しいデータを作って、更新用の関数で値を変えるようにしましょう！
前の値をもとに更新するときは関数で書く
同じStateを続けて更新させたいときは、少し注意です！
setNum(num + 1);
setNum(num + 1);
このやり方だと、2回書いても1回分しか反映されません 💦
理由は、どちらも同じ num をもとに計算しているためです。
Reactは、Stateの更新をまとめて処理するため、この2つの処理はどちらも同じタイミングの num を使って計算されます。
そのため、結果的に1回分しか増えない状態になるのです。
こういうときは、関数の形で書く必要があります↓
setNum((prev) => prev + 1);
setNum((prev) => prev + 1);
こうすると、更新後の値をもとに次の計算をしてくれます。
ここ、うっかり間違えやすいポイントなので注意です 👀
Stateが分かると何が変わる？
Stateが分かるようになると、
コードの見方が大きく変わります。
たとえば、
- この値はどこで持つべきか
- どこで更新するべきか
- どのタイミングで画面が変わるのか
こういったところが、少しずつ見えてきます 👀
さらに、
- 入力フォームの管理
- モーダルの開閉
- APIで取得したデータの表示
といった「動きのあるUI」を作れるようにもなります ୧ ( ˙¯˙ )୨
Stateを使って状態を扱えるようになると、
Reactでの画面開発が一気に楽しくはずです ✨
今回のポイントおさらい !!
ここまでの内容を整理すると↓
State
・画面の中で変わっていく値を扱うための仕組み
・更新すると、Reactがもう一度動いて画面が変わる
状態管理
・State（状態）をどう扱うかという考え方
・値を持って、変わったら画面に反映させる流れ
最初は「普通の変数と何が違うの？」と感じやすいですが、仕組み自体はシンプルなので、触っていくうちに自然と慣れていきます！
ここが分かってくると、
Stateを使った画面の動きもちゃんと分かってきます 👀
最後に
Stateは、Reactを使う上で何度も出てくる基本の考え方です。
最初はなかなかイメージしづらいと思いますが、実際に使いながら触れていく中で、少しずつ分かっていくはずです。
この記事が、Stateを整理するヒントになっていたら嬉しいです ᥫᩣ ̖́-
コメント