p5.jsを本番サイトで使う方法では、グローバルスコープ内(windowオブジェクト直下)に直接p5.jsを読み込ませ、p5.jsのグローバルモードとしてp5jsを実行する方法を解説しました。
\nこの記事では、p5jsのインスタンスモードを使用し、Reactなどのコンポーネントとしてp5.jsを読み込ませる方法を解説します。
\nインスタンスモードとグローバルモードの違いはp5.jsを本番サイトで使う方法をご覧ください。
動くサンプルコードはCodeSandBoxにあります。コードのみ見たい方はそちらをご覧ください。
\nまずreactとp5をインストールしましょう。
\n関数コンポーネントで書きたいので、ReactのuseEffect, useStateあたりを使いたいので、Reactのバージョンは16.8以上が前提です。クラスコンポーネントで書きたい方は適宜置き換えてください。
npm install react react-dom p5 --save次にWrappingコンポーネントを作成してきます。
\nP5Wrapperという名前のReactの関数コンポーネントを作成します。
\n同時に、p5jsからcanvas要素を生成する先のdiv要素をwrapperという参照名で作成します。
const P5Wrapper = props => {\n const wrapper = React.createRef();\n return <div ref={wrapper} />;\n}p5jsは圧縮版を_p5として読み込ませます。
import _p5 from \"p5/lib/p5.min\";クラスコンポーネントのStateとComponentDidMountに変わる関数を使いたいので、依存モジュールをimportします。
\nuseStateがStateを扱う役割をし、useEffectがComponentDidMountの役割をします。
import React, { useState, useEffect } from \"react\";p5のインスタンス格納用に、stateを宣言します。
\nここでp5という名前を使いたかったので、p5js本体は_p5という名前にしています。
const const [p5, setP5] = useState(0);useEffectを使い、p5jsをwrapperにマウントさせます。
\nwrapperはdiv要素なので、div要素がレンダリングされたあと実行されるuseEffectの中でないと、p5jsをマウントできません。
\n第2引数にprops.sketchを渡さないと無限にcanvasが生成されてしまいますのでご注意ください。
useEffect(() => {\n setP5(new _p5(props.sketch, wrapper.current));\n}, [props.sketch]);全体のコードは以下のようになります。
\nこれでp5jsのWrapperコンポーネントが完成しました。
import React, { useState, useEffect } from \"react\";\nimport _p5 from \"p5/lib/p5.min\";\nimport PropTypes from \"prop-types\";\n\nconst P5Wrapper = props => {\n const [p5, setP5] = useState(0);\n const wrapper = React.createRef();\n\n useEffect(() => {\n setP5(new _p5(props.sketch, wrapper.current));\n }, [props.sketch]);\n\n return <div ref={wrapper} />;\n};\n\nP5Wrapper.propTypes = {\n sketch: PropTypes.func\n};\n\nexport default P5Wrapper;つぎにsketchファイルを別ファイルとして用意しておきます。
\n内容は300x300pxのcanvas内でマウス座標に従い赤い丸が描画されるというものです。
const sketch = p => {\n p.setup = () => {\n p.createCanvas(300, 300);\n };\n p.draw = () => {\n p.background(240);\n if (p.mouseX === 0 && p.mouseY === 0) return;\n p.fill(255, 0, 0);\n p.noStroke();\n p.ellipse(p.mouseX, p.mouseY, 100, 100);\n };\n};\n\nexport default sketch;上記で作成したP5Wrapper.jsとsketch1.jsファイルを使用し。\nReactのindexファイルから参照します。
\nimport React from "react";\nimport ReactDOM from "react-dom";\nimport P5Wrapper from "./P5Wrapper";\nimport sketch1 from "./sketches/sketch1";\n\nfunction App() {\n return (\n <div className="App">\n <h1>Hello p5.js in React</h1>\n <P5Wrapper sketch={sketch1} />\n </div>\n );\n}\n\nconst rootElement = document.getElementById("root");\nReactDOM.render(<App />, rootElement);以上で完了です。
\n動くサンプルコードはCodeSandBoxにありますのでご覧ください。
上でp5jsのwrappingコンポーネントを自作しましたが、もっとお手軽に使いたい方は、同様の機能が実装されているreact-p5-wrapperを使うのがおすすめです。
\nコードはGithubのREADMEより拝借いたしました。
\n内容も同じなので、そちらを見ていただいても同じです。
それではまず、既存プロジェクトに依存モジュールをインストールします。
\nnpm install react-p5-wrapper --saveまずsketchファイルは1つのJSファイルとして完結させます。
\nグローバルモードから移植する場合は、すべてのp5js関数の先頭にp.をつけるだけです。
\nReactのアプリケーションスコープから値もpropsとして渡せます。
\nmyCustomRedrawAccordingToNewPropsHandler関数で値を受け取り、内部スコープの変数に格納しています。
export default function sketch (p) {\n let rotation = 0;\n\n p.setup = function () {\n p.createCanvas(600, 400, p.WEBGL);\n };\n\n p.myCustomRedrawAccordingToNewPropsHandler = function (props) {\n if (props.rotation !== null){\n rotation = props.rotation * Math.PI / 180;\n }\n };\n\n p.draw = function () {\n p.background(100);\n p.normalMaterial();\n p.noStroke();\n p.push();\n p.rotateY(rotation);\n p.box(100);\n p.pop();\n };\n};あとはreact-p5-wrapperコンポーネントのpropsに上で作成したsketch.jsファイルを渡します。
\nimport P5Wrapper from 'react-p5-wrapper';\nimport sketch from './sketch.js';\n\n<P5Wrapper sketch={sketch} />P5Wrapperコンポーネント内で自動でcanvasが生成されp5jsが実行されます。
以上でライブラリ版は完了です。
\nreact-p5-wrapperを使った例も書きましたが、自分でいろいろカスタマイズしたい場合は、冒頭のカスタムコンポーネントを作成することをおすすめします。
\nVueのコンポーネントは書いていませんが、考え方はReactと同じです。
\n他にもiframeで動かすケースも考えられますが、iframeの参照URL先でグローバルモードのp5jsを動かすだけですので省略します。
\n後日余力があれば、nodejsとかと組み合わせて書いていきたいと思います。
それでは、よいp5ライフを!
","fields":{"slug":"/2019-09-17_p5-jsをreactのコンポーネントとして実行する方法/"},"tableOfContents":"","frontmatter":{"date":"2019.09.17","title":"p5.jsをReactのコンポーネントとして実行する方法","cover":"","category":"Coding","excerpt":"p5.jsを直接ページ内に読み込ませるのではなく、Reactなどのコンポーネントの中で実行する方法をコードベースでご紹介します。"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"b24fa0f2-8884-5053-9f12-a2dbc1ab9fc6","next":{"path":"/2019-09-14_p5-jsを本番サイトで使う方法/","title":"p5.jsを本番サイトで使う方法","category":"Coding"},"prev":{"path":"/2019-09-20_2019年版Node-jsのおすすめインストール方法/","title":"2019年版Node-jsのおすすめインストール方法","category":"Coding"},"relatedPosts":[{"id":"aa5f4477-fc03-52d8-a793-d1abdb3a7ecd","fields":{"slug":"/2019-09-02_p5jsのコードをsketchファイル上で実行する方法/"},"frontmatter":{"title":"p5jsのコードをsketchファイル上で実行する方法","date":"2019-09-02T00:00:00.000Z","excerpt":"Sketchで幾何学的なパターンを描くのに最適な、Processing(p5js)のコードをSketch上で実行できるPluginを紹介します。","templateKey":"post","category":"Coding","propertags":["p5js","sketch"],"commontags":["javascript"]}},{"id":"2e52640f-36d6-5268-99ea-9d58492ffec5","fields":{"slug":"/2019-09-14_p5-jsを本番サイトで使う方法/"},"frontmatter":{"title":"p5.jsを本番サイトで使う方法","date":"2019-09-14T00:00:00.000Z","excerpt":"p5.jsをいざプロダクションビルド(本番サイト向け)で使う場合、一体どのような方法で使うのが最適でしょうか。p5.jsの特徴を踏まえ、代表的な使い方をご紹介します。","templateKey":"post","category":"Coding","propertags":["p5js"],"commontags":["generative","javascript"]}},{"id":"d5a69a1d-62b7-5a8b-8f18-975dfee3ae96","fields":{"slug":"/2019-09-11_p5-jsスケッチトレーニング-円弧の線を円周上に沿って動かす/"},"frontmatter":{"title":"p5.jsスケッチトレーニング -円弧の線を円周上に沿って動かす-","date":"2019-09-11T00:00:00.000Z","excerpt":"p5.jsのarcと簡単なEasing式を使い、円弧の線を動かします。","templateKey":"post","category":"Coding","propertags":["p5js"],"commontags":["generative","javascript"]}},{"id":"1eb35481-156d-520b-ab66-a911316fe17b","fields":{"slug":"/2019-07-03_Webで簡単にコードで絵を描くp5-js/"},"frontmatter":{"title":"Webで簡単にコードで絵を描くp5.js","date":"2019-07-03T14:15:51.667Z","excerpt":"描画ライブラリp5.jsとCodepenを使い、ブラウザ上で簡単にスケッチを描く方法を紹介します。","templateKey":"post","category":"Coding","propertags":["p5js"],"commontags":["generative","javascript"]}},{"id":"120932f2-28cf-5e37-aaba-6aee6eea5714","fields":{"slug":"/2019-08-15_たった4ステップでVueを使う方法/"},"frontmatter":{"title":"たった4ステップでVueを使う方法","date":"2019-08-15T00:00:00.000Z","excerpt":"実はVue.jsは、JavaScript初学者でも簡単に導入できるような仕組みがあります。この記事では、Vue.jsの強力な特徴と、導入するには何をしたらいいのかを説明します。","templateKey":"post","category":"Coding","propertags":["vuejs"],"commontags":["component","javascript"]}}]}}