Reactでイベント処理を行う

2022年5月29日

React でイベント処理を行う

React のチュートリアルの第４回目は、Vue の公式チュートリアル（英語版）と同じで、「ボタン」をクリックしたイベントを検出して処理を行う例です。この例では、ボタンをクリックする度にカウンターを１づつ増やして行く処理を行うやり方を紹介しています。

React と Vue では少し考え方が違う！

Vue の公式チュートリアル（英語版）で同じような課題を紹介していますが、Vue の場合は、単に Javascript の部分で変数を宣言して、その変数に対する処理を実装するだけでしたが、React の場合は少し考え方が違います。
React の場合には、「特別な変数」を作って、その変数に対する処理を行います。これが大きな違いです。このように実装しないと、変数の値が更新されても表示が更新されないような仕組みになっています。

特別な変数は、「useState()」を使って宣言する！

React の場合には、この特別な変数は、 useState()という関数を使って宣言します。今回は、クリックされた回数を数える変数「count」を使いますが、変数の宣言は以下のように行います。

const [count, setCount] = useState(0);

count: クリックされた回数を示す変数の名前
setCount: 変数を更新する関数の名前

これで、指定された関数で変数を更新するような形で実装します。変数の宣言もこの二つをペアにする形で行います。さらに、「useState(0)」で変数の初期値を設定します。

以下が今回の課題を実装した例です。

import React, { useState } from "react";
import "./styles/step4.css";
export default function Step4(): JSX.Element {
  const [count, setCount] = useState(0);
  return (
    <React.Fragment>
      <div className="step4">
        <button className="btn btn-primary" onClick={() => increment()}>
          count is {count}
        </button>
      </div>
    </React.Fragment>
  );
  function increment(): void {
    setCount(count + 1);
  }
}

ポイントは、HTML に相当する記述（JSX）でボタンを作って、ボタンが押された際に、関数「increment()」を呼び出して、変数「count」を１づつ増やす処理をしています。

今回は、具体的なコードは載せていませんが、CSS には、「./styles/step4.css」を指定して、さらに、Bootstrapを利用して、ボタンの装飾を簡素化しています。

React と Vue で考え方が違う大きな理由は、React の場合には、表示の記述を JSX（HTML に相当する部分）という形で Typescript(Javascript)の中に書くため、表示に使う変数と、プログラムのみで使う変数の区別をするために、明示的に書くようにしているためです。

別の書き方

上の挙げた例では、React の「Hooks」というやり方で記述する方法で、React の部品を「関数」として扱う方法です。最近では、この書き方で書くケースの方が多くなっているように思います。

別の書き方として、「class」形式で書く方法もあります。上と同じような事を行うコードの例は以下のようになります。

import React from "react";
import "./styles/step4.css";
interface IProps {}
interface IState {
  count: number;
}
export default class Step4 extends React.Component<IProps, IState> {
  constructor(props: IState) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  increment(): void {
    this.setState({
      count: this.state.count + 1,
    });
  }
  render(): JSX.Element {
    return (
      <React.Fragment>
        <div className="step4">
          <button className="btn btn-primary" onClick={() => this.increment()}>
            count is {this.state.count}
          </button>
        </div>
      </React.Fragment>
    );
  }
}

「class」は、Typescript(Javascript)でオブジェクト指向プログラミング（Object Orientied Programming）を書く場合の書き方で、「部品」と部品の機能に関する「操作」をまとめてクラス（class）に書く方法です。

React ではあらかじめ「React の部品（React.Component）」というクラスが決められていて、それを拡張する形で記述するようになっています。そして、その部品に関連した操作、この例では、ボタンを押したら変数「count」を１づつ増やす処理をメソッド（method）としてクラスの中に書く方法です。

この二つを比べると、基本的な記述はほぼ同じですが、変数やメソッド（関数）の参照が、クラス（class）の一部になるために、「this」を使った、記述になる点などが違っています。

どちらの書き方の方が良いのか？

二つの別の書き方があると、どちらの書き方を使ったら良いのか迷うかと思います。基本的には、どちらかの書き方で「動くプログラム」を書ければ問題はないという事になります。しかし、初めて React を学習する場合にどちらが良いかということになると、最近の傾向を見ると、「Hook」を使った書き方をするケースの方が多いように思います。
理由は幾つかありますが、Typescript の利用を考えた場合、「React Hook」の方が相性が良いと言えます。特に、将来的に Redux などを使って、「部品」間でデータの共有を考えた場合、React Hook を使った方がコードがシンプルです。
細かい理由は他にもありますが、これから React を学習される方で、どちらを最初にマスターしたら良いかという点で考えるならば、まずは、React Hook の書き方をマスターした方が便利な事が多いかと思います。その上で余裕があれば、Class の書き方を学習されて違いを理解するという順番が良いかと思います。

まとめ

今回の課題自体は、ボタンをクリックした時にカウンタの変数の値を１づつ増やしてカウンターのボタンの表示に入れるというシンプルなものでした。実装自体はとても簡単でシンプルです。そこでこの記事では、React の部品の書き方は大きく二つのスタイルがあることを紹介しています。 React の部品は、React Hook と Class による書き方が可能です。
機能の実現ができれば、どちらを使っても良いわけですが、これから React を学習する場合には、まずは、「React Hook」のスタイルを中心に学習されることをこの記事ではお勧めしています。まずは、現在主流になっているスタイルをもとに使い方をマスターするのが大切という事です。その上で余裕があれば、別の方法も試してみるというのが効率的に学習を進めるコツです！

このブログを検索

シリコンバレースーパーウエア