2025/12/13 21:47 当記事を発行
2025/12/14 11:52 Next.js版に加えReact版の追加、他細かい修正

はじめに

世の中にはカッコいいwebサイトが沢山ありますね。
その中でも私が特に気に入っているのがこのサイト。
この記事は最後まで読まなくても、このサイトには絶対にアクセスしてみることをお勧めします。
感動しますよ、ただのWebサイトにこんなアートがつけられるのかと。

皆さんの中には、自己紹介サイトやポートフォリオサイトを持っている方も多いと思います。
あるいは会社のWebサイトや何かしらのWebアプリの開発経験がある方もいるかもしれません。
そういったWebサイトに、上で紹介したようなメディアアートを付加できたらカッコいいと思いませんか?
今回はp5.jsを使った、Webサイトに手軽にメディアアートを導入する方法のご紹介です。

サンプルプロジェクト

今回サンプルとして利用しているのは、私自身の自己紹介サイト(リポジトリはこちら)です。
実装前がこんな感じで、

実装後がこんな感じ。

WebサイトのフレームワークはNext.jsを使用しています。
依存関係のうち、関係のありそうなものは以下のとおり。

package.json

{
  ...
  "dependencies": {
    "@p5-wrapper/next": "^3.0.1", // 今回導入
    "@p5-wrapper/react": "^5.0.2", // 今回導入
    "next": "^16.0.10",
    "p5": "^2.1.1", // 今回導入
    "react": "^19.2.3",
    "react-dom": "^19.2.3",
  },
  "devDependencies": {
    "@types/node": "^24.10.3",
    "@types/p5": "^1.7.7", // 今回導入
    "@types/react": "^19.2.7",
    "@types/react-dom": "^19.2.3",
    "sass": "^1.96.0",
    "typescript": "^5.9.3"
  },
  ...
}

実装

1. p5.jsと関連パッケージのイントール

p5.jsの導入にはラッパーライブラリ(@P5-wrapper/reactと@P5-wrapper/next)を使用します。

まずはp5.jsと@P5-wrapper/reactをインストール

shell

npm install p5 @p5-wrapper/react

Next.jsの場合は@P5-wrapper/nextもインストール

shell

npm install @p5-wrapper/next

TypeScriptの場合は型定義ファイルも導入。

shell

npm install --save-dev @types/p5

注意点

@P5-wrapper/reactは2025/12/13現在、バージョン5系までがリリースされています。

peerDepsは次の通り。

5系

"peerDependencies": {
  "p5": ">= 2.0.0",
  "react": ">= 19.0.0",
  "react-dom": ">= 19.0.0"
}

4系

"peerDependencies": {
  "p5": ">= 1.4.1",
  "react": ">= 18.2.0",
  "react-dom": ">= 18.2.0"
}

特に4系は、p5.js 2系以降やReact 19系以降と共存するか怪しいです。

peerDepsに記載のメジャーバージョンに合わせることをお勧めします。

2. コンポーネントの作成

環境が揃ったら、早速試しにp5のキャンバスを表示するコンポーネントを作成してみましょう。

@p5-wrapper/reactのREADMEにあるサンプルに少しだけ手を加えたものです。

p5-wrapper.tsx

import * as React from "react";
import { P5Canvas, type Sketch } from "@p5-wrapper/react";

const sketch: Sketch = (p5) => {
  p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);

  p5.draw = () => {
    p5.background(250);
    p5.normalMaterial();
    p5.push();
    p5.rotateZ(p5.frameCount * 0.01);
    p5.rotateX(p5.frameCount * 0.01);
    p5.rotateY(p5.frameCount * 0.01);
    p5.plane(100);
    p5.pop();
  };
};

export function App() {
  return <P5Canvas sketch={sketch} />;
}

Next.jsの場合はこちら。
@p5-wrapper/nextのREADMEにあるサンプルに少しだけ手を加えたものです。

p5-wrapper.tsx

"use client";

import { type Sketch } from "@p5-wrapper/react";
import { NextReactP5Wrapper } from "@p5-wrapper/next";

