• はじめに このセクションでは、Reactで関数コンポーネントでのイベント処理について学びましょう。Reactは、ユーザーインターフェースを構築するための人気のあるJavaScriptライブラリです。関数コンポーネントはクラスコンポーネントの代替手段であり、それらの中でイベントを処理することは重要なスキルです。GeekとGalの2人のキャラクターが、楽しく魅力的な形でコンセプトを案内してくれます。
Gal Normal

Reactの関数コンポーネントって知ってるでしょ？

Geek Curious

聞いたことはあるけど、あんまり詳しくないんだよね。関数コンポーネントでイベントをどう処理するか教えてくれる？

Gal Happy

もちろん！関数コンポーネントは、クラスではなく関数を使って作成されるの。関数コンポーネントでイベントを処理するには、イベントハンドラ関数を定義して、イベントリスナーに直接渡すだけでいいのよ。

  • 関数コンポーネントでのイベント処理
Gal Pleased

ボタンがある関数コンポーネントの例を見てみて！ボタンをクリックすると、テキストが変わるんだから！

import React, { useState } from 'react';

function ButtonClick() {
    const [text, setText] = useState('Click the button!');

    function handleClick() {
        setText('Button clicked!');
    }

    return (
        <div>
            <h1>{text}</h1>
            <button onClick={handleClick}>Click me!</button>
        </div>
    );
}

export default ButtonClick;
Geek Happy

なるほど！関数コンポーネントの中に"handleClick"というイベントハンドラ関数を定義して、"onClick"を使ってボタンにイベントハンドラをアタッチするんだね！

Gal Happy

そのとおり！これで、ボタンがクリックされると、"handleClick"関数が呼ばれて、テキストが変わるわ。

  • ユーモラスな例
Geek Curious

関数コンポーネントとイベント処理を使った面白い例はどんなものがある？

Gal Pleased

クリックするとテキストがランダムなメッセージに変わるボタンはどう？それを作ってみよう！


import React, { useState } from 'react';



function RandomMessage() {

    const [message, setMessage] = useState('Click the button for a random message!');



    function handleClick() {

        const messages = ['Hello!', 'Howdy!', 'Greetings!', 'Hey there!', 'Hi!'];

        const randomIndex = Math.floor(Math.random() * messages.length);

        setMessage(messages[randomIndex]);

    }



    return (

        <div>

            <h1>{message}</h1>

            <button onClick={handleClick}>Click me!</button>

        </div>

    );

}



export default RandomMessage;
Geek Happy

ハハ、すごいね！ボタンをクリックするとランダムなメッセージが表示されるコンポーネントを作ったよ！

Gal Happy

楽しんでもらえてうれしいわ！関数コンポーネントとイベント処理を使って、インタラクティブなReactコンポーネントを作成する練習を続けてね！

  • おわりに

関数コンポーネントでのイベント処理は、Reactを扱う上で重要なスキルです。イベントハンドラ関数を定義し、イベントリスナーを使って要素にアタッチすることで、インタラクティブでダイナミックなコンポーネントを作成できます。学習と実験を続けて、素晴らしいウェブアプリを構築しましょう！😄