1.Visual Studio Codeのインストール
Visual Studio CodeはMicrosoft社が提供する開発者向けテキストエディタ。汎用的にテキストエディタとしても使用できますが、開発に便利な機能や拡張機能が豊富であるため、p5jsのコーディングにも最適です。拡張機能によってはローカルでサーバーレスな開発も可能となります。
2.Visual Studio Codeに拡張機能を追加
Visual Studio Codeがインストールできたら起動し、以下の3つの拡張機能を追加しておきます。
- Japanese Language Pack for Visual Studio Code(日本語化)
- p5js Snippets(コード入力支援)
- Live Server(簡易サーバー機能)
機能拡張はこちらのアイコンから
Japanese Language Pack
p5js snippet
Live Server
3.サンプルファイルの入手
全ての拡張機能が追加できたら、下記のサンプルファイルをダウンロードして展開します。（展開とは圧縮されたファイルを元に戻すことです）
macOSの場合はダブルクリックで解凍
Windowsの場合はファイルを選択した状態で「すべて展開」を選択
4.サンプルファイルを開く
展開したフォルダ「01_helloworld」をVisual Studio Codeで開きます。ファイル単体ではなくフォルダを開くというのがポイントですので注意してください。
macOS：ファイル＞開く
macOSの場合、フォルダをアプリアイコンにドロップでも開けます。
Windowsの場合：ファイル>Open Folder…
5.実行テスト
右のリストの手順に従って実行テストを行ってください。拡張機能「Live Server」の機能をONにし、入力されたソースコードをリアルタイムで確認することができるようになります。ソースコードを変更して保存するとブラウザの画面も反映されます。
- Visual Studio Codeのエクスプローラーパネルでmain.jsを選択
- ウィンドウ下部にある「Go Live」をクリック
- Webブラウザ(Chrome)が起動し、実行結果が表示される
