おにちゃん塾の商品一覧*準備中

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

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

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

おにちゃん

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

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


2021年5月19日執筆

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


本記事の概要

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

おにちゃん

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

現在TypeScriptの内容を作成中です

(スポンサーリンク)

目次

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で数値を扱う

先ほどクラスコンポーネントで作成したものを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は使用頻度が高いです
まとめ:useStateは使用頻度が高いです

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

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

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

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

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


読者におすすめの記事


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

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

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

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