10分でp5.js環境構築：ViteでGitHub Pageに公開

ども！今回はProcessingをWebで実装するためにp5.jsの環境をViteで作成しました。ゴールとして、GitHub Pagesにアップロードとして公開を目標としています。Webに動きを付ける選択肢の中でさっくりと実装することができるので、非常におすすめの選択となっています。

はじめましょう。

ども！二日連続で出社して、一瞬ギアが上がらないかもと焦った龍ちゃんです。午後休を取ろうかと思ったのですが、思いのほかしっかり仕事があったので働いています。

さて、今回も環境構築のお話ですね。お仕事は全く関係のない【クリエイティブコーディング】の世界に挨拶をしていこうと思います。このブログを書きながら、初めて聞いた単語にびっくりしています。（参考資料：クリエイティブコーディングについて熱く語っているサイト）

いったん興味を持った人は、参考資料のリンクに飛んでみてください。遊び心がくすぐられます。どうやら昔書いていた、Processingはクリエイティブコーディングのジャンルだったようです。なので、今回はそれをWebで動かすための環境作成と準備を進めていきます。せっかくなので、ゴールとして、GitHub Pageにデプロイまでを目標としていきます。

今回の記事でわかることは以下になります。

• ViteでTypescript環境にp5.jsをインストールする
• Viteで作成した環境をGitHub Pageにデプロイする

デプロイまでを測ってみたら、10分程度で完了することができたのでさっくりと進めていきましょう。もし、Viteを使ったことがない人がいましたら、ごめんなさい。30分はかかっちゃうかもしれません。

参考資料

今回の参考にしたサイトは以下の二つになります。

• VS Code & TypeScriptとp5.jsで始めるモダンなクリエイティブコーディング入門
• Vite：静的サイトのデプロイ（GitHub Pages）

コラム：P5.jsって何？

急いじゃう人は、飛ばしちゃいましょう。ゆっくりできる人はこんにちは。

p5.jsとは、Processingという言語をWEBでも取り扱えるようにチューニングされたライブラリです。こちらのライブラリのおかげで、Processingのようにさっくりと、クリエイティブなコードを作成することができます。幾何学模様からゲームまで作ることができます。

Processingは手軽に始めることができて、どこまでも沼ることができるのでいい言語です。つまりp5.jsも良いものということですね。

Open Processingのリンクです。見るだけでも楽しいサイトになっているんので、是非覗いてみてください。

Viteの環境にp5.jsの環境を作成する

今回目指す、ディレクトリ構造としては以下になります。Viteの自動生成で完全に一致しない場合もあります。なので、気にせず作っていきましょう。ディレクトリの名前としては『web-p5』として進めていきます。

web-p5
├─.github
│  └─workflows
│     └─   deploy-gh-page.yml
├─.yarn
│  └─releases
├─public
├─src
├─ .gitignore
├─ index.html
├─ package.json
├─ tsconfig.json
├─ vite.config.ts
└─ yarn.lock

Vanilla Typescriptプロジェクトを作成する

それでは、環境構築を始めていきます。まずは、ViteでTypescirptの動作環境を作成しましょう。

# 好きな方で進めてくださいあたしはyarnでやってます
yarn create vite

npm create vite

CLIで作成すると質問されますが、以下の感じで埋めていきます。

アプリケーションを入れたら、とりあえず依存モジュールをインストールだけしておきましょう。

cd web-p5
yarn install

余裕があれば、起動してアクセスもしておきましょう。

p5.js周りの依存関係をインストール

根幹となるパッケージとTypescirptで開発をするためのパッケージをインストールしましょう。これだけで開発が行えます。

yarn add p5
yarn add -D @types/p5

では、インストールがうまくいってるか確認をするためにsrc/main.tsの内容を以下に変更してみましょう。

import p5 from "p5";

const sketch = (p: p5) => {
  p.setup = () => {
    p.createCanvas(400, 400);
  };

  p.draw = () => {
    p.background(220);
    p.ellipse(50, 50, 80, 80);
  };
};

new p5(sketch);

コピペして、実行結果が灰色の画面に白い丸が表示されれば大丈夫です。こんな感じです。

GitHub Pageにあげてみる

ここまで来たら、ゴールはすぐです。作成した環境をGitHubと接続しましょう。

ここ注意点です！！

今回は、web-p5というリポジトリ名で作成しました。このリポジトリ名を、vite.config.tsというファイルの中に設定する必要があります。baseの部分が作成したリポジトリ名になります。

import { defineConfig } from "vite";

export default defineConfig({ base: "/web-p5" });
//export default defineConfig({ base: "/リポジトリ名を設定してね" });

次にリポジトリ側の設定で、GitHub Pageの有効化が必要です。Settings/Pagesに設定項目があります。

GitHub PageにViteで作成したアプリケーションをデプロイするワークフローに関しては、Vite公式が出しています。そちらを参考にしましょう。

ファイルの保存する場所としては、トップディレクトリの.github/workflows に任意の名前で保存してください。よく、ドットをつけ忘れるので要注意です！！！

name: Deploy static content to Pages

on:
  push:
    branches: ["main"]
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

env:
  NODE_VERSION: "18.x"

jobs:
  build:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: ${{env.NODE_VERSION}}
          cache: "yarn"
          cache-dependency-path: "**/yarn.lock"

      - name: npm install node_modules
        run: yarn install

      - name: yarn build
        run: yarn build

      - name: Setup Pages
        uses: actions/configure-pages@v4

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: "dist/"

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

こちらのが完了したら先ほどのGitHub Pagesのページが変化しています。

こちらのVisit Siteをクリックでページに飛ぶことができれば成功です。

もし、何も表示されてなければ、vite.config.tsの可能性があります。スクロールして戻りましょう。

おわりましょう。

ども！10分に終わりました？ぶっちゃけこれで10分で終わられたら自信無くしちゃいます。

随分、時間のかかった環境作成も永遠と繰り返して来たら慣れてきました。いまだにAndroid studioの環境構築には随分と時間を要しますが。Dockerが普及して、随分環境構築も楽になった印象があります。

実際は、ここからがクリエイティブの時間なので、自信を無くさずにプログラミングと向き合いましょう。processingは物理の授業で習った、重力係数とか反発係数とかを実装してみるとめちゃくちゃ楽しいですし、勉強する意義を感じることができます。(地球と月の重量を実装するとめっちゃおもろいっす)

最近はブログ執筆も頑張っているのでまた誰かに刺さったらいいなと思いながらブログを書こうと思います！！

P5.jsの元になったProcessingでゲーム作ってみました。暇があれば覗いてみてください。

• 【Processing】スカッシュゲーム作成記録

ではまた

About 龍：Ryu 107 Articles

2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中（業務もね）//

Twitter YouTube