未経験からエンジニア 奮闘記

未経験からエンジニアに自由に生きる途中

MENU

初心者向け:useStateがなかったらJavaScriptでどうやって実装するか

はじめに

この記事では、ReactのuseStateフックを使わずに、JavaScriptでUIの状態管理を行う方法について説明します。useStateを使用することで状態管理が非常に簡単になりますが、初心者の方にとってその背後にある基本的な概念を理解することも重要です。ここでは、イベント処理を使ってUIを変更する方法と、useStateを使った方法の両方を紹介します。

サンプル

今回はサンプルとして、ボタンをクリックしたら文字が変わる実装を元に、従来のJSのでの実装と、useStateを利用を比較してみて行きたいと思います。

useStateがない場合の実装

まず、useStateを使わずにイベント処理でUIを変更するコードを見てみましょう。ここでは、ボタンをクリックするとテキストが変わるシンプルな例を使います。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>State Management without useState</title>
</head>
<body>
  <div id="app">
    <p id="text">初期テキスト</p>
    <button id="changeTextButton">テキストを変更</button>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const textElement = document.getElementById('text');
      const buttonElement = document.getElementById('changeTextButton');

      buttonElement.addEventListener('click', () => {
        textElement.textContent = '変更後のテキスト';
      });
    });
  </script>
</body>
</html>

この例では、ボタンがクリックされると、JavaScriptのイベントリスナーがテキストを変更します。useStateを使わずに、DOM操作だけでUIを更新しています。

useStateを利用したコード

次に、同じ機能をReactのuseStateフックを使って実装してみましょう。

import React, { useState } from 'react';

function App() {
  const [text, setText] = useState('初期テキスト');

  const handleChangeText = () => {
    setText('変更後のテキスト');
  };

  return (
    <div>
      <p>{text}</p>
      <button onClick={handleChangeText}>テキストを変更</button>
    </div>
  );
}

export default App;

こちらのコードでは、useStateを使って状態を管理しています。useStateは現在の状態とそれを更新する関数を返し、状態が変更されると自動的にUIが再レンダリングされます。

まとめ

useStateがない場合でも、イベント処理を使ってUIの状態を変更することは可能です。しかし、ReactのuseStateフックを使用することで、状態管理がよりシンプルで直感的になります。初心者の方は、まず基本的なJavaScriptによるDOM操作を理解し、その後でuseStateを使った状態管理に進むと、Reactの強力な機能をより深く理解できるでしょう。