フロントエンドカンファレンス関西2025
LT（5分）
WebGL JavaScript（TypeScript）

CanvasにJSXで描く幸せ - PixiJS React

yuma_satake22 Yuma Satake yuma_satake22
1

JSXで書ける！hooksで状態管理できる！描画の自由度も高い！なのにあまり周囲で採用を見ない「PixiJS React」の話をします

PixiJS React は、2D Canvas 向けの高速な WebGL ライブラリ「PixiJS」を React プロジェクトで扱いやすくするためのラッパーです。
パフォーマンスの高さと柔軟な描画力をそのままに、React の世界観で使えるのが大きな特徴です。

  • JSXでいつも通りコンポーネントとして記述できる
  • useStateでReactのライフサイクル上で扱える
  • WebGLの恩恵を手軽に受けられる

実際のプロジェクトでの活用事例をベースに、他のライブラリとの違いや、運用上の工夫・ハマりどころも交えて、その魅力を余すことなくお伝えします！