2025/12/13 21:47 当記事を発行
2025/12/14 11:52 Next.js版に加えReact版の追加、他細かい修正
はじめに
世の中にはカッコいいwebサイトが沢山ありますね。
その中でも私が特に気に入っているのがこのサイト。
この記事は最後まで読まなくても、このサイトには絶対にアクセスしてみることをお勧めします。
感動しますよ、ただのWebサイトにこんなアートがつけられるのかと。
皆さんの中には、自己紹介サイトやポートフォリオサイトを持っている方も多いと思います。
あるいは会社のWebサイトや何かしらのWebアプリの開発経験がある方もいるかもしれません。
そういったWebサイトに、上で紹介したようなメディアアートを付加できたらカッコいいと思いませんか?
今回はp5.jsを使った、Webサイトに手軽にメディアアートを導入する方法のご紹介です。
サンプルプロジェクト
今回サンプルとして利用しているのは、私自身の自己紹介サイト(リポジトリはこちら)です。
実装前がこんな感じで、
実装後がこんな感じ。
WebサイトのフレームワークはNext.jsを使用しています。
依存関係のうち、関係のありそうなものは以下のとおり。
{
...
"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をインストール
npm install p5 @p5-wrapper/react
Next.jsの場合は@P5-wrapper/nextもインストール
npm install @p5-wrapper/next
TypeScriptの場合は型定義ファイルも導入。
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にあるサンプルに少しだけ手を加えたものです。
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にあるサンプルに少しだけ手を加えたものです。
"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} />;
}
適当なページに配置して、その場所にキャンバスが現れたら成功です。
import P5 from "../components/p5-wrapper";
export default function Page() {
return (
...
<P5 />
...
);
};
こんな感じ。
キャンパスが2つ現れた場合、ReactのStrictModeの仕様によるものです。
開発環境だけにしか現れないし、offにすることもできます。
背景にする必要がない場合はこれで完成。
sketch関数内部を書き換えれば、通常のp5.jsと同様にアートやゲームを作成できます。
3. 背景への配置
それでは背景への配置を行います。
スタイルについて、今回はSCSSモジュールを使用していますが、プロジェクトに合わせた方法でスタイルを当ててください。
注意点として、CSSはNextReactP5Wrapper本体ではなく、その親要素に当てます。
背景透明化とサイズ変更はお好みで。
...
+ 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} />;
}
.background {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
こんな感じ。
4. インタラクション
mouseXなどのインタラクション専用のプロパティも、素のp5.js同様に実装できます。
...
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を使ってメディアアートを導入してみてください！