おにちゃん塾の商品一覧

【useState編】React hooksをイチから理解しよう

【useState編】React hooksをイチから理解しよう【typescript付き】
URLをコピーする
URLをコピーしました!
本記事の想定読者
  • useStateとは何か
  • useStateの使い方

本記事は、上記の悩みを解決したい方向けに執筆しています。

おにちゃん

執筆者:2021年4月中旬からreactの学習を始めている大学生です。

useStateはかなり多くの場面で使いますので、早い段階で使い方をマスターできるはずです。


2021年5月19日執筆

本記事は常に最新の情報を掲載しております。

2021年9月23日にリライトしています
ReactのuseState×Material uiを追加しています。


本記事の概要

本記事では、useStateの数値、真偽値、文字列の使い方について詳しく解説しています。

おにちゃん

useStateで分からない方は、Twitterで質問受け付けています。

目次

useStateとは

useStateとは
useStateとは

useStateとは、関数コンポーネントでstateを扱うためのReactフックです。

Reactフックで最も使用されるものです。

stateとは:コンポーネント内部で管理する状態のことを意味しています。

おにちゃん

最初は良く分からなくても問題ありません。書いてるうちに理解が深まります


クラスコンポーネントでuseStateと同じものを作ろう

まずはクラスコンポーネントでボタンを押すと+1されるプログラムを作ってみましょう。

クラスコンポーネントの場合

import React from 'react';

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      count: 0
    }
  }
  render(){
    return(
      <React.Fragment>
        <h1>React hooksとクラスコンポーネントの違い</h1>
        <h2>{this.state.count}</h2>
        <button onClick={() => this.setState({count: this.state.count + 1})}>ボタン</button>
      </React.Fragment>
    )
  }
}

export default App;

何か分かりづらくないですか??

おにちゃん

そうなんです。クラスコンポーネントでstateを扱おうとするとコードが複雑化してしまうのです。

そのお悩みを解決したのが今回紹介するuseStateという訳です。


useStateのシンプル機能を実装しよう

useStateのシンプル機能を実装しよう
useStateのシンプル機能を実装しよう

ここからは実際に手を動かしながら解説していきます。

本記事で学べるuseState一覧

  1. useStateで数値を扱う
  2. useStateで真偽値を扱う
  3. useStateで文字列を扱う


useStateで数値を扱う

先ほどクラスコンポーネントで作成したものをuseStateに置き換えましょう。

おにちゃん

まずは完成品のコードを紹介します。最初に下記のコードをコピーし貼り付け、実際に動くか試してみてください。

import React, {useState} from 'react';

function App(){
  const [count, setCount] = useState(0);

  return(
    <React.Fragment>
      <h1>React hooksのuseStateの使い方</h1>
      <h2>{count}</h2>
      <button onClick={()=> setCount(count + 1)}>ボタン</button>
    </React.Fragment>
  )
}

export default App;

動くことを確認したら、コードを学習していきましょう。

まず、useStateを使うためにimportしていきましょう。

import React, {useState} from 'react';

これでuseStateをこのファイルで扱うことができます。

//const[状態変数、状態を変更するための関数] = useState(状態変数の初期値)
const [count,setCount] = useState(0);

上記のコードを解説すると、count変数には初期値として0が入っている。その0を変更するための関数としてsetCountをセットしている状態

<h2>{count}</h2>

JSX内で変数を展開したい場合は{}を使います。

<button onClick={()=> setCount(count + 1)}>ボタン</button>

onClick=ボタンをクリックしたらsetCount関数が起動します。そのsetCount関数の中身は(count + 1)。このcountは先ほど設定した状態変数です。

ボタンをクリックすると(初期値+1)、今回は0+1がされます。結果的に、一度ボタンをクリックすると0→1になるはずです。

2,3,4回と押すと、countの数値が2,3,4とカウントされていきます。


useStateで真偽値を扱う

おにちゃん

useStateで真偽値を扱えると、trunの場合には〇〇,falseの場合には〇〇と表現することができます。

まずは完成品のコードをどうぞ

import React, {useState} from 'react';

function App(){
  const [on, setOn] = useState(true);

  return(
    <React.Fragment>
      <h1>React hooksのuseStateの使い方</h1>
      <h2>状態:{on ? "ON" : "Off"}</h2>
        <button onClick={()=> setOn(true)}>ON</button>
        <button onClick={()=> setOn(false)}>OFF</button>
    </React.Fragment>
  )
}

