【React入門】useStateの使い方を初心者向けにご紹介。

TypeScript

2022.04.03

今回の記事はReact入門編としてuseStateの使い方をコードつきで環境構築から解説します。分かりやすいように記載していきますので是非参考にしてみて下さい。

Reactプロジェクト環境構築
useStateとは？
useStateの使い方

Reactプロジェクト環境構築

タイプスクリプトベースのReactプロジェクトを作成します。

node等がインストールされてない方はインストールして下さい。その前提で話を進めます。

npx create-react-app sample --template typescript

まずは上記で「sample」プロジェクトを作成します。

cd sample
npm start

これでローカルサーバが立ち上がって初期画面が表示できます。

上記画面が表示されればうまく環境構築できているのでOKです。次にuseStateの説明に進みます。

useStateとは？

useStateはReact Hooksの基本的なHook（関数）で画面表示の状態管理を行うことができるものです。

useStateの定義方法は下記です。

const   [sampleCount,setSampleCount] = useState<string>("初期値");
//const [ステート(state)と呼ばれる,セットステート(setState)と呼ばれる] = useState<型>(初期値)

関数内でしか定義できないのでそこは注意して下さい。コメントに書いたように本体とセット関数のような作りで型と初期値を入れて定義できます。型・初期値は必須ではないですが、エラーの元になるので入れるようにしましょう。

今回でいうとstateには定義した段階では「初期値」という文字がセットされた状態です。このセットされた文字列が変更された場合に画面が再度レンダリング（描写）され、変更されたstateを画面に表示している場合その値が変わったように見えるのです。

文面で説明しても少し分かりづらいので実際に使い方を説明して画像を入れて解説していきます。画面に表示している文字の状態管理を参考に行なっていきます。

useStateの使い方

環境構築で立ち上げたプロジェクト内のApp.tsxのファイルを以下のように修正します。

import React, { useState } from 'react';
import './App.css';

function App() {
  // サンプルUseState
  const [sampleCount,setSampleCount] = useState<string>("クリックしてません。");
  
  // クリックアクション
  const AddCount = () => {
    setSampleCount("クリックしました。")
  }

  return (
    <div className="App" >
      <label>表示：{sampleCount}</label>
      <button onClick={() => AddCount()}>ボタン</button>
    </div>
  );
}

export default App;

初期表示では下記のような表示になっています。