const sketch: Sketch = (p5) => {
  p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);

  p5.draw = () => {
    p5.background(250);
    p5.normalMaterial();
    p5.push();
    p5.rotateZ(p5.frameCount * 0.01);
    p5.rotateX(p5.frameCount * 0.01);
    p5.rotateY(p5.frameCount * 0.01);
    p5.plane(100);
    p5.pop();
  };
};

export default function Page() {
  return <NextReactP5Wrapper sketch={sketch} />;
}

適当なページに配置して、その場所にキャンバスが現れたら成功です。

page.tsx

import P5 from "../components/p5-wrapper";

export default function Page() {
  return (
    ...
    <P5 />
    ...
  );
};

こんな感じ。

キャンパスが2つ現れた場合、ReactのStrictModeの仕様によるものです。
開発環境だけにしか現れないし、offにすることもできます。

背景にする必要がない場合はこれで完成。
sketch関数内部を書き換えれば、通常のp5.jsと同様にアートやゲームを作成できます。

3. 背景への配置

それでは背景への配置を行います。

スタイルについて、今回はSCSSモジュールを使用していますが、プロジェクトに合わせた方法でスタイルを当ててください。
注意点として、CSSはNextReactP5Wrapper本体ではなく、その親要素に当てます。

背景透明化とサイズ変更はお好みで。

p5-wrapper.tsx

...

+ import styles from "./p5-wrapper.module.scss"; // スタイルのインポート

const sketch: Sketch = (p5) => {
  p5.setup = () =>
+     p5.createCanvas(window.innerWidth, window.innerHeight, p5.WEBGL); // 画面サイズに合わせる
-     p5.createCanvas(600, 400, p5.WEBGL);

  p5.draw = () => {
+     p5.clear(); // 背景の透明化
-     p5.background(250);
    p5.normalMaterial();
    p5.push();
    p5.rotateZ(p5.frameCount * 0.01);
    p5.rotateX(p5.frameCount * 0.01);
    p5.rotateY(p5.frameCount * 0.01);
+     p5.plane(500); // サイズ変更
-     p5.plane(100);
    p5.pop();
  };
};

export default function Page() {
+   // スタイルの適用
+   return (
+     <div className={styles.background}>
+       <P5Canvas sketch={sketch} /> {/* Next.jsの場合は NextReactP5Wrapper */}
+     </div>
+   );
-   return <P5Canvas sketch={sketch} />;
}

p5-wrapper.module.scss

.background {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

こんな感じ。

4. インタラクション

mouseXなどのインタラクション専用のプロパティも、素のp5.js同様に実装できます。

p5-wrapper.tsx

...

  p5.draw = () => {
    p5.clear();
    p5.normalMaterial();
    p5.push();
    p5.rotateZ(p5.frameCount * 0.01);
+     p5.rotateX(p5.mouseY * 0.01);
+     p5.rotateY(p5.mouseX * 0.01);
-     p5.rotateX(p5.frameCount * 0.01);
-     p5.rotateY(p5.frameCount * 0.01);
    p5.plane(500);
    p5.pop();
  };

...

こんな感じ。

余談

当記事はLife is Tech ! Mentors Advent Calendar 202513日目の記事として執筆しました。
つまり執筆日も決まっていたのですが、当記事で用いていた@P5-wrapper/reactは、なんと本日2025/12/13の朝9:52にバージョン5系が正式リリース、特に依存パッケージの周りに大幅な変更がありました。
ラッキーっちゃラッキーなのですが、予定がものすごく狂った。
大慌てで変更内容を確認しつつ、当初の想定から大きく変更して記事を書き上げました。
勘弁してくれ。

まとめ

今回はp5.jsとラッパーライブラリを使って、Next.jsのWebサイトに手軽にメディアアートを導入する方法をご紹介しました。
さあ、あとは皆さんの創造力を存分に発揮するだけ。

私自身の自己紹介サイトも色々と試行錯誤して、現在はこんな感じになってます。
私はメディアアート初心者ですが、p5.jsはとっても簡単で思い通りになんでも作れる。
AI開発とも相性がよく、考えを日本語に書き下すだけで想像通りのアートが簡単にできてしまいます。

自身のWebサイトを持っている方、それがいまいちパッとしないなと感じている方は、是非当記事を参考に、p5.jsを使ってメディアアートを導入してみてください！