React Hooksを用いて関数コンポーネントを操る

React
とんぺい
とんぺい

師匠こんにちは!

今日もプログラミングを学びに来たブゥ!

師匠
師匠

とんぺいくん、こんにちは。

前回の講義までで、Reactを用いたCRUDアプリケーションの作成方法を勉強したね。

とんぺい
とんぺい

うん!

CRUDアプリケーションの作成に関してはしっかり復習してきたブゥ!

そこで、今回はどんなことを勉強するんだブゥ?

師匠
師匠

今回は、React 16.8でリリースされた機能である【React Hooks】について学んでいくよ。

とんぺい
とんぺい

おぉ!なんだか楽しそうだブゥ!

本日もよろしくおねがいします!

師匠
師匠

よし、それでは早速本日の本題に進もう。

今回のゴール

Image from Gyazo
師匠
師匠

今回は、ボタンを押すことで、取得するリソースを変更するアプリを作成するよ。すごくシンプルなアプリだけど、Hooksの基礎を覚えるには十分役に立つのでしっかり身につけよう。

とんぺい
とんぺい

了解だブゥ!!

それでは、React Hooksの簡単な説明をよろしくお願いします。

今回のKey point

クラスコンポーネントと関数コンポーネント

師匠
師匠

React Hooksの説明に入る前に、Reactには2種類のコンポーネントの作り方があったが、とんぺいくんは覚えているかな?

とんぺい
とんぺい

うーんと…

クラスコンポーネント(Class-Based Component)と

関数コンポーネント(Fucnction-Based Component)だブゥ!

師匠
師匠

その通り。

では、それら2つのコンポーネントの違いは何だったかな?

とんぺい
とんぺい
  • クラスコンポーネントはstatelifecycleメソッドを持つことができる
  • 関数コンポーネントは、statelifecycleメソッドは持つことができずに、受け取ったpropsを表示するだけ

といった違いがあるブゥ!

師匠
師匠

うん。その通りだね。

今とんぺいくんが答えたことを図にすると、こういう風になるね。

とんぺい
とんぺい

うんうん。僕もそんなイメージだブゥ!

Hooksを導入すると、この関係がどうなるんだブゥ?

師匠
師匠

Hooksを導入することで、関数コンポーネントの中でもstateとlifecycleメソッドをもたせることができるようになるんだ。図にするとこうなるね。

Hooksを導入するメリット

とんぺい
とんぺい

ふむふむ。関数コンポーネントでも、クラスコンポーネントと同じような機能を持つことができるということだブゥね!

これには、どんなメリットがあるんだブゥ??

師匠
師匠

メリットは以下の2点があげられるよ。

  • クラスコンポーネントを減らせる
  • 異なるコンポーネント間で、簡単にロジックを共有できるようになる
とんぺい
とんぺい

ほぅほぅ。この2つを実現できると何が嬉しいんだブゥ?

師匠
師匠

上記の2つのメリットが実現することで、アプリケーションを作成する際の「コード量」、「ファイル数」、「ファイルの密結合」を少なくすることができ、開発者にとっては嬉しいことづくめなんだ。

とんぺい
とんぺい

なるほど!確かにアプリの開発が楽に素早くなるなら、使わない意味がないブゥね!早くHooksを使ってコーディングしてみたいブゥ!!

師匠
師匠

うん。

それでは早速、ハンズオン形式で、Hooksの基礎を学んでいこう。

とんぺい
とんぺい

よろしくお願いします。

今回は、どんなアプリ・ディレクトリ構成になるんだブゥ?

アプリ・ディレクトリ構成

師匠
師匠

今回は、上図に示すようなアプリの構成になるよ。

ディレクトリ構成に関しては、Githubにソースコードを乗せるので、必要に応じてブランチを変更して確認してほしい。

とんぺい
とんぺい

確かに前回までに作成したCRUDアプリケーションに比べれば凄くシンプルだブゥね〜。これなら、僕でも理解できそうだブゥ!

師匠
師匠

よし。それではコーディングに進もう。

Hooksを使う場合と使わない場合を比較するために、最初はClass-Based Componentsでアプリを作成し、その後Hooksを用いたFunction-Based Componentsにリファクタリングしていくよ。

Let’s hacking !!!

準備

師匠
師匠

まずはいつもどおりに、semanticUIを読み込み、src直下のindex.jsで<App />コンポーネントをレンダリングするようにしよう。


とんぺい
とんぺい

うん。このあたりの記述の仕方はもう完璧だブゥ!

axiosを用いたHTTP通信

師匠
師匠

今回はおなじみのjsonPlaceholderからリソースを取得するよ、axiosを用いてURLの共通部分をbaseURLに記述しよう。

とんぺい
とんぺい

了解だブゥ!

axiosについて詳しく知りたい人は、「axiosを使えば誰でもできるHTTP通信」を見て欲しいブゥ!

Class-Based Components

師匠
師匠

ここでは<App />をClase-Based Componentで作成しているね。

stateの初期値を”post”として、ボタンが押されるたびにsetStateを用いてstateを更新するようにしているよ。

とんぺい
とんぺい

ふんふん。

そして更新したstateをpropsとして渡してあげているということだブゥね!

師匠
師匠

ここでは<ResourceList />をClase-Based Componentで作成しているよ。また、axiosを用いてjsonPlaceholderからリソースを取得し、取得したリソースを展開しているんだ。

とんぺい
とんぺい

なるほど。componentDidMount()を使うことで、コンポーネントがマウントした直後にリソースを取得しているんだブゥね!

componentDidUpdate()は何をしているんだブゥ?

師匠
師匠

componentDidUpdate()はpropsまたはstateが変更された時に実行される関数だよ。ユーザがボタンをクリックして、<ResourceList />に渡されるpropsが変更された際に、jsonPlaceholderからデータを取得し直しているんだ。

この中で、stateの変更を行う際には、必ず現在の propsと前のpropsを比較するようにしよう。そうすることで、無限ループを防ぐことができるんだ。

とんぺい
とんぺい

なるほど。それは大切なことだブゥ!

componentDidUpdate()とpropsの比較はセットにするっと!

Function-Based Components

師匠
師匠

ここでは<App />をFunction-Based Componentで作成しているね。

Class-Based Componentで作成する場合に比べて、コードの記述量が減り、見通しも良くなっているね。

とんぺい
とんぺい

確かにコードの記述量は減って、見通しが良くなっているブゥ!

ところで、新しく出てきた、useStateってなんなんだブゥ?

師匠
師匠

useStateとはFunction-based componentでstateを保持するための関数だよ。const [stateを保持する変数, stateを更新する関数] = useState(初期値)という形で宣言されるんだ。

とんぺい
とんぺい

なるほどだブぅ。

だから、ボタンのonClick()でsetResource(“todos”)とすることで、stateの値が更新されるということだブゥね。

師匠
師匠

ここでは<ResourceList />をFunction-Based Componentで作成しているよ。ここではuseState()に加えて、新たにuseEffect()が使われているね。

とんぺい
とんぺい

ほうほう。

useEffect()ってなんなんだブゥ?

師匠
師匠

useEffectcomponentDidMountcomponentDidUpdateが1つにまとまった関数だと考えてもらうと良いね。

useEffect((引数)=>{関数},[関数発火条件])の形で使用するよ。

とんぺい
とんぺい

ほうほう。

だからClass-Based componentで使われてた、componentDidMountとcomponentDidUpdateの処理をuseEffectの中にまとめて書けるということだブゥね!

師匠
師匠

そうだね。ここでの注意点としては、useEffectの第2引数として渡す発火条件を指定しないと、無条件でuseEffectが発火してしまうことだね。今回は、第2引数にresourseを渡すことで、resourseが変わったときだけuseEffect()が発火するようにしているよ。

ちなみに、1回だけuseEffectを発火させたい場合は[]のように空の配列を渡せばOKだよ。

とんぺい
とんぺい

了解だブゥ!

他にもuseEffectの書き方が2種類あるけど、これはどんな違いがあるんだブゥ?

師匠
師匠

これは、useEffectの中では直接、非同期処理の記述ができないことから、その対策として2種類の方法を紹介しているよ。

とんぺい
とんぺい

ふんふん。

1つ目はどういった方法なんだブゥ?

師匠
師匠

1つ目は、useEffectの外で非同期処理を行う関数を定義して、それをuseEffectの中で呼び出すといった方法だね。

とんぺい
とんぺい

ほうほう。

じゃあ2つ目はどんな方法なんだブゥ?

師匠
師匠

2つ目はuseEffectの中で即時関数を使うという方法だね。

即時関数は(関数)(引数)と記述することで無名関数を定義すると同時に実行する記述の仕方だね。

例:(()=>console.log(“hi”))()

出力:hi

とんぺい
とんぺい

なるほど!

今回は、resourseを引数として、useEffectの中で、非同期通信を即時関数で実行しているということだブゥね!

師匠
師匠

その通り。

どちらの方法で書くかは、チームみんなで共有して決めよう。

まとめ

師匠
師匠

以上でReact Hooksを使った、簡単なハンズオンは終了だよ。

今回はHooksで追加された機能の一部であるuseStateuseEffectに関して学習したね。

とんぺい
とんぺい

うん!

Hooksを使用したほうが直感的に、記述できて簡単な気がするブゥ!

今日もありがとうございました!

師匠
師匠

今日もお疲れ様。

Hooksには他にも機能があるので、もっと勉強した場合には公式リファレンスを参照しよう。

それでは、また次回。

コメント

タイトルとURLをコピーしました