ReactJS - イベント管理
こんにちは、将来のReact開発者さんたち！今日は、ReactJSにおけるイベント管理の面白い世界に飛び込みます。あなたの近所の親切なコンピュータサイエンスの先生として、この旅を案内するのを楽しみにしています。プログラミングが初めてでも心配しないでください - 基礎から始めて少しずつ進めていきます。で、コーヒー（またはあなたが好きなお茶）を一杯取り、始めましょう！
ReactJSにおけるイベント管理
イベントはインタラクティブなウェブアプリケーションの命です。宇宙船のコクピットのボタンやレバーのように、物を動かします！ReactJSでのイベント管理は、クリック、キー押下、フォームの送信などのユーザーとのインタラクションを処理する方法です。
シンプルなクリッカーゲームを想象してみてください。ユーザーがボタンをクリックするたびにスコアを増やしたいですよね。それがイベント管理の便利なところです！
シンセティックReactイベント
コードに飛び込む前に、Reactに特有のことを話しましょう：シンセティックイベント。これは、Reactが異なるブラウザ間でイベントが一貫して動作するようにする方法です。アプリのためにユニバーサル翻訳機を持っているようなものです！
Reactはブラウザのネイティブイベントをラップし、一貫したインターフェースを提供します。これにより、イベント処理時にブラウザ特有のクィркに悩まされる必要がなくなります。
イベントの追加
簡単な例から始めましょう。クリックするとアラートを表示するボタンを作成します。
function AlertButton() {
return (
<button onClick={() => alert('You clicked me!')}>
Click me!
</button>
);
}この例では：
-
AlertButtonという関数コンポーネントを定義します。 - コンポーネント内で、
<button>要素を返します。 - ボタンに
onClick属性を追加し、イベントリスナーをアタッチします。 -
onClick属性は、alert()関数を呼び出すアロー関数に設定されています。
このコンポーネントをレンダーしてボタンをクリックすると、「You clicked me!」というアラートが表示されます。
イベントの処理
もう少し面白くしてみましょう。アラートを表示する代わりに、ボタンをクリックしたときにコンポーネントの状態を更新します。
import React, { useState } from 'react';
function ClickCounter() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<p>You've clicked {count} times</p>
<button onClick={handleClick}>
Click me!
</button>
</div>
);
}このことを分解すると：
-
useStateをReactからインポートして、コンポーネントの状態を管理します。 -
ClickCounterという関数コンポーネントを定義します。 - コンポーネント内で、
useState(0)を使って初期値0の状態変数countとそれを更新するための関数setCountを作成します。 -
handleClick関数を定義し、setCountを呼び出してカウントをインクリメントします。 - JSX内で、現在のカウントとボタンを表示します。
- ボンの
onClick属性はhandleClick関数に設定されています。
ボタンをクリックするたびに、カウントが1増えます！
イベントハンドラに引数を渡す
時々、イベントハンドラに追加情報を渡したい場合があります。複数のボタンがあり、それぞれ異なる果物に関連付けられている例を見てみましょう。
import React, { useState } from 'react';
function FruitPicker() {
const [selectedFruit, setSelectedFruit] = useState('');
const handleFruitClick = (fruit) => {
setSelectedFruit(fruit);
};
return (
<div>
<h2>Pick a fruit:</h2>
<button onClick={() => handleFruitClick('Apple')}>Apple</button>
<button onClick={() => handleFruitClick('Banana')}>Banana</button>
<button onClick={() => handleFruitClick('Cherry')}>Cherry</button>
<p>You selected: {selectedFruit}</p>
</div>
);
}この例では：
- 状態変数
selectedFruitを作成して選択された果物を追跡します。 -
handleFruitClick関数はfruitパラメータを受け取ります。 - 各ボンの
onClick属性で、適切な果物名を引数にしてhandleFruitClickを呼び出します。
ボタンをクリックすると、選択された果物の名前がselectedFruit状態に更新されます。
一般的なReactイベント
以下は、使用する可能性のある一般的なReactイベントの表です：
| イベント名 | 説明 |
|---|---|
| onClick | 要素がクリックされたときにトリガーされる |
| onChange | インプット要素の値が変更されたときにトリガーされる |
| onSubmit | フォームが送信されたときにトリガーされる |
| onMouseEnter | マウスが要素にEnterしたときにトリガーされる |
| onMouseLeave | マウスが要素からLeaveしたときにトリガーされる |
| onKeyDown | キーが押下されたときにトリガーされる |
| onKeyUp | キーが解放されたときにトリガーされる |
| onFocus | 要素がフォーカスを受け取ったときにトリガーされる |
| onBlur | 要素がフォーカスを失ったときにトリガーされる |
覚えておいてください、これらのイベントはReactではキャメルケースで表記され、HTMLの対照的なローワースケースとは異なります。
そして、それがすべて、皆さん！Reactのイベント管理の世界への第一歩を踏み出しました。これらの例で練習し、異なる概念を組み合わせてみてください。間もなく、プロのようにインタラクティブなReactアプリケーションを作成できるようになるでしょう！
覚えておいてください、プログラミング也好人生也好、鍵は実験と学びです。間違えを恐れず - それは成功へのステップです。ハッピーコーディング、そしてReactがあなたと共にあります！
Credits: Image by storyset