Zenn
🖼️

React でp5.jsのギャラリーサイト作る( + Vite, React Router, Vercel )

2022/12/09に公開
React
p5.js
React Router
tech

成果物

モチベーション

  • p5.jsの修行をしたい
    • せっかくだから実装したものを人に見せびらかしまくりたい

要件

  • 1ページに1つのp5.jsコンテンツ
    • 1ページに複数おくと重そうなイメージがするのでページわける
  • ベースはVite + React。理由は初期構築が楽そうだから。
  • 以前にp5.jsの習作として波紋を作ったので、これをReactにのせかえて展示できるようにする
    • ちなみにれは普通のhtmlとtsがparcelでバンドルされてる系

実装

準備

  • Vite使います。下記コマンド叩くとFWや言語を聞かれるのでReactとTypeScriptを選択
npm create vite@latest
  • p5系いれます
  • react-p5-wrapperが良さげなので導入します
    • 自作Wrapperも困難ではないようですが、react-p5-wrapperも最近メンテされているので、活用します（2022/12/09現在）
npm i -D p5 @types/p5
npm i react-p5-wrapper
  • ページを分割したいので、react-router系もいれておきます
npm i react-dom react-router-dom
npm i -D @types/react-dom

route作成

  • App.tsxはこんな感じ。お手本と固有名詞が違うだけですね
  • 波紋なので展示ページのパスはrippleにしました
  • 展示品が多くなった時に大変かもという気がしたのですが、展示品を作る時にどうせソースコード触るし、そんな量産できるものでもないので、手作業Routingでいいかなと
  • OGPとかの話は別で考えます。次の記事のネタができたぜ。
App.tsx
import React from 'react'
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import {Home} from './pages/Home'
import {RippleEffect} from './pages/RippleEffect'

export const App: React.FC = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/ripple" element={<RippleEffect />} />
      </Routes>
    </BrowserRouter>
  )
}

p5.js展示ページ作成

  • ReactP5Wrapperの力でとても簡単になりました
  • この時、devで確認するとp5コンテンツが2回描画される症状があるのですがdev環境固有の症状（仕様）でprodでは発生しない ＆ 今回は動作にも影響がないのでそのままにします。
    • そのままにすると影響が出てしまう場合はReact 18(Next.js)でGSAPする > GSAPをhookするためのrefを作成するにて、発火を1回にする方法を記載しているのでご確認ください。GSAPの時はスクロールのエフェクトが二重セットされて動作確認が難しい状態になってしまったのでdevでも1回にしています。
RippleEffect.tsx
import '../App.css'
import { P5CanvasInstance, ReactP5Wrapper } from 'react-p5-wrapper';

// このへんにp5用の関数あるけど割愛

export function RippleEffect() {
  const sketch = (p: P5CanvasInstance) => {
    // p5の処理は割愛
  }

  return (
    <ReactP5Wrapper sketch={sketch}/>
  )
}

Vercel対策

このままデプロイするとVercelがサブページを認識してくれないのでReact（with React Router）プロジェクトをVercelにデプロイした時に出る404エラーを参考にvercel.json もセットしておきない

デプロイ

  • あとはpushしてVercelでなりゆきに身を任せればデプロイ完了です🎉！
  • 完成品
  • react-p5-wrapperにたどり着くまではどうしたらいいんだｳｵｵﾝってしたので、現代は色々なライブラリが揃ってていいですね
  • Svelteでもよかったなと後から調べたのですが、Svelteならp5-svelteだけでまるっと解決できそうだったのでSvelteもアリだったかもしれない…ｸﾞﾇ

Discussion