はじめに
以前、『(新)Reactでp5.jsを使う手順』と題して React で p5.js を扱うための手順をまとめた記事を投稿しました。
本記事ではその手順を少なくして、まとめた内容になります。詳細な内容を理解したい場合は上記の記事をご確認ください。また、本記事は Git Bash 上で利用できるコマンドを使っています。Linux のコマンドを利用できる環境が整っていない方 (特に Windows の方) はご留意ください。
ディレクトリの構築
コマンドを利用してプロジェクトに必要なフォルダとファイルを一気に作成していきます。ターミナルを起動して次のコマンドを実行してください。プロジェクト名 と SampleSketch.js はお好みの名前で構いません。このターミナルは後ほども利用するので、閉じずに起動したままにしてください。
# ワークスペースの作成
mkdir プロジェクト名
cd プロジェクト名
# package.json の作成
npm init -y
# 静的なアセットを管理するフォルダ
mkdir public
# HTML文書
touch ./public/index.html
# Reactアプリケーションに関するファイルを管理するフォルダ
mkdir src
# エントリーポイント
touch ./src/index.js
# メインコンポーネント
touch ./src/App.js
# スケッチ用のコンポーネント
touch ./src/SampleSketch.js
パッケージの導入
package.json の編集
package.json をテキストエディタで開いて次の内容に変更してください。
{
"name": "プロジェクト名",
"version": "1.0.0",
"description": "",
"main": "index.js",
"homepage": "https://アカウント名.github.io/リポジトリ名/",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"rm": "rm -rf docs",
"mv": "mv build docs",
"git": "git add . && git commit && git push origin main",
"deploy": "npm run rm && npm run build && npm run mv && npm run git"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"p5": "^1.9.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1"
}
}
パッケージのインストール
先ほどから起動しているターミナルで次のコマンドを実行してください。これで、react と react-dom、react-scripts、p5 パッケージがインストールされます。インストールには時間がかかるので、コマンドの実行後は次の作業に移ってください。
npm install
ソースファイルの編集
作成したファイルの内容をそれぞれ次のように変更してください。
public フォルダ
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文書の文字エンコーディングをUTF-8に指定 -->
<meta charset="UTF-8">
<!-- ページのタイトルを指定 -->
<title>サンプルスケッチ</title>
</head>
<body>
<!-- Reactアプリケーションが描画されるルート要素の定義 -->
<div id="root"></div>
</body>
</html>
src フォルダ
index.js
// ReactおよびReactDOMをインポート
import React from 'react';
import ReactDOM from 'react-dom/client';
// Appコンポーネントを'./App'からインポート
import App from './App';
// ルート要素を特定のDOM要素に関連付ける
const root = ReactDOM.createRoot(document.getElementById('root'));
// 本番用コード
root.render(
// React.StrictModeコンポーネントでアプリケーションをラップする
<React.StrictMode>
{/* Appコンポーネントを描画 */}
<App />
</React.StrictMode>
);
// 実験用コード
// root.render(
// < App />
// );
App.js
import SampleSketch from "./SampleSketch"
// Appコンポーネントの定義
function App() {
return (
<div className="App">
<h1>Hello, world!</h1>
{/* p5.jsのスケッチ */}
<SampleSketch />
</div>
);
}
// Appコンポーネントを他のファイルで利用できるようにエクスポート
export default App;
SampleSketch.js
import React, { useEffect } from "react";
import p5 from 'p5';
// 描画処理
const circle = (p) => {
p.setup = () => {
// セットアップ処理
p.createCanvas(400, 400);
};
p.draw = () => {
p.background(220);
p.ellipse(200, 200, 80, 80); // サークルを描画
};
};
// p5.jsのスケッチコンポーネント
const SampleSketch = () => {
useEffect(() => {
new p5(circle); // p5.jsのキャンバスを生成
}, []);
return (<></>);
};
export default SampleSketch;
動作確認
次のコマンドで動作を確認できます。
npm start
次の出力が確認された場合は yes と入力してください。
Would you like to add the defaults to your package.json?
src/index.js の下部にある 本番用コード をコメントアウトして、実験的コード のコメントアウトを外すと表示されるキャンバスは1つに表示されます。後述のデプロイでは 本番用コード で問題ありません。
デプロイ
次のコマンドでプロジェクトを Github Page 上へデプロイできます。
npm run deploy
自動的にテキストエディタが立ち上がり、COMMIT_EDITMSG が開かれます。<変更内容が以下に続く> 以降の行をコメントアウトして保存し、テキストエディタを閉じてください。
# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# On branch main
# Your branch is up to date with 'origin/main'.
#
# Changes to be committed:
# <変更内容が以下に続く>
リポジトリの設定
以降の操作は次の記事にある「リポジトリの設定」をご確認ください。