export default App;

先ほどと同じように、状態変数、状態変数の関数、状態変数の初期値を作っていきます。

const [on, setOn] = useState(true);

このように、useStateでは、数値だけでなく、真偽値も代入できます。

次にtrueだったら〇〇、falseだったら〇〇を表現していきましょう。

 {on ? "ON" : "Off"}
{状態変数?trueの場合:falseの場合}

JSXではこのような形でもif文を作れるので覚えておきましょう。

ボタンに関しては、押すとtrueにするボタン、押すとfalseになるボタンを作るだけです。

おにちゃん

useStateで真偽値を使って、ハンバーガーメニューやタブなどを簡単に作成できるようになります。


useStateで文字列を扱う

useStateで文字列も扱うことができます。

実際に完成したコードを入力して確認してみてください。

import React, {useState} from 'react';

function App(){
  const [text, setText] = useState("");

  const handleText = (e) => {
    setText(()=> e.target.value)
  }

  return(
    <React.Fragment>
      <h1>React hooksのuseStateの使い方</h1>
      <h2>名前:{text}</h2>
      <input type="text" value={text} onChange={handleText}/>
    </React.Fragment>
  )
}

useStateでは初期値として文字列も受け取ることが可能です。

ここまで学習している方であれば、意味も簡単に理解できるはずです。

おにちゃん

初心者で躓く方はe.target.valueの所だと思います。この点はjavascriptの基本知識だったりするので、理解できなかった方は一度基礎に戻ってみてください。


useStateでの注意点

useStateでの注意点
useStateでの注意点

質問の多い内容は注意点としてまとめていきます。


usestate is not defined

[chat face="IMG_2910-2.jpg" name="おにちゃん" align="left" border="blue" bg="blue" style="maru"] 初心者で躓く方はe.target.valueの所だと思います。この点はjavascriptの基本知識だったりするので、理解できなかった方は一度基礎に戻ってみてください。 [/chat]

このようにdefinedとエラーが出た場合は、importをしていないことが原因です。

今回の場合であれば、下記のようにuseStateをインポートしてあげればエラーは解消できます。

import React, {useState} from ‘react’;


【useStateの応用編】色々な機能と組み合わせてみよう

useStateの基本を理解できた方は、Reactでできる機能とuseStateを組み合わせてみましょう。

useState応用技術

  1. useState×material ui


useState×material uiで作る簡易スライダー

おにちゃん

上記のようにmaterial uiを活用したスライダーを今回は作成してみましょう。

material uiの導入は下記の記事を参考にしてみてください。1分ほどで導入できるはずです。

import React, { useState } from 'react';

import Box from '@mui/material/Box';
import Slider from '@mui/material/Slider';

function App() {

  const[count, setCount] = useState(0);

  const handleCount = (e) => {
    setCount(()=> e.target.value);
  }
  return (
    <>
      <Box sx={{
        width: 300,
        height: 300,
      }}>
        <h2>{count}</h2>
        <Slider defaultValue={count} value={count} onChange={handleCount} aria-label="Default" valueLabelDisplay="auto" />
      </Box>
    </>
  );
}

export default App;

正直、<Box>部分は不要なのですが、今回は追加しておきました。

import Slider from '@mui/material/Slider';

Slider機能を追加するには、上記のimportが必要です。

<Slider defaultValue={count} value={count} onChange={handleCount} aria-label="Default" valueLabelDisplay="auto" />

value値とonChargeをセットすると、先程の動画のような機能を実装することができます。

おにちゃん

このように、material uiを上手く合わせることができると、React useStateの幅が広がりますので、ぜひ挑戦してみてください。


まとめ:useStateは使用頻度が高いです

まとめ:useStateは使用頻度が高いです
まとめ:useStateは使用頻度が高いです

ここまで【useState編】React hooksをイチから理解しよう【typescript付き】の解説をしてきました。

キャプション
  1. useStateとは関数コンポーネントでstateを扱うためのhooksの一種
  2. useStateでは、数値、真偽値、文字列を扱うことができる
  3. useStateでのエラーはコピペで解決できる
おにちゃん

本記事は以上です。最後までご覧くださりありがとうございました。

useStateの次はuseEffectを学んでみましょう。

本格的にReactを学びたい方はおにちゃん塾or動画教材をおすすめしています。


読者におすすめの記事


読者におすすめの動画教材

【useState編】React hooksをイチから理解しよう【typescript付き】

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる