【React.Konva & TypeScript】 onClickイベントにアロー関数 & on プロパティ、使い分け徹底解説

2024-05-05

React.Konva で TypeScript を使用して onClick イベントタイプを指定する方法

概要

React.Konva は、Konva.js ライブラリを React コンポーネントとシームレスに統合するためのライブラリです。 Konva.js は、HTML キャンバスを使用して 2D グラフィックスとアニメーションを作成するためのライブラリです。

TypeScript は、JavaScript に静的型付けを追加するスーパーセット言語です。型付けにより、コードの読みやすく、保守しやすく、エラーが発生しにくくなります。

このチュートリアルでは、React.Konva と TypeScript を使用して、onClick イベントタイプをどのように指定できるかを説明します。

手順

ReactKonvaCore.d.ts ファイルをインポートする

最初に、ReactKonvaCore.d.ts ファイルをインポートする必要があります。このファイルには、React.Konva コンポーネントの型定義が含まれています。

import * as React from 'react';
import { KonvaEventObject, Shape } from 'react-konva';

onClick イベントハンドラを定義する

次に、onClick イベントハンドラを定義します。このハンドラーは、KonvaEventObject 型の引数を受け取ります。このオブジェクトには、クリックイベントに関する情報が含まれています。

const onClick: (event: KonvaEventObject<Shape>) => void = (event) => {
  // イベント処理
};

最後に、onClick プロパティにイベントハンドラを渡して、Konva コンポーネントに割り当てます。

const MyComponent: React.FC = () => {
  return (
    <Rect
      width={100}
      height={50}
      fill="red"
      onClick={onClick}
    />
  );
};

例

次の例は、onClick イベントハンドラを使用して、クリックされた四角形の色を変更する方法を示しています。

import * as React from 'react';
import { KonvaEventObject, Rect } from 'react-konva';

const onClick: (event: KonvaEventObject<Rect>) => void = (event) => {
  const shape = event.target;
  shape.fill = 'blue';
};

const MyComponent: React.FC = () => {
  return (
    <Rect
      width={100}
      height={50}
      fill="red"
      onClick={onClick}
    />
  );
};

React.Konva で TypeScript を使用して onClick イベントタイプを指定する - サンプルコード

import * as React from 'react';
import { KonvaEventObject, Rect } from 'react-konva';

const onClick: (event: KonvaEventObject<Rect>) => void = (event) => {
  const shape = event.target;
  shape.fill = 'blue';
};

const MyComponent: React.FC = () => {
  return (
    <Rect
      width={100}
      height={50}
      fill="red"
      onClick={onClick}
    />
  );
};

export default MyComponent;

このコードの説明:

event.target は、クリックされたシェイプを取得します。
shape.fill = 'blue' 行は、シェイプの色を青に変更します。
MyComponent コンポーネントは、Rect シェイプをレンダリングします。
onClick プロパティに onClick 関数を渡して、シェイプにクリックイベントハンドラを割り当てます。

このサンプルコードをどのように実行できますか？

このサンプルコードを実行するには、次の手順を実行する必要があります。

Node.js と npm をインストールします。
次のコマンドを使用して、新しい React プロジェクトを作成します。

npx create-react-app my-app

cd my-app コマンドを使用して、新しく作成したプロジェクトディレクトリに移動します。
MyComponent.tsx という名前の新しいファイルをプロジェクトディレクトリに作成します。
上のサンプルコードを MyComponent.tsx ファイルに貼り付けます。
次のコマンドを実行して、開発サーバーを起動します。

npm start

ブラウザで http://localhost:3000 に移動すると、赤い四角形が表示されます。四角形をクリックすると、青色になります。

追加の例

import * as React from 'react';
import { KonvaEventObject, Rect } from 'react-konva';

const onClick: (event: KonvaEventObject<Rect>) => void = (event) => {
  const { x, y } = event.target.position();
  console.log(`クリックされた座標: (${x}, ${y})`);
};

const MyComponent: React.FC = () => {
  return (
    <Rect
      width={100}
      height={50}
      fill="red"
      onClick={onClick}
    />
  );
};

export default MyComponent;

このコードは、event.target.position() メソッドを使用して、クリックされたシェイプの位置を取得します。次に、console.log() 関数を使用して、位置をコンソールに記録します。

このサンプルコードを拡張して、クリックされたシェイプをドラッグできるようにしたり、クリックされたシェイプを削除できるようにしたりすることができます。

React.Konva で TypeScript を使用して onClick イベントタイプを指定する - 他の方法

前のチュートリアルでは、onClick イベントハンドラを定義して、onClick プロパティに渡す方法について説明しました。これは、onClick イベントタイプを指定する 1 つの方法です。

アロー関数を使用する

onClick プロパティにアロー関数を渡すこともできます。アロー関数は、より簡潔で読みやすいコードを作成するために使用できます。

const MyComponent: React.FC = () => {
  return (
    <Rect
      width={100}
      height={50}
      fill="red"
      onClick={(event: KonvaEventObject<Rect>) => {
        const shape = event.target;
        shape.fill = 'blue';
      }}
    />
  );
};

on プロパティを使用する

onClick イベントタイプを指定するには、on プロパティを使用することもできます。 on プロパティは、イベントハンドラを定義するために使用できるオブジェクトです。

const MyComponent: React.FC = () => {
  return (
    <Rect
      width={100}
      height={50}
      fill="red"
      on={{
        click: (event: KonvaEventObject<Rect>) => {
          const shape = event.target;
          shape.fill = 'blue';
        },
      }}
    />
  );
};

使用する方法は、個人の好みとコードスタイルの好みによって異なります。アロー関数がより簡潔で読みやすいコードを作成するため、多くの開発者はアロー関数を使用することを好んでいます。ただし、on プロパティを使用してイベントをより詳細に制御することもできます。

その他のヒント

イベントオブジェクトのプロパティにアクセスするには、event.target または event.currentTarget プロパティを使用できます。
イベントオブジェクトのメソッドにアクセスするには、event.preventDefault() または event.stopPropagation() メソッドを使用できます。
イベントオブジェクトに関する詳細については、React.Konva ドキュメントを参照してください。

このチュートリアルでは、React.Konva と TypeScript を使用して onClick イベントタイプを指定する 3 つの方法について説明しました。これらの方法はすべて有効であり、使用する方法は、個人の好みとコードスタイルの好みによって異なります。

reactjs typescript konvajs