やさしく学ぶ、初学者のためのReact入門

■第２話：Reactの再レンダリングの意義と状態管理

（最終更新日：2022.06.03）

「Reactって何が良いの？」

前回、SPAを構築するためにReactが必要ということは説明した。 しかしながら、SPAを構築する上で「なぜReactが良いのか」という直接的な意味はまだ理解できないと思う。 今回はその良さに当たる再レンダリングと状態管理について説明する。そこで用いられるReact Hooksの説明も行う。

１.再レンダリングと状態管理の必要性

Reactに関するどの教材を見ても再レンダリング自体の説明はあるが、その必要性に関して言及しているものはあまり見ない。 当たりまえ過ぎて説明を省いているのかもしれないが、Reactを理解する上で重要な事項の一つなので、その意義を説明する。

まず、再レンダリング自体について説明しよう。
再レンダリングとは、Stateに設定した変数が更新された際に、再び一番上からJavaScriptのコードを読み直す機能のことである。
まだ、Reactを使ったことがない人は、

「何でこんな機能が必要なの？」

と思うかもしれない。 それはSPAにおいて、都度都度その関数（今回説明するケースではAnimation関数）を読み直すということが多いからである。 例えば前回のコード（下記）を再掲して説明すると、Stateであるnumを変化させた（赤ちゃんをクリックした）際に、赤ちゃんの表情を変えたいからである。 これがReactの場合、useStateにその変数(num)を設定するだけで実現できる（下記２行目）。 同様の機能を素のJavaScriptで実行しようとすると、引き金となる関数内にその関数を書く必要がある。 今回のように、1つの引き金に対して１つの機能の場合はJavaScriptの記述でも大した手間ではないが、引き金は１つとも限らない。実行したい機能も１つとは限らない。 声を入力した際、ミルクを上げた際など、沢山の要素が絡まってきたときに、その関数の再実行と状態の管理が必要となる。 これを素のJavaScriptで行うと非常に煩雑なものとなる。

そういった、関数同士や変数との依存関係を整理する上で、Reactの再レンダリングや状態管理、 ひいてはコンポーネント指向の書き方が有効に働いている。 最初はこの意義を理解するのが難しいかもしれない。使いながら理解していけば充分である。 今は何となく「状態管理と関数の再実行」に便利なんだなと思ってくれれば良い。

２.React Hooksについて

上記で述べた関数の再実行や状態管理をするために、ReactにはHooksという機能が搭載されている。 全種類を紹介すると結構な量になってしまうので、今回はuseStateとpropsの説明だけに留める。

①useState
これは単純に状態を管理するHooksである。前項でも説明したように、 状態（今回はnum変数）とそれを管理する関数（今回はsetNum）を定義することで、numが変化した際に再実行が行われる。 初期値（0）が読み直されるのではという心配があるが、そこはきちんと初回の読み込みだけになっている。 下記の例では、イメージ画像がクリックされたときにnumが＋1され、Animation関数を都度実行している。

②props
propsは、コンポーネント分割した子コンポーネントに引数を渡すためのものである。 今まで説明を省いていたが、右側のAnimation関数部分は左側のApp関数と一緒に書くこともできる。 見やすさ、コードの管理のしやすさ上、AppとAnimationの２つに分割している。
このAnimationコンポーネントに、引数として値や関数を渡すのがpropsである。今回の場合は、num変数とonClickCountUp関数を渡している。 渡した引数は、Animation関数の最初のconst { num, onClickCountUp } = props 部分で各々分割代入される。 （分割代入をしないと、numはprops.num、onClickCountUpはprops.onClickCountUpという冗長な書き方で実行する必要がある。） これにより、Animation内でも、num、onClickCountUpと同じ名前で使用することが可能になり、同様の変数、関数としての役割を果たせる。

▼参考図書、サイト

 [基礎編] React Hooks + Django REST Framework API でフルスタックWeb開発　Udemy（Kazu .T）
   React Hooksの使い方を学ぼう～関数コンポーネントの状態管理を行う　CodeZine