MENU
  1. ホーム
  2. プログラミング
  3. 【useState編】React hooksをイチから理解しよう

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

プログラミング
【useState編】React hooksをイチから理解しよう【typescript付き】
本記事の想定読者
  • useStateとは何か
  • useStateの使い方

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

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

2021年5月19日執筆

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

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

本記事の概要

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

あわせて読みたい
【入門編】React hooksとは｜基礎知識を徹底解説【書籍付き】 本記事の想定読者 React hooksとは何なのかReact hooksの使い方を学習したいReact hooksの学習教材を知りたい 本記事は上記の方に向けて、執筆しています。 2021年5月18...
記事の内容

useStateとは

useStateとは
useStateとは

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

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

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


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

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

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

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分ほどで導入できるはずです。

あわせて読みたい
【React + Material-UI入門】カッコいいデザインを秒速で作成 本記事では、Reactの環境構築が完了している方を対象としています。 Reactの準備が終わっていない方は下記の記事を参考にしてみてください。 2021年/4月29日執筆 記事は... 
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を学んでみましょう。

あわせて読みたい
【useEffect編】React hooksをイチから理解しよう 本記事の想定読者 useEffectとは何かuseEffectの使い方 本記事は上記の悩みを解決したい方向けに執筆しています。 2021年5月20日執筆 本記事は常に最新の情報を掲載して...

本格的にReactを学びたい方は当サイトor動画教材をおすすめしています。

読者におすすめの記事

投稿が見つかりません。
投稿が見つかりません。
投稿が見つかりません。

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

  • モダンJavaSciptの基礎から始める挫折しないためのReact入門
  • 【JavaScript＆CSS】ガチで学びたい人のためのWEB開発徹底実践
プログラミング
【useState編】React hooksをイチから理解しよう【typescript付き】

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

記事の内容