react勉強会 #4

react勉強会#4
本⽇のテーマ
React Hooks を学ぼう
本⽇の達成⽬標
カウンター機能の完成
学習内容
React Hooksとは？
React Hooks は、React のさまざまな機能をクラスを書かずに使えるようになる機能
公式ページ: https://ja.reactjs.org/docs/hooks-intro.html
React Hooksのメリット
参考: https://qiita.com/Mitsuzara/items/98d1bc4a83265a764084
簡単に⾔うとクラスよりも記述が簡潔になることがメリットです。
どれくらい簡潔になるかは次の⽐較をご覧ください。
⽐較
同じ処理をする機能を、クラスとフックそれぞれ使って書くと...
クラス

import React from 'react'
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
count: 0
}
}
render() {
return (
<>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count +
1 })}>
Click me
</button>
</>
)
}
}
フック
import React, { useState } from 'react'
export default const App = () => {
const [count, setCount] = useState(0)
return (
<>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</>
)
}
以上のようにフックで書いた⽅がコード量が少なくなっています。
では、フックがどこに登場してるかというと、上記フックコード 4 ⾏⽬にある useState がフックになりま
す。
フックは、名前が use~~~ のように use から始まる関数のことを指します。
※厳密には use を使わなくてもよいですが、React ではこの命名規則を推奨しています。
useState 以外にもフックはありますが、その中でも頻繁に使うフックについて後程⾒ていきます。
React Hooksのデメリット

React の全ての機能が使えるようになるわけではないこと。
フックで書けない場合はクラスを使いましょう。
頻繁に使うHooks
ここでは React で開発する際に、頻繁に使うフック useState と useEffect を紹介します。
useState
先ほどの例で出てきた useState は、state (状態) を管理するためのフックです。
例えば、ボタンを押すと 1 ずつ増えていく数字のように、何かしらアクションを起こすと値が変化してい
く変数を扱いたいときは、この useState を使います。
具体的に、次のコードを使って説明します。
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
Click me
</button>
</div>
);
}
まず、1 ⾏⽬
import React, { useState } from 'react';
で useState を react パッケージから import します。
次に、関数の中⾝を⾒ると、
......
}
useState が出てきます。
ここで、ポイントとなるのが「フックは関数コンポーネント内で使う」です。
以下のように関数の外で定義したり、
......
}

以下のようにクラス内で定義しても使⽤できないので注意してください。
class Example extends React.Component {
......
}
先ほどのコードに戻り、useState がある箇所を⾒ると、
となっています。
これを⼀般的に書くと次のようになります。
const [ 変数hoge, 変数hogeを操作する関数setHoge] = useState(hogeの初期値);
つまり、先のコードは初期値を 0 とする変数 count とその count を操作する関数 setCount を⽤意したこ
とになります。
次に、return されてる JSX ⽂を⾒てみましょう。
<div>
Click me
</button>
</div>
まず、pタグ内
では、現在の count の値が表⽰されます。
button タグでは onClick 属性が指定されているので、ボタンを押すことで、
() => setCount(count + 1)
というイベントが発⽣します。
ちなみに、() => ~~~ は、アロー関数
(https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions) と
いいます。
setCount(count + 1)
で、現在の count の値に +1 されます。
実際に上記のコードを実⾏してみると、count が 0 から始まり、ボタンを押すごとに +1 されていくのが
わかります。
演習問題
次の機能を useState を使って実装してみましょう。
1. ボタンを押すと、ある⽂字（例えば、「hoge」など）が表⽰されたり⾮表⽰になったりする。
2. ある変数に対して、ボタンを押すと +2 される。ただし、この変数はボタンを押した回数によって

表⽰されたり、⾮表⽰される。奇数回ボタンを押すと⾮表⽰、偶数回ボタンを押すと表⽰される。
useEffect
useEffect は、レンダリング（コードの内容が画⾯に反映されること）直後や、ある変数の値が変わった際
に呼ばれるフックです。
この2つのタイミングそれぞれで useEffect の書き⽅が多少異なります。
レンダリング直後
まず、ブラウザのコンソールを開き、次のコードを実⾏してみましょう。
import React, { useEffect } from 'react'
useEffect(() => {
console.log('Hello useEffect!')
})
return (
<p>Hello, World!</p>
);
}
すると、ブラウザ画⾯には ”Hello World!” が表⽰され、コンソール上には ”Hello useEffect!” が表⽰され
ると思います。
まず画⾯上に ”Hello World!” が表⽰（レンダリング）されてからコンソール上で ”Hello useEffect!” が出
⼒されるといった動作の流れになっています。
コードを⾒ると、関数内には以下のように useEffect フックがあります。
useEffect(() => {
console.log('Hello useEffect!')
})
useEffect は第⼀引数に関数を⼊れることで、レンダリング直後にその関数が実⾏されます。
ある変数の値が変わったタイミング
useEffect は第⼀引数だけでなく第⼆引数も指定できます。
具体的には、配列型の変数を指定し、その要素として関数コンポーネント内で使われている変数を⼊れるこ
とで以下のような形になります。
useEffect( 関数, [hoge1, hoge2, ...])
※ hoge1, hoge2 は関数コンポーネント内の変数
第⼆引数がある場合はその要素のいずれか（hoge1、hoge2のどれか）が変化した場合に第⼀引数の関数が
実⾏されます。
それでは、第⼆引数がある useEffect の例を⾒ていきましょう。

import React, { useState, useEffect } from 'react';
useEffect(() => {
console.log('現在のcountの値は' + count + 'です！');
}, [count])
return (
<div>
Click me
</button>
</div>
);
}
ここでは、useState で指定した変数 count が変化する毎に useEffect が呼ばれます。
このように、useState と useEffect を組み合わせて使うことはよくあります。
また、useEffect( 関数, []) のように配列の要素を空にした場合は、useEffect( 関数 ) のように第⼆引数を指
定しない場合と同じく、レンダリング直後に第⼀引数の関数が実⾏されます。
演習問題
次の機能を useState、useEffect を使って実装してみましょう。
1. ボタンを押すと 1 ずつ加算していく数字がある。この数字が、3 になった場合のみコンソール上
に適当な⽂字（例えば、「hoge」など）を表⽰する。
2. 1 つの int 型変数 (初期値0) と 1 つの Boolean 型変数 (初期値false) を⽤意する。前者はボタンを
押すごとに 1 ずつ加算されていき、後者は前者の数字の値が 3 になった場合に true に変わる。
Boolean 型変数が true に変わったら、コンソール上に適当な⽂字 ( 例えば、「hoge」など ) を表
⽰する。
参考記事
useState や useEffect については、以下の記事もおすすめですので、是⾮あわせてご覧ください。
https://reffect.co.jp/react/react-hook-usestate-understand
https://reffect.co.jp/react/react-useeffect-understanding
フックのルールについては以下の公式ドキュメントをご覧ください。
https://ja.reactjs.org/docs/hooks-rules.html#explanation
まとめ
今回は React Hooks ついて基本的なフック (useStateとuseEffect) を⽤いて学びました。他にも様々なフ
ックがあるので、実際に活⽤できるよう引き続き学習をしていきましょう。
お知らせ

チャットツール「discord」で勉強会の告知や、やりとりの場を設けております。
もしよろしければ下記 URL からご参加ください。
https://discordapp.com/invite/fr8CqPH

react勉強会 #4

More Related Content

Similar to react勉強会 #4 (20)

react勉強会 #4