上級者向けトピックス

スケッチを公開する

あなたのスケッチを投稿・共有化できるプラットフォームがいくつかあります。p5.js Web Editor や OpenProcessing など。

もし Git を使っていて、コードを GitHub に保管しているのなら、そのスケッチを GitHub Pages でも公開できます。
docs ディレクトリーを作り、そこに index.html と、そのなかでロードする他のファイルを置きます（いくつかのテンプレートはすでに同じことをしていて、dist ディレクトリーがそれです）。そして、docs ディレクトリーを公開するよう設定しましょう。

HTML ファイルを編集してパフォーマンスを改善

Template PETR+ では、以下の2つのことを行っています。

Node.js のモジュール解決

ソースコードを複数のファイル（モジュール）に分ける場合、index.js を置くことで当該ディレクトリーをモジュールとして扱いたいと思うことがあるかもしれません。
次のようにです。

// src/my-module/index.js

export { something };

// src/main.js

import { something } from "./my-module";

これは Node.js のスタイルで可能になります。なので、このコードを Rollup で扱うためには、Rollup のプラグイン @rollup/plugin-node-resolve をインストールして使う必要があります。

また、TypeScript を使う場合は、次の設定を tsconfig.json に追加することも必要です。

{
  "compilerOptions": {
    "moduleResolution": "node",
  }
}

開発用ビルドプロセスの改善

クリエイティブコーディングでは、何度もコードを編集して結果を微調整することが多いです。なので、TypeScript や Rollup などを使う場合、スケッチを毎回ビルドしてそのたびに数秒待つのがちょっと面倒かもしれません。

ここには、そのプロセスを自動化・効率化するためのヒントを置いています。ライブコーディングなんかでも役に立つかもしれません。

TypeScript

TypeScript を使いつつ Rollup などのモジュールバンドラーを使わない場合は、package.json のなかの scripts のところに、npmスクリプトを追加してみましょう。
次のようにです（dev のところは好きな名前で構いません）。

{
  "dev": "tsc --watch"
}

そうしたら npm run dev を実行します。

Rollup

Rollup を使い TypeScript は使わないという場合は、次のようなコマンドを追加してみましょう。

{
  "dev": "rollup --config --watch"
}

そうしたら npm run dev を実行します。

これはソースコードをウォッチして、そのどれかが保存されるたびに、自動でバンドル（単一の *.js ファイルの生成）が行われます。

TypeScript & Rollup

TypeScript と Rollup を両方使う場合、もう少し複雑です。次のようにいくつかの方法があります。