LabEx
ログイン登録

React イベントハンドリング

ReactBeginner
オンラインで実践に進む

はじめに

Web 開発において、イベントハンドリングとは、クリック、キープレス、マウス移動などのユーザーアクションに応答するプロセスです。React は、これらのイベントをシンプルかつ宣言的に処理する方法を提供し、アプリケーションをインタラクティブにします。

React のイベントシステムは、ブラウザのネイティブイベントシステムのラッパーです。イベント名は、onclickではなくonClickのように、キャメルケースで記述されます。イベントハンドラとしては、文字列ではなく関数を渡します。

この実験（Lab）では、React でのイベントハンドリングの基本を学びます。シンプルなボタンから始め、クリックイベントの処理、イベントデータのアクセス、デフォルトのブラウザ動作の制御といった機能を段階的に追加していきます。

この実験（Lab）の終わりには、以下のことができるようになります。

  • ボタンにonClickイベントハンドラをアタッチする。
  • コンポーネント内でハンドラ関数を定義する。
  • ハンドラ関数をイベント属性に正しく渡す。
  • イベントオブジェクトにアクセスしてイベントに関する情報を取得する。
  • event.preventDefault()を使用してデフォルトのブラウザアクションを防ぐ。

ボタン要素に onClick 属性を追加する

このステップでは、まず開発環境をセットアップし、次にボタン要素にonClick属性を追加します。これは、React で要素をインタラクティブにするための最初のステップです。

まず、プロジェクトディレクトリに移動し、必要な依存関係をインストールして、開発サーバーを開始しましょう。

WebIDE でターミナルを開き、以下のコマンドを一つずつ実行してください。

cd my-app

npm install

npm run dev -- --host 0.0.0.0 --port 8080

npm run devを実行すると、開発サーバーが実行中であることを示す出力が表示されます。これで、LabEx インターフェースのWeb 8080タブに切り替えることで、アプリケーションを表示できます。「Click me」というシンプルなボタンが表示されるはずです。

次に、イベントハンドラを追加しましょう。WebIDE の左側にあるファイルエクスプローラーからsrc/App.jsxファイルを開きます。

現在、src/App.jsxファイルは以下のようになっています。

function App() {
  return <button>Click me</button>;
}

export default App;

クリックに応答するには、<button>要素にonClick属性を追加する必要があります。React では、イベント属性はキャメルケースで記述されます。今回は、空のインラインアロー関数を渡します。

src/App.jsxの<button>要素を以下のように変更してください。

function App() {
  return <button onClick={() => {}}>Click me</button>;
}

export default App;

ファイルを保存します。現時点ではボタンをクリックしても何も表示されませんが、イベントリスナーを正常にアタッチできました。

コンポーネント内にハンドラ関数を定義する

このステップでは、クリックイベントを処理するための専用関数をコンポーネント内に定義します。これは、JSX をきれいに保ち、ロジックを整理するための一般的なプラクティスです。

JSX のonClick属性内に直接ロジックを記述する代わりに、別の関数を定義する方が良いでしょう。handleClickという名前の関数を作成しましょう。

src/App.jsxファイル内で、Appコンポーネントのreturnステートメントの前にhandleClick関数を定義します。現時点では、この関数はコンソールにメッセージをログ出力するだけです。

src/App.jsxファイルを以下のコードで更新してください。

function App() {
  function handleClick() {
    console.log("Button was clicked!");
  }

  return <button onClick={() => {}}>Click me</button>;
}

export default App;

この時点ではhandleClick関数を定義しましたが、まだボタンのonClickイベントには接続されていません。次のステップでは、この関数をonClick属性に渡す方法を学びます。

onClick にハンドラを括弧なしで渡す

このステップでは、定義したhandleClick関数をボタンのonClickイベントに接続します。関数を呼び出した結果ではなく、関数参照自体を渡すことが非常に重要です。

handleClick関数をイベントハンドラとして使用するには、波括弧{}内のonClick属性に渡す必要があります。

src/App.jsxの<button>要素を、onClickにhandleClickを渡すように変更してください。

function App() {
  function handleClick() {
    console.log("Button was clicked!");
  }

  return <button onClick={handleClick}>Click me</button>;
}

export default App;

onClick={handleClick()}ではなく、onClick={handleClick}と記述していることに注意してください。

  • onClick={handleClick}は関数自体を渡します。React はボタンがクリックされたときにこの関数を呼び出します。
  • onClick={handleClick()}は、コンポーネントがレンダリングされたときにすぐにこの関数を呼び出し、その戻り値（この場合はundefined）をonClickに渡してしまいます。これは初心者がよく犯す間違いです。

それでは、テストしてみましょう。

  1. src/App.jsxファイルを保存します。
  2. Web 8080タブに移動します。
  3. ブラウザの開発者コンソールを開きます。ページを右クリックし、「検証」を選択してから「コンソール」タブをクリックすると開けます。
  4. 「Click me」ボタンをクリックします。

