NextとReactでp5jsを使ってみる

はじめに 前々からp5jsを使ってみたいと思っていましたが、なかなか手が出せないでいるうちに1年くらい経ってしまいました。 p5jsで調べてみるとjs単体で使用する方法は多くヒットしますが、webアプリケーションに組み込んだ技術記事は多くありません。 なので今回はNext上でp5jsを使用して表示させる方法について記載します。 （Next上でReactコンポーネントとしてp5jsを利用できれば、より表現の幅が広がりそうですしね。） 最終的にできること p5jsのExampleに書かれているコードをNext上で動かすことを目標にします。 Nextの環境構築については省略しますが、create-next-appで作成すれば、ほぼ同様な環境が出来上がります。 最終的には以下のような表示ができることを目指します。 そもそもp5jsとは これ系の記事で散々説明されてるので簡単に説明します。 必要なけ