p5.jsでスケッチを描くときは、コードエディタとして「Visual Studio Code」を愛用しています。以前、こんなエントリも書きました。
・p5.jsのお供に「Visual Studio Code」をオススメする理由
その時はオススメの拡張機能として、
・p5js Snippets…p5.jsの関数について、入力中に候補を表示したり、引数のテンプレートを挿入してくれたりする
・Debugger for Chrome…ChromeとVS Codeを連携して、JavaScriptのデバッグをサポートしてくれる
の2つを紹介したのですが、あれから半年ほどの間に、お気に入りがさらに2つほど増えました。
・Live Server…ローカルの環境に一時的にHTTPサーバを立ち上げて、HTMLをHTTPで開いてくれる。ファイルセーブ連動のオートリロード機能付き
・live-p5…p5.jsのコードを書いたjsファイルを、VS Codeの分割ペインで動かしてくれる。ライブリフレッシュ対応
別ファイル読込時に超便利な「Live Server」
p5.jsを使い始めたころは、ローカルのフォルダにHTMLファイルとJSファイルを置いて編集し、動作チェックする際にはHTMLファイルをダブルクリックしてブラウザから開くということをやっていました。それ以外のやり方を知らなかったからなのですが（笑）、これ、ものすごく面倒です。
例えば、ブラウザで開いた状態からどこかを修正した場合には「VS Code上でコードを直してセーブ」した後で「ブラウザ（Chrome）をリロード」するという2ステップを踏まないと、修正の結果が確認できません。
あと、どうしようもないのが別に用意した画像ファイルなどをスケッチで読み込んで使いたいとき。やったことがある方は分かると思いますが、Chromeを含む一般的なブラウザでは、セキュリティの都合で、通常のファイルシステムから別ファイルを読み込めません。読み込み元と対象のファイルがWebサーバ上にあれば良いのですが、まぁ、作業用PCで常時Webサーバが動いている状況もあまり一般的ではない。仕方ないので、以前はjsファイルを編集するたびに、FTPでサーバに上げてチェックするという非効率なこともやっておりました。
Live Serverを使うと、このあたりの作業が劇的にラクになります。
インストールすると「エクスプローラー」ペインでのファイルに対する右クリックに「Open with Live Server」というメニューが追加されます。開きたいHTMLファイルにこれを使うと、一時的にそのファイルが入っているディレクトリにHTTPが通るようになります。ファイルシステムから読み込めない画像や音声などの別ファイルも、Webサーバに置いている時と同じように読み込めます。
また、Live Serverで開いているスケッチのスクリプトを変更した時には、そのファイルをセーブしてやると、自動的にLive Server側でリフレッシュがかかり、変更が反映されます。
「なんでこれまであんな面倒なことしてたんだ！」と言いたくなるほど便利になりますので、もしまだファイルシステムベースでローカルのスケッチを開いている方がいたら（いるのか？）ぜひお試しを。
シンプルなスケッチを手軽に動かせる「live-p5」
この拡張機能を入れると、p5.js用に書いたjsファイルを、VS Code上で直接動かせるようになります。
VS Codeでjsファイルを開き、編集している状態で「Ctrl+Shift+P」で開くコマンドパレットに「live p5」と入力します。すると、新しいペインに「live-p5」のタブが開き、そこでスケッチが走ります。
面白いのは、HTMLを経由せずに、直接jsファイルを開けるところですね。さらに、元のファイルのdraw内、あるいはdrawから呼ばれている関数内の数値などを編集すると、セーブを待たずにリアルタイムでスケッチが更新されます。ちょっとした見栄えの調整を行いたい時なんかはLive Serverよりも手軽です。ただ、外部ファイルの読み込みには非対応。また単体のjsファイルを開くので、HTMLで追加のライブラリなどを読み込んでいるスケッチは原則動きません（一応、live-p5がインストールされているフォルダの中にある「assets」内のライブラリは読み込んでるみたいです）。
本来は、学習などの用途で、VS Codeだけで完結するシンプルなスケッチ環境を作るためのランタイム的に使うのだと思いますが、僕は主にスケッチのラフイメージを作りたいときに使っています。
VS Codeには、似たような拡張機能として「p5canvas」というのもあり、こちらは相対パスで指定された画像の読み込みにも対応しています。また、細かくコードの直し方を指示してくれるエラー出力機能もあり、学習用途であればより使いやすいかもしれません。ただこちらは「標準的なp5.jsとjsファイルの書き方がちょっと違う（基本、draw()内しか書かない）」「ES2015が使えない」といった仕様のため、僕は「live p5」のほうを使っています。この辺はお好みで。
「p5-manager」「Git」でさらに便利に
ここからはVS Codeの拡張機能ではないのですが、現在よく使っている「p5-manager」と「Git」について触れておきます。いずれも導入にちょっと手間がかかりますが、スケッチを作るときに便利に使えるツールです。
「p5-manager」は、node.js環境で動作するツールで、npmのパッケージとして配布されています。
本来は、多数のスケッチを作っている人がそれらを管理するためのもののようなのですが、僕は専らテンプレートの自動生成ツールとして使っています。インストールしてパスを通した後に、VS Codeのコマンドラインツールから「p5 generate -b sample」などと入力してやると、「sample」というディレクトリにp5.jsのライブラリと「index.html」「sketch.js」などをまとめて生成してくれます。事前に生成用のテンプレートを編集しておくと、自分がよく使うライブラリやコードを含むファイル一式がコマンド一発で作れるようになるので大変便利です。
p5-managerについては「The Coding Train」のこちらのビデオで紹介されています。ざっくりとですが導入の仕方についても触れられていますので、試してみたい方はご参考に。
「Git」については、プログラマーの方にとってはもはや常識で「何を今さら」といった感じだと思いますが、特に分散開発などしていない個人でも、ファイルのバージョン管理ツールとして便利に使えます。
・Git
VS Codeには、Gitと連携するGUI（画面左端の「ソース管理」アイコン、あるいは「表示」メニューの「SCM」から呼び出せる）があるので、面倒なコマンドラインを使わずに変更したファイルの確認、ステージングやコミットの操作ができます。
p5.jsでスケッチをしていると、よく「一度動く形で完成させたスケッチを後からいじってみたがうまくいかず、元に戻したいけど最初の状態を忘れてしまって困る」という状況があると思うのですが（ありますよね？）、Gitでディレクトリ内のファイルを管理しておけば、変更したコードをセーブをした後でも、コミット前の状態にすぐに戻せるようになります。こうしておくと、心置きなくコードをいじくりまわせるんですね。
あと、Gitが入っているとGitHubのリポジトリに公開されているコードをローカルに持ってきたり、ローカルで作ったコードを自分のリポジトリにアップしたりといったこともVS Codeからできるようになります。
いずれも多機能なツールですが、まずは現時点で便利に使える部分から始めて、少しずつ高度な機能を試してみたいと思っています。
p5.jsのスケッチがはかどるVisual Studio Codeの拡張機能4選＋α はコメントを受け付けていません