[p5.js]業務知識をフル活用したローカル開発環境を紹介(2023年度版)

はじめに

初めましての方は初めまして。からくれ178と申します。
フロントエンドエンジニアとして働き始めて8か月が経ち、p5.jsを使ったクリエイティブコーディングを初めて半年が経ちました。

Xにて以下のつぶやきをしたところいくつか反応があったのでクリエイティブコーディングをしている方々はみんながどういった環境で作品制作しているのか気になっているのだと感じました。（実際私も気になっている）

そこで今回は普段私が使っているp5.js用のローカル開発環境について紹介します。

想定読者

・すでにクリエイティブコーディングの開発環境を整えているけど他の人はどんな環境で作成しているか気になる人

p5.jsだけに使うにはオーバーキルなほどゴツく、移り変わりの激しいWEBという分野において、3年後には間違いなく動かなくなる開発環境なため初心者向けではないです。(実際問題、来年設定を見直さなければ動かなくなる箇所が確定して存在する)

まだプログラミング/環境構築に慣れてないよっという方はp5.js editerがおススメです。

環境の構築（基本編）

最低限これは必須というものを紹介していきます。

インストールする物一覧

インストールおよび紹介する物の一覧/公式リンクです。

• fnm
• ESLint
• Prettier
• vite
• vscode-icons(VSCodeの拡張機能)
• ESLint(VSCodeの拡張機能)
• Prettier - Code formatter(VSCodeの拡張機能)
• Duplicate action(VSCodeの拡張機能)

Node.jsの準備

Node.jsはJavaScriptを動かすために必要な実行環境です。
ブラウザに紐づいているので、ブラウザだけでJavaScriptを動かすのならインストールをしなくとも動くのですが、ローカル環境を作る際は別途入れる必要がありバージョン管理をできたほうが後々苦労しなくて済みます。

1. fnmの導入
   fnmはNode.jsバージョン管理ツールです。
   これをインストールせずにnpm系を使ったローカル環境で開発をしていると手動でNode.jsを毎回入れることになり地獄を見ます。

macだと以下コマンドをターミナル上で実行すればfnmを導入できます。

curl -fsSL https://fnm.vercel.app/install | bash

brewコマンドかつzshシェルを使用している場合だと以下記事が参考になります。
Node.jsのバージョン管理をnodenvからfnmに切り替える

Windowsだと以下サイトが参考になります。Windowsでのインストールは結構面倒臭いです。
Node.jsバージョン管理ツール「fnm」のインストール方法と使い方

2. Node.jsのインストール
   実際にインストールします。
   ターミナル上で以下を実行します。

fnm install 18.18.0

これでバージョン18.18.0のNode.jsがインストールされます。

npmの準備

まずは開発したいフォルダでNode.jsを使った開発環境の初期設定をします。
以下をgithubから落としてきます。
https://github.com/Karakure178/p5js_mydev2023

Download ZIPをクリックするとフォルダ事ZIP形式でダウンロードできる。

Gitのコマンドが使える方は以下コマンドが楽です。

git clone https://github.com/Karakure178/p5js_mydev2023.git

もし自前でviteを使った開発環境を整える場合には以下サイトが参考になります。
jQueryからTypeScript・Reactまで！Viteで始めるモダンで高速な開発環境構築

p5.js等のライブラリを実際にインストールしていきます。
私の環境だとp5.js以外にも使っているライブラリが多くあるのでpackge.jsonに以下のように記述しています。

{
  "name": "p5js_mytemplate2023",
  "version": "0.1.0",
  "type":"module",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "eslint": "^8.39.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "prettier": "^2.8.8",
    "vite": "^4.4.5",
    "vite-plugin-glsl": "^1.2.1",
    "vite-plugin-live-reload": "^3.0.2"
  },
  "dependencies": {
    "canvas-capture": "^2.1.1",
    "gsap": "^3.12.2",
    "p5": "^1.8.0",
    "pixi.js": "^7.3.2"
  }
}

（Pixi.JSを使った開発等も同じ開発環境でやっているので入ってます）

package.jsonの記述を設定した後はnpm installを実行するとそのファイルに書かれたライブラリが自動インストールされます。

その辺の設定等は以下サイトがわかりやすかったです。
【初心者向け】NPMとpackage.jsonを概念的に理解する
package.jsonとpackage-lock.jsonの違いについて

viteの設定

viteはローカルで複数のライブラリをまとめて管理して実行してくれるモジュールバンドラと呼ばれる開発ツールになります。これを使うことで複数のライブラリを一々HTMLにScriptタグで呼び出す必要がなくなります。

