TypeScriptとReact.KonvaでonClickイベント型を指定する
2024-09-19
React.Konvaは、HTML5 Canvas上でインタラクティブなグラフィカル要素を作成するためのReactライブラリです。TypeScriptと組み合わせて使用することで、より型安全な開発が可能になります。
onClickイベントの型指定
React.Konvaでは、onClickイベントハンドラを使用して、グラフィカル要素がクリックされたときの処理を定義します。TypeScriptでは、このイベントハンドラの型を指定することで、コンパイル時にエラーを防ぎ、コードの信頼性を向上させることができます。
基本的な例
import React from 'react';
import { Stage, Layer, Rect } from 'react-konva';
const MyComponent = () => {
const handleClick = (event: Konva.TargetEvent) => {
// クリックされた要素の情報を取得
const target = event.target;
console.log('Clicked:', target.attrs.x, target.attrs.y);
};
return (
<Stage width={300} height={300}>
<Layer>
<Rect x={50} y={50} width={100} height={100} onClick={handleClick} />
</Layer>
</Stage>
);
};
解説
- Konva.TargetEvent
この型は、クリックされた要素に関する情報を提供します。targetプロパティを使用して、クリックされた要素の属性にアクセスできます。 - onClickプロパティ
RectコンポーネントのonClickプロパティに、handleClick関数を指定します。この関数は、クリックイベントが発生したときに呼び出されます。
さらに具体的な例
特定の属性を持つ要素をクリックした場合にのみイベントを処理したい場合、Konva.TargetEventのtargetプロパティを使用して条件分岐を行うことができます。
const handleClick = (event: Konva.TargetEvent) => {
const target = event.target;
if (target.attrs.id === 'myRect') {
// 'myRect'というIDを持つ要素がクリックされた場合の処理
}
};
型の安全性
TypeScriptを使用することで、以下のようなメリットがあります。
- 自動補完
IDEの自動補完機能がより効果的に動作します。 - コードの可読性
型の指定により、コードの意味がより明確になります。 - コンパイル時のエラー検出
型の不一致や誤ったプロパティアクセスを早期に検出できます。
import React from 'react';
import { Stage, Layer, Rect } from 'react-konva';
const MyComponent = () => {
const handleClick = (event: Konva.TargetEvent) => {
// クリックされた要素の情報を取得
const target = event.target;
console.log('Clicked:', target.attrs.x, target.attrs.y);
};
return (
<Stage width={300} height={300}>
<Layer>
<Rect x={50} y={50} width={100} height={100} onClick={handleClick} />
</Layer>
</Stage>
);
};
const handleClick = (event: Konva.TargetEvent) => {
const target = event.target;
if (target.attrs.id === 'myRect') {
// 'myRect'というIDを持つ要素がクリックされた場合の処理
}
};
import React from 'react';
import { Stage, Layer, Rect } from 'react-konva';
const MyComponent = () => {
const handleClick = (event: Konva.TargetEvent) => {
// クリックされた要素の情報を取得
const target = event.target;
console.log('Clicked:', target.attrs.x, target.attrs.y);
};
return (
<Stage width={300} height={300}>
<Layer>
<Rect x={50} y={50} width={100} height={100} onClick={handleClick} />
</Layer>
</Stage>
);
};
代替手法
ジェネリック型を使用する
React.Konvaのコンポーネントは、ジェネリック型を使用してより柔軟な型指定が可能になっています。onClickイベントハンドラにもジェネリック型を使用することで、より具体的な型を指定することができます。
import React from 'react';
import { Stage, Layer, Rect } from 'react-konva';
const MyComponent = () => {
const handleClick = <T extends Konva.Node>(event: Konva.TargetEvent<T>) => {
// クリックされた要素の情報を取得
const target = event.target;
console.log('Clicked:', target.attrs.x, target.attrs.y);
};
return (
<Stage width={300} height={300}>
<Layer>
<Rect x={50} y={50} width={100} height={100} onClick={handleClick} />
</Layer>
</Stage>
);
};
カスタム型を作成する
Konva.TargetEvent型を拡張して、より具体的な情報を提供するカスタム型を作成することもできます。
import React from 'react';
import { Stage, Layer, Rect, TargetEvent } from 'react-konva';
interface MyTargetEvent extends TargetEvent {
myCustomProperty: string;
}
const MyComponent = () => {
const handleClick = (event: MyTargetEvent) => {
// カスタムプロパティにアクセス
console.log('My custom property:', event.myCustomProperty);
};
return (
<Stage width={300} height={300}>
<Layer>
<Rect x={50} y={50} width={100} height={100} onClick={handleClick} />
</Layer>
</Stage>
);
};
条件分岐を使用する
Konva.TargetEventのtargetプロパティを使用して、クリックされた要素の型を判定し、それに応じた処理を行うこともできます。
import React from 'react';
import { Stage, Layer, Rect, Circle } from 'react-konva';
const MyComponent = () => {
const handleClick = (event: Konva.TargetEvent) => {
const target = event.target;
if (target instanceof Rect) {
// Rectがクリックされた場合の処理
} else if (target instanceof Circle) {
// Circleがクリックされた場合の処理
}
};
return (
<Stage width={300} height={300}>
<Layer>
<Rect x={50} y={50} width={100} height={100} onClick={handleClick} />
<Circle x={200} y={100} radius={50} onClick={handleClick} />
</Layer>
</Stage>
);
};
reactjs typescript konvajs
