🌺

Astro x p5.js x TS x pnpm セットアップ

2023/05/22に公開

JavaScript

なかったので作成。
Astroにp5.js環境(TypeScript)をpnpmを利用して作成していく記事です。

セットアップ

まずは、Astroプロジェクトを作成します。

pnpm create astro@latest

最初に聞かれるWhere should we create your new project?のみ任意の名前を入力し、それ以外は全部デフォルト（全てEnter）で作成しました。

次に、p5.jsとその型を追加します。

pnpm i p5
pnpm i -D @types/p5

prettierがないときついので、prettierは追加しておきます。

pnpm i -D prettier prettier-plugin-astro

ここで、prettierの設定をします。公式の案内を参考にしました。

/.vscode/settings.jsonを作成し、以下を追加しました。

{
  "editor.formatOnSave": true,
  "prettier.documentSelectors": ["**/*.astro"],
  "[astro]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

/.prettierrc.cjsを作成し、以下を追加しました。お好みで。

module.exports = {
  printWidth: 100,
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'es5',
  useTabs: true,
  plugins: [require.resolve('prettier-plugin-astro')],
  overrides: [
    {
      files: '*.astro',
      options: {
        parser: 'astro',
      },
    },
  ],
};

不要なものは削除する

各種Astroファイルをキレイにして、p5.jsの動作確認を行います。

まずは、src/componentsを丸々削除します。
次に、Layout.astroのスタイルを以下と入れ替えます。

<style>
  html, body {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
  }
</style>

最後に、index.astroを整理します。

html: mainタグを残して中身を削除
css: styleタグを丸々削除
javascript: scriptタグを追加し、その中にp5.jsのコードを記述

index.astro

---
import Layout from '../layouts/Layout.astro';
---

<Layout title="Welcome to Astro.">
  <main></main>
</Layout>

<script>
　　import p5 from 'p5';

　　const sketch = (p: p5) => {
　　　　p.setup = () => {
　　　　　　p.createCanvas(p.windowWidth, p.windowHeight);
　　　　　　p.noStroke();
　　　　　　p.noLoop();
　　　　};

　　　　const drawCircle = (x: number, radius: number, level: number) => {
　　　　　　const tt = (126 * level) / 4.0;
　　　　　　p.fill(tt);
　　　　　　p.ellipse(x, p.windowHeight / 2, radius * 2, radius * 2);
　　　　　　if (level > 1) {
　　　　　　　　level = level - 1;
　　　　　　　　drawCircle(x - radius / 2, radius / 2, level);
　　　　　　　　drawCircle(x + radius / 2, radius / 2, level);
　　　　};

　　　　p.draw = () => {
　　　　　　drawCircle(p.windowWidth / 2, 280, 6);
　　　　};
　　};
  
　　new p5(sketch);
</script>

最後に、以下のコマンドを実行し、起動確認します。

pnpm run dev

問題なさそうです。
astroを実行し、p5.jsが正常に動作することを確認した画像

※この実行結果は、以下のコードを利用しました。

これで、使えるようになりました。

以上です。
もし、不備があれば教えてください。

セットアップ

不要なものは削除する

Discussion