モジュールバンドラの歴史やviteに関するわかりやすい記事は以下になります。
フロントエンドビルドツールの特徴・使い分け解説

私の環境だとviteの初期設定では使えないので諸所設定しています。

vite.config.jsの設定

viteでは、vite.config.jsにファイルの入力・出力設定を書く必要があります。私の環境では以下のように記述しています。

import { defineConfig } from 'vite';
import glsl from 'vite-plugin-glsl'; //これのためにpackage.jsonにtype:moduleを追加した
import { resolve } from 'path';
import liveReload from 'vite-plugin-live-reload'; //Dev時のファイルリロード監視に任意のファイルを追加できるようにするため

// HTMLの複数出力を自動化する
//./src配下のファイル一式を取得
import fs from 'fs';
const fileNameList = fs.readdirSync(resolve(__dirname, './src'));

//build.rollupOptions.inputに渡すオブジェクトを生成
const inputFiles = {};
for (let i = 0; i < fileNameList.length; i++) {
  const file = fileNameList[i];
  inputFiles[file] = resolve(__dirname, `./src/${file}/index.html`);
}

export default defineConfig({
  server: {
    host: true, //IPアドレスを有効化
  },
  base: './', //相対パスでビルドする
  root: './src', //開発ディレクトリ設定
  build: {
    outDir: '../dist', //出力場所の指定
    rollupOptions: {
      //ファイル出力設定
      output: {
        assetFileNames: (assetInfo) => {
          let extType = assetInfo.name.split('.')[1];
          //Webフォントファイルの振り分け
          if (/ttf|otf|eot|woff|woff2/i.test(extType)) {
            extType = 'fonts';
          }
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
            extType = 'images';
          }
          //ビルド時のCSS名を明記してコントロールする
          if (extType === 'css') {
            return `assets/css/[name].css`;
          }
          return `assets/${extType}/[name][extname]`;
        },
        chunkFileNames: 'assets/js/[name].js',
        entryFileNames: 'assets/js/[name].js',
      },
      //input:
      //生成オブジェクトを渡す
      input: inputFiles,
    },
  },
  // glslファイルをimportできるようにする 
  plugins: [liveReload('**/*.html'), glsl()],
});

詳しい説明はしませんが、src配下にあるhtml、css、jsを探してフォルダごとでページを切り分ける仕様にしています。そのため、フォルダをコピー＆ペーストするだけで新しいページを増やすことができます。また、viteの初期設定ではGLSLファイルを読み込むことができないため読み込むことが可能になるライブラリ、vite-plugin-glslを導入しています。

ESLintの設定

ESLintはJavaScriptのソースコードを読み込んで内容を分析し、問題点を指摘してくれる静的解析ツールです。
ブラウザでもエラーにはならないけれど変な書き方だよということを教えてくれたり、モノによってはエラーを吐いている箇所を自動修正してくれたりします。
今回の開発環境を作った理由の一つで、通常ローカルファイルをコピペして作業するだけだとエラーやフォーマットをかっちりして書くことができず、かっちりさせるなら、どうしてもProcessingのIDEに依存して書かないといけないところがあります。

私としてはProcessingのIDEに縛られず自分の使いたい見た目・エディタでコードを書きたい人間なのでこちらを導入しました。

エラーを吐いている箇所にカーソルを当てるだけでどういったエラーなのかを見ることができる。

ESLintは.eslintrcとつくファイルに設定を書くことができます。初期設定だと色々気になるところがあるので私は以下の設定で使っています。

module.exports = {
  root: true,
  extends: ['eslint:recommended', 'eslint-config-prettier'],
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  parserOptions: {
    sourceType: 'module',
  },
};

ESLintと後述するPrettierを同時に使用する場合一部設定が競合するため、競合しないような設定を噛ませています。

ツール・設定に関しては注意点含めてこの記事がわかりやすかったです。
ESLint を使い倒す方法まとめ

Prettierの設定

ソースコードをルールに沿って整形してくれるツールです。
設定によって、自動で80文字超えたら折りたたんでくれたり、ダブルクォーテーションをシングルクォーテーションに自動で直してくれたり、文末にセミコロンを必ずつけてくれたりします。
私の設定では以下のように設定しています。

module.exports = {
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  printWidth: 120,
  endOfLine: 'lf',
  trailingComma: 'es5',
};

タブがぐちゃぐちゃでも自動成形してくれるので可読性が上がる。