ボタンをクリックするたびに、コンソールに「Button was clicked!」というメッセージが表示されるはずです。

Console output showing button click message

ハンドラパラメータでイベントオブジェクトにアクセスする

このステップでは、React がイベントハンドラに自動的に渡すイベントオブジェクトにアクセスする方法を学びます。このオブジェクトには、ユーザーの操作に関する有用な情報が含まれています。

React は、ブラウザネイティブイベントのクロスブラウザラッパーである「合成イベント」オブジェクトを、各イベントハンドラの最初の引数として渡します。これにより、一貫した API が提供されます。

それにアクセスするには、handleClick関数にパラメータを追加する必要があります。慣例としてeventまたはeという名前が付けられます。このパラメータを受け入れてコンソールにログ出力するように関数を変更しましょう。

src/App.jsxファイルを更新してください。

function App() {
  function handleClick(event) {
    console.log(event);
  }

  return <button onClick={handleClick}>Click me</button>;
}

export default App;

ファイルを保存し、Web 8080タブに戻ってください。開発者コンソールが開いていることを確認してください。ボタンをクリックすると、単純な文字列は表示されなくなります。代わりに、コンソールにSyntheticBaseEventオブジェクトがログ出力されます。

Console log showing React synthetic event object

コンソールでこのオブジェクトを展開して、そのプロパティを調べることができます。例えば、以下のようなものがあります。

  • event.type: イベントのタイプ（例：「click」）。
  • event.target: イベントをトリガーした DOM 要素（<button>）。

このイベントオブジェクトは強力で、情報を読み取ったり、イベントの動作を制御したりすることができます。

event.preventDefault() でデフォルトの動作を防ぐ

このステップでは、イベントに関連付けられたブラウザのデフォルト動作を防止する方法を学びます。これは、特にフォーム送信を処理する場合に、よく必要とされる操作です。

一部のブラウザイベントには、デフォルトのアクションがあります。例えば、リンクをクリックすると新しいページに移動し、<form>内の送信ボタンをクリックするとフォームが送信され、通常はページがリロードされます。

これを実証するために、ボタンを<form>要素で囲んでみましょう。デフォルトでは、フォーム内のボタンをクリックするとフォーム送信がトリガーされます。

src/App.jsxを更新して<form>タグを含めてください。

function App() {
  function handleClick(event) {
    console.log(event);
  }

  return (
    <form>
      <button onClick={handleClick}>Click me</button>
    </form>
  );
}

export default App;

これを保存して今ボタンをクリックすると、ページがリロードされ、コンソールログが一瞬表示されて消えることに気づくでしょう。これはフォームのデフォルトの送信動作です。

これを防ぐには、ハンドラ内でevent.preventDefault()を呼び出すことができます。このメソッドは、ブラウザにデフォルトのアクションを実行しないように指示します。

handleClick関数をevent.preventDefault()を呼び出すように変更してください。

function App() {
  function handleClick(event) {
    event.preventDefault();
    console.log("Form submission prevented!");
  }

  return (
    <form>
      <button onClick={handleClick}>Click me</button>
    </form>
  );
}

export default App;

ファイルを保存して、もう一度試してください。これで、Web 8080タブのボタンをクリックしても、ページはリロードされません。コンソールには「Form submission prevented!」というメッセージが一貫してログ出力されるはずです。イベントの動作を正常に制御できるようになりました。

まとめ

実験完了おめでとうございます！React におけるイベントハンドリングの基本的な概念を習得しました。

この実験では、以下の方法を実践しました。

  • JSX でonClick属性を使用して、ユーザーのクリックをリッスンする方法。
  • コンポーネント内にイベントハンドラ関数を定義して、コードを整理する方法。
  • 関数参照をイベントハンドラプロップに正しく渡す方法。レンダリング中に関数を呼び出してしまう一般的な落とし穴を避ける方法。
  • React が提供する合成イベントオブジェクトにアクセスする方法。これには、ユーザーの操作に関する貴重な情報が含まれています。
  • event.preventDefault()を使用してブラウザのデフォルトアクションを停止し、ユーザーエクスペリエンスを完全に制御する方法。

これらのスキルは、React でインタラクティブでダイナミックなユーザーインターフェースを構築するために不可欠です。これらの原則を応用して、入力用のonChange、ホバー効果用のonMouseOverなど、他の多くのイベントを処理することができます。

関連 React コース
初心者向け React

初心者向け React

reactjavascriptweb-development
React を使用したノートアプリの作成

React を使用したノートアプリの作成

reactjavascriptweb-development
React でクリスマスウィッシュリストビルダーを構築する

React でクリスマスウィッシュリストビルダーを構築する

reactjavascriptweb-development