イベントハンドリングでユーザー入力に対応（第5回）

Reactのイベントハンドリングの仕組み

Reactでは、HTMLのイベント（クリック、入力、ホバーなど）をJavaScript関数で処理します。Reactのイベントハンドリングは、通常のDOMイベントと似ていますが、合成イベント（Synthetic Event）と呼ばれるラッパーを使用することで、ブラウザ間の互換性を確保し、パフォーマンスを最適化しています。イベントハンドラは、JSX内で属性として指定します。たとえば、ボタンのクリックイベントは以下のように記述します。

<button onClick={handleClick}>クリック</button>    

ここで、onClickはReactのイベント属性で、handleClickは開発者が定義した関数です。イベントハンドラには、イベントオブジェクトが自動的に渡され、必要に応じてそのプロパティ（例：event.target）を参照できます。

ハンズオン：ボタンクリックのイベント処理

イベントハンドリングの基本を理解するため、ボタンクリックでメッセージを更新するアプリケーションを作成します。第1回で作成したプロジェクト（my-react-app）のsrc/App.jsを以下のように編集します。

import React, { useState } from 'react';    
import './App.css';    
    
function App() {    
  const [message, setMessage] = useState('ボタンをクリックしてください');    
    
  const handleClick = () => {    
    setMessage('ボタンがクリックされました！');    
  };    
    
  return (    
    <div className="app-container">    
      <h1>イベントハンドリング</h1>    
      <p>{message}</p>    
      <button onClick={handleClick}>クリック</button>    
    </div>    
  );    
}    
    
export default App;    

このコードでは、useStateでmessage状態を管理し、handleClick関数をonClick属性に渡しています。ボタンをクリックすると、setMessageが呼ばれ、メッセージが更新されます。src/App.cssは第4回までのスタイルをそのまま使用しますが、必要に応じて以下を確認します。

.app-container {    
  text-align: center;    
  padding: 20px;    
  font-family: Arial, sans-serif;    
}    
    
button {    
  margin: 10px;    
  padding: 10px 20px;    
  font-size: 16px;    
  cursor: pointer;    
}    

開発サーバー（npm start）が起動している状態で保存すると、ブラウザに初期メッセージが表示されます。ボタンをクリックすると、メッセージが「ボタンがクリックされました！」に変わります。この動作は、Reactがイベントを検知し、状態を更新してUIを再レンダリングする仕組みによるものです。

フォーム入力のイベント処理

イベントハンドリングは、フォーム入力の処理にも不可欠です。テキスト入力に応じて状態を更新する例を試します。App.jsを以下のように変更します。

import React, { useState } from 'react';    
import './App.css';    
    
function App() {    
  const [inputText, setInputText] = useState('');    
  const [message, setMessage] = useState('テキストを入力してください');    
    
  const handleInputChange = (event) => {    
    setInputText(event.target.value);    
  };    
    
  const handleSubmit = () => {    
    setMessage(`入力されたテキスト: ${inputText}`);    
    setInputText('');    
  };    
    
  return (    
    <div className="app-container">    
      <h1>フォームイベント処理</h1>    
      <input    
        type="text"    
        value={inputText}    
        onChange={handleInputChange}    
        placeholder="テキストを入力"    
      />    
      <button onClick={handleSubmit}>送信</button>    
      <p>{message}</p>    
    </div>    
  );    
}    
    
export default App;    

このコードでは、inputText状態で入力値を管理し、onChangeイベントで入力値を更新します。handleSubmit関数は、送信ボタンがクリックされたときにmessageを更新し、入力欄をクリアします。event.target.valueを参照することで、入力されたテキストを取得しています。ブラウザで確認すると、テキストを入力して「送信」をクリックすると、入力内容がメッセージとして表示され、入力欄が空になります。

ハンズオン：イベントハンドリングの拡張

イベントハンドリングの柔軟性を体感するため、読者自身で機能を追加します。以下の課題を試してください。App.jsを編集し、入力されたテキストの文字数をリアルタイムで表示する機能を追加します。以下は一例です。

import React, { useState } from 'react';    
import './App.css';    
    
function App() {    
  const [inputText, setInputText] = useState('');    
    
  const handleInputChange = (event) => {    
    setInputText(event.target.value);    
  };    
    
  return (    
    <div className="app-container">    
      <h1>リアルタイム文字数カウント</h1>    
      <input    
        type="text"    
        value={inputText}    
        onChange={handleInputChange}    
        placeholder="テキストを入力"    
      />    
      <p>文字数: {inputText.length}</p>    
    </div>    
  );    
}    
    
export default App;    

このコードでは、inputTextの長さをlengthプロパティで取得し、リアルタイムで表示します。入力するたびに文字数が更新されることをブラウザで確認できます。自分で異なるイベント（例：ダブルクリックのonDoubleClick）や表示内容（例：入力が空かどうか）を追加し、イベントハンドリングの可能性を探ってください。

次のステップに向けて

本記事では、Reactのイベントハンドリングを学び、ボタンクリックやフォーム入力などのユーザー操作に対応する方法を習得しました。イベントハンドリングは、インタラクティブなUIの基盤となる技術です。第6回では、リストと条件付きレンダリングを学び、動的なデータ表示や表示の切り替えを実装する方法を紹介します。これにより、複雑なデータ構造を扱う能力が向上します。