Prettierの設定項目に関してはこの記事がわかりやすかったです。
Next.jsにPrettierを導入して設定する

エディタ(拡張機能)の準備

私の開発環境はエディタであるVSCodeの拡張機能にかなり依存しています。紹介する拡張機能は以下になります。

• ESLint
  ESLintをファイル保存時に自動で実行してくれるようになる拡張機能。私の環境だとVSCode上の.settings.jsonに以下のように記述してエラーを吐かせるようにしています。

{
  "editor.guides.bracketPairs": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.format.enable": false,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

• Prettier
  Prettierをファイル保存時に自動で実行してくれるようになる拡張機能。これも入れないと一々コマンドから指定しないといけないので面倒です。
  
  毎回npx prettier . --writeというコマンドを実行する必要があり面倒臭い

こちらに関してもVSCode上のsettings.jsonに設定を書かないとちゃんと動かないです。

以下参考サイトです。
VSCodeでファイル保存時にPrettierを実行する方法

• Duplicate action
  機能はシンプルでフォルダを右クリックするとフォルダごとのコピーを作れるというものなのですが、VSCode上でフォルダをコピーするのが意外と面倒＆基本的にテンプレをコピペして作品を作るので必須な拡張機能になっています。

・vecode-icons
フォルダ名・ファイル拡張子でアイコンを変えてくれるのでどこに何の作品をしまったか確認するのに必須です。

環境の構築（なくてもいいけどあると便利編）

あったほうが便利だけど有料orあまりクリエイティブコーディングに関係ないor扱う難易度が高めな物を紹介します。

紹介する物一覧

紹介する物の一覧/公式リンクです。

• starship
• Git
• SourceTree
• GitLens(VSCodeの拡張機能)
• Auto Rename Tag(VSCodeの拡張機能)
• indent-rainbow(VSCodeの拡張機能)
• Github Copilot(VSCodeの拡張機能)
• GLSL Lint(VSCodeの拡張機能)
• Shader languages support for VS Code(VSCodeの拡張機能)
• zenkaku(VSCodeの拡張機能)

ターミナルの準備

• starship
  ターミナルの見た目をおしゃれにする拡張ツール。
  Gitを使っている場合、今自分がどのブランチにいるかや、Node.jsのバージョンがいくつなのかといったメタ情報をターミナル上に紐づけることができます。

macであれば公式サイトに従えばそのまま楽に使えます。
Windowsでのインストールは以下サイトがわかりやすいです。
Windows Terminal (PowerShell) + starship でイイ感じのTerminal 環境をつくりたい

私は以下の設定で見やすくしています。

# Get editor completions based on the config schema
"$schema" = 'https://starship.rs/config-schema.json'

# Inserts a blank line between shell prompts
add_newline = true

# Replace the '❯' symbol in the prompt with '➜'
[character] # The name of the module we are configuring is 'character'
success_symbol = '[➜](bold green)' # The 'success_symbol' segment is being set to '➜' with the color 'bold green'
[directory]
truncation_length = 100
truncate_to_repo = false


# Disable the package module, hiding it from the prompt completely
[package]
disabled = true

[git_branch]
format = "[$symbol$branch(:$remote_branch)]($style) "
style = "bold #ff88ff"

[nodejs]
format="> Node.js [$symbol($version)]($style)"
symbol="🍀"
disabled = false

コードのバージョン管理ツール

主にGit関連の紹介をします。
クリエイティブコーディングをする場合は基本的に一人で作業する事がほとんどだと思うため、バージョン管理をするメリットはそこまでないと思われがちですが、コミット名をしっかり保存しておくと見返したときにどのフォルダのどの作品がどんな表現をしたかを追えるので結構便利です。

• Git
  コードのバージョン管理ができる管理システムです。
  慣れるまでの使用難易度は高めですが、途中まで変更したコードを前のバージョンに戻したり、変更前と変更後の差分を確認して、必要な行だけ元に戻したり、ファイル一式変更したりできるので便利です。VSCodeではコマンドで実行しないといけないような機能がGUI側から操作できる場合が多いのでその機能を活用しています。

私はこちらのサイトで使い方を学びました。
サル先生のGit入門

• SourceTree
  Gitは基本ターミナル上でコマンドを打って確認しますが、GUIとして可視化してくれるのがこのソフトウェアになります。こちらも使用難易度は高めですが、コメントが書かれたコミット番号をクリックしてそのバージョンに巻き戻せるので便利です。
  基本的にコミット一覧の確認かコミットの巻き戻し用として使っています。

この記事が参考になります。
Gitを使いやすくするためのGUIツールSourcetreeの使い方

• Gitlens
  VSCodeの拡張機能でGitに関する便利機能が豊富なツールになります。

変更した内容をブランチ一覧から見る機能もある。

複数前のコミット番号からどのファイルが存在したか等の差分を確認できる。（複雑になると結構便利）

AIツール

Github copiliotに課金して使っています。主に予測変換的な使い方をしている場合が多いです。
特に、円を描くためのfor文や典型的なものはAIの予測変換に全力で依存しています。
最近はGithub copilot chatという機能も追加されたので、AIと壁打ちしながらコードを組むこともあります。

Github copilot chatで変数を書き換えてもらった例。VSCode側で選択した範囲だけをターゲットにしたり、そこの範囲だけ書き換えてもらったりできる。

VSCodeの見た目を変える系ツール

直接クリエイティブコーディングに関係ないため、なくても作業に支障はないけどあったほうが効率的になるツールが多いです。

• zenkaku
  全角スペースを入力していると赤色に変わるVSCodeの拡張機能です。
  全角スペースがあることで発生するバグの防止に役立ちます。

• indent-Rainbow
  タブの個数で線をつけてくれる拡張機能です。
  JavaScriptやGLSLを書いていて関数がどこまでの範囲を示しているのかが見やすくなります。

• Auto Rename Tag
  htmlタグを途中まで打った時点で自動補完してくれる拡張機能です。
  p5.jsを使った開発では滅多にhtmlタグを触ることはないですがあったほうが入力の手間が省けるので一応紹介しておきます。

• Shader languages support for VS Code
  GLSLファイルでシンタックスハイライトが効くようになる拡張機能です。.fargや.glsl等ファイル分けしないと使えないのが難点ですが、p5.jsでシェーダーを書くならお勧めします。

• GLSL Lint
  GLSLを入力しているとき、コンパイルせずとも自動でエラーを吐いてくれる拡張機能です。導入難易度はそこそこ高いですが、p5.jsでシェーダーを書くならお勧めします。
  導入方法は以下リンクがわかりやすく解説しています。
  GLSL×VSCode快適拡張のススメ

おまけ：制作時に気を付けていること

開発環境とはちょっとずれますが作品制作の時に気を付けていることを軽く紹介します。

できるだけコメントをつける

基本的にコメントはつけるよう心がけています。
というのも、p5.jsに限らず結構な頻度で過去に書いたソースコードを引っ張りだして作品に応用することが多いのですが、その際にコメントがないと「これ、、なんだっけ？」になりがちで結局「とりあえずコピペして動かない・ギャぁぁぁ」な経験をしょっちゅうしてきたためです。（それでも忘れて後で痛い目を見る）

また、JavaScriptに限られますが、jsdocという方式で記述をすると引数や変数の型情報、クラスの情報を補完してくれるため、「この変数って何入れるんだっけ？」を減らすことができて便利です。

何も指定しないとanyという型情報がかえってくるので何が入っているかパッと見わからない。

型情報を付与するとカーソルを当てるだけでこれだけ情報が出るようになる。

こまめにコミットする

ソースコードのバージョン管理は一人で制作している際はそこまで必要ないかと思われますが、作品の内容が大きくなればなるほど真価を発揮します。
クラスを3つも4つも組み合わせて、作品を作る際にバージョン管理を導入していなかった場合「さっきまで動いてたのにクラス1個追加したら動かないんですけど..」になると地獄を見ます。

また色んな手法で記述していて、やっぱり最初のやり方がよかったなとなった場合、「あれ？この書き方どうやったっけ？」というのをGitの差分から確認しながら作業ができる＆気に入らなければ巻き戻すこともできるのでできるだけこまめにコミットするようにしています。

VSCodeのソース管理タブを開きっぱなしにすることでこまめにコミットすることへの圧を自分自身にかけている図

これで作品が作れるようになった(?)

今回紹介した開発環境には大きな罠があります。

• npm startしている状態でしか実行できないこと
• インスタンスモードと呼ばれる書き方でないといけないこと
• OpenProcessing/p5.js editerに移植する際は一部書き直さないといけないこと
• npmで管理されていないライブラリは使うことができない

使いやすさ・他ライブラリとの組み合わせに特化した結果、結構なマイナス事象が発生しているので全く万人向けではないです。

ですが、そもそもこういった業務知識フル活用して環境作ってます！といった紹介記事が全くなかったので今回紹介してみた次第です。こんな環境もあるんだなぁ程度に認識してもらえればうれしいです。