mieki256's diary

Windows10 x64 22H2 + Visual Studio Code (VSCode) 1.94.2 上で、p5.js を書きやすくするための拡張をいくつかインストールしてみた。

• p5.js はJavaScriptライブラリ。利用すると、Processing (Proce55ing) というプログラミング環境と近い感覚でソースを書けるようになる。
• Visual Studio Code (VSCode)は、Microsoft が提供してるプログラミング用テキストエディタ。無料で利用できる。

以下の拡張をインストールしてみた。

_Live Server - Visual Studio Marketplace
_live-p5 - Visual Studio Marketplace
_p5canvas - Visual Studio Marketplace
_p5.vscode - Visual Studio Marketplace
_P5 Snippets and Tools - Visual Studio Marketplace
_p5js Snippets - Visual Studio Marketplace

Live Server は、現在開いているフォルダを「/」ディレクトリにした状態でローカルサーバを立ち上げてくれる。

• 同時に、Webブラウザ Google Chrome も起動して、該当フォルダ内の index.html を開いてくれる。
• VSCode 下部のステータスバー上の「Go Live」をクリックして立ち上げるか、左側のファイル一覧の中から index.html を右クリック → Open with Live Server で実行できる。

JavaScript関連の開発時は、Webブラウザがサーバにアクセスして .html や .js を取得する状態にしないといけないので、この手のローカルサーバが必要になる。


live-p5 は、現在開いている p5.js 用の .jsファイルを、VSCodeのウインドウ内で実行してくれる。

• Ctrl + Shift + P → Open live p5 panel、を選択。
• ただ、画像の読み込みには対応していない。

p5canvas も、現在開いている p5.js 用の .jsファイルを、VSCodeのウインドウ内で実行してくれる。

• VSCodeのステータスバー左下の、p5canvas というボタンをクリックすれば有効になる。
• こちらは live-p5 と違って画像の読み込みにも対応している。

p5.vscode, P5 Snippets and Tools, p5js Snippets は、オートコンプリートを働かせたり、スニペットを提供したり、プロジェクトの新規作成機能を追加したりできるけど、機能が被ってるかもしれない…？ どれか1つをインストールしておけばいいのかも。

◎ 参考ページ :