🍳

Vite+TypeScriptでp5.js+daisyUI(TailWindCSS)開発用Boilerplateを作ってみた

2024/08/15に公開

TypeScript

🚀 はじめに

これまでReactベースのウェブサイトを作る機会が多く、UIは全てdaisyUI(TailWindCSS)をカスタマイズして使っていました。
事業紹介などの目的のものが多く、特にサーバとのやりとりをするような重い処理は不要だったので、フロントエンドのUI/UXにだけに注力してきました。

...思い返せば、クライアントワークばかりしてきて、自分のホームページを全然更新していなかったので、これを機会にリニューアルしてみました...!

👇こちらです

https://fujii-web.works/

</> 公開GitHubレポジトリ(vite-typescript-tailwindcss-p5js-boilerplate)

ここからダウンロードなりしてください。

🍳 私もBoilerplate作りたい...!

新しい技術を取り入れてWeb開発をする際、どなたかが作ってくださった Boilerplate(なんかこうテンプレート的なもの) を参考にさせていただくことが多く、いつかは自分も作ってみたいなぁと思っていました。

...ということで、Vite+TypeScriptでp5.js開発環境を作るついでにTailWindCSS+daisyUIでホームページをリニューアルしたので、備忘録にBoilerplateを作りました!!

🍽️ 今日の主役たち

https://vitejs.dev/

https://www.typescriptlang.org/

https://p5js.org/

https://tailwindcss.com/

https://daisyui.com/

🖐️ 設計ポイント5選

⚀ Vite+TypeScriptでエラーの早期発見と保守性を上げる

イケてるフロントエンドビルドツールとして、ここ数年はVite^[1]を採用しています。

Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。
はじめに | Vite https://ja.vitejs.dev/guide/

ヴィータちゃん...はドイツ語ですが^[2]。

コード作成には、積極的にTypeScriptを採用しております。
一人で開発しているので、自分自身でデバッグするのにはどうしても限界がありまして。
かといって、そんなに頑張ってテストも書きたくないので...
TypeScript^[3]を使っていると、デプロイ前のビルドテストでそこそこきちんとチェックして怒ってくれるので好きです。

ちなみにデプロイ環境はNetlify^[4]を使っています。
なりゆきで使っていますが、特にこだわりはないっす。
ちょっと前はVercel VS Netlifyみたいな構図でしたが、今は大手から類似サービス提供されてますね。
Cludflareでドメイン管理をしているので、Cludflare Pages^[5]には浮気しようかなと思ったり思ってなかったり。
...結局今はどのサービスが流行っているのでしょうか...全然知らん...

⚁ TailWindCSS+daisyUIで爆速UI開発

これも結構前ですが、以前はUIフレームワークにBootstrap^[6]を使ってました。
（その前はFoundation^[7]を使ってました...!）
でも、ライブラリに脆弱性があるとかなんとかいう問題がありまして、TailWindCSS^[8]に乗り換えました。
リッチなUIを自作するのが割と面倒だったので、いいのがないかなぁと探していたのですが、daisyUI^[9]が良さそうだと思い、ずっと使い続けています。
結構アクティブにバージョンアップがなされており、乗る船を間違えずによかったと思っております。はい。

Bootstrapを使っていた頃の一番の不満点は、パット見でBootstrapで作ったサイトと分かるところでした。
他のサイトを流用するのがちょっとためらわれてしまう...という。。
それに比べて、TailWindCSS+daisyUIでは、コンポーネントを流用しつつ、細部をTailWindCSSで調整できるので、見た目ではわかりにくい感じで、コードの流用ができるというのが、まじ最高なところです。

私のこだわりポイントとしては、Google Fonts^[10]で日本語フォントを読み込んで使用しています。
サイトの文章自体は日本語で書いているのですが、PC端末に日本語フォントがない場合でも閲覧できるようにと配慮をして設計しています。

src/style.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans+JP:wght@100..900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  font-family: "Noto Sans JP", "Noto Emoji", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

⚂ 今や標準！？ light & darkモードの切り替えも可能に!

ダークモードが世に出てきた当初（2019年Google, Appleが先駆けだそうな^[11]）、結構批判的な意見が多かったように思いました。
そして、フロントエンドエンジニアとして、「うゎー設計変えるのめんどくせぇ。。」と思っていた覚えがあります。。

しかし、今ではかなり一般的な機能として認知されて、よっぽどブランドを訴求するサイトでない限り、新規開発する際は標準搭載されることが多いように思えます。
PC、スマホでのモード切替にあわせて、アプリやサイトのデザインを変えるというのがユーザーフレンドリーな常識となりつつあります...よね...？（私だけ！？）
私自身、結構好きな機能なので、自分のサイトでも対応できるように設計してみました。

theme-changeデモ@FujiiWebWorks

daisyUIでは、👇の theme-change を使った実装が推奨されているので、例に習ってBoilerplateでも導入しています。

src/main.js

import { themeChange } from 'theme-change'
import './style.css';
// これ書くだけ！
themeChange()

src/ndex.html

<button class="btn" data-set-theme="light" data-act-class="ACTIVECLASS">ライトモード</button>
<button class="btn" data-set-theme="dark" data-act-class="ACTIVECLASS">ダークモード</button>

また、lightモード、darkモードのデザインは、daisyUIのthemeに上書き修正することで、幾分手間を省けるように設計しました。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
import daisyui from "daisyui"
export default {
  content: ['./src/**/*.{js,ts,jsx,tsx,html}'],
  daisyui: {
    themes: [
      {
        light: {
          ...require("daisyui/src/theming/themes")["light"],
        },
        // daisyUIのtheme-lightをオーバーライド
      },
      {
        dark: {
          ...require("daisyui/src/theming/themes")["dark"],
        },
        // daisyUIのtheme-darkをオーバーライド
      },
    ],
  },
  plugins: [daisyui],
}

⚃ p5.jsでクリエイティブ・コーディングできるように...!

...そもそも、このホームページリニューアルの目的が、クリエイティブ・コーディング の勉強をしつつ、作品を公開できるようにしたかったというのが第一でした。

全画面表示でなんか素敵でイケてる作品を(ダラダラ)作っていきたい。
ということで、いろんな開発環境候補を考えた結果、p5.js^[12]を採用しました。
特に開発経験があるわけではないのですが、比較的自由度が高く、数学チックな作品サンプルがたくさんあるというので、取り急ぎこちらでいろいろ作ってみようと思いました。

https://p5js.org/examples/

画面リサイズにあわせた全画面表示については、こちらの記事^[13]を参考に、TypeScript版に書き換えてみました。

src/main.js

import p5 from 'p5';

new p5((p: p5) => {
  let w = window.innerWidth;
  let h = window.innerHeight;

  p.setup = () => {
    const parentElement = document.getElementById('app');
    if (parentElement) {
      p.createCanvas(w, h, parentElement);
    } else {
      p.createCanvas(w, h);
    }
    // 日本語が使えるように
    p.textFont('Noto Sans JP');
  };

  p.draw = () => {
    // ここにいろいろ書く
  };

  window.onresize = () => {
    w = window.innerWidth;
    h = window.innerHeight;
    p.resizeCanvas(w, h);
  };
});

⚄ あえてReact不採用。ページ毎にhtmlファイルを作成し、css,js非共通化（SSG）

p5.jsで創作がしたかったので、あえてcssやjsを共通化しない仕様としました。
SSR(Server Side Rendering)は一切使っておらず、特に非同期で読み込ませるものもないので(...本当はそういうわけでもないのですが、面倒なので...)、React等も不採用としております。

👇の vanilla-ts^[14] をベースにBoilerplateを作っています。

ページ毎にhtmlを分けているので、新規ページをガンガン追加するようなサイトでは、こちらのBoilerplateは採用しないでください...!!
私のHPの場合、トップページとポートフォリオページの2ページ構成を想定しており、ブログなどは外部サービスにて運用。お知らせはSNSでを想定しています。

※新規でhtmlファイルを追加する場合は、 vite.config.js を更新してください ^[15]。

vite.config.js

import { resolve } from 'path'
import { defineConfig } from 'vite'
export default defineConfig({
  root: "src",
  publicDir: "../public",
  build: {
    outDir: "../dist",
    emptyOutDir: true,
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'src/index.html'),
        portfolio: resolve(__dirname, 'src/portfolio/index.html'),
        //ここに新規ページのhtmlファイルパスを追加
      },
    },
  },
})

😎 おわりに

なんだか自分の思い満載のBoilerplateになっちゃって、汎用的に使われるかというと微妙なところかと思いますが、何かみなさんの趣味の参考にしていただけると幸いです♪

開発・公開の土台は作れたので、ちょこちょこいろいろ作っていこー

追記: p5.js Discordコミュニティにて

クリエィティブ・コーディングははじめたばっかりなので、情報収集がてらp5.jsコミュニティ@Discordに登録してみました。
そこで、初学者に優しいリンクリストが公開されていたので共有しますー👇
色々見て勉強しようー

@mcintyre 2022/08/19 08:05
Just starting out with p5.js? Have a look at some of these wonderful resources from around the web:
❤️ p5.js Website -- Learn Page https://p5js.org/learn/
🧡 OpenProcessing -- Learn Page https://openprocessing.org/learn/
💛 The Coding Train -- Code! Track https://thecodingtrain.com/tracks/code-programming-with-p5-js
💚 Kadenze –- Introduction to Programming for the Visual Arts https://www.kadenze.com/courses/introduction-to-programming-for-the-visual-arts-with-p5-js/info
💙 p5.js Editor https://editor.p5js.org/
💜 The Coding Train -- Tools https://thecodingtrain.com/guides/getting-started#tools

追記2: PythonのManimって知らなんだ

クリエイティブ・コーディングの開発環境をどうしようかなーと考えていて、候補の一つにPythonでのコーディングを考えていました。
Manimというのが有名みたいで、アカデミック感のある作品が作れそうだとウキウキしてましたが、動画出力しかできなさそうなので、今回は見送りました...
(Webカメラやタッチ入力などを使ったインタラクティブな作を品さくっと作ってみたいので...!)

脚注

Vite - Next Generation Frontend Tooling https://vitejs.dev/ ↩︎
ヴィータ（CV : 真田アサミ）| 魔法少女リリカルなのは Reflection 公式サイト https://www.nanoha.com/archive6/character_vita.html ↩︎
TypeScript: JavaScript With Syntax For Types. https://www.typescriptlang.org/ ↩︎
Netlify -Connect everything. Build anything. https://www.netlify.com/ ↩︎
Cludflare Pages - Build fast sites. In record time. https://pages.cloudflare.com/ ↩︎
Bootstrap - Build fast, responsive sites with Bootstrap https://getbootstrap.com/ ↩︎
Foundation - The most advanced responsive front-end framework in the world. https://get.foundation/ ↩︎
tailwindcss - Rapidly build modern websites without ever leaving your HTML. https://tailwindcss.com ↩︎
daisyUI - The most popular component library for Tailwind CSS https://daisyui.com/ ↩︎
Google Fonts - Browse Fonts https://fonts.google.com/ ↩︎
The past, present, and future of Dark Mode https://uxdesign.cc/the-past-present-and-future-of-dark-mode-9254f2956ec7 ↩︎
p5.js - a friendly tool for learning to code and make art https://p5js.org/ ↩︎
p5.jsのCSSで画面幅を設定とリサイズ対応【Typescript】 https://tech-lab.sios.jp/archives/39350 ↩︎
Scaffolding Your First Vite Project https://vitejs.dev/guide/#scaffolding-your-first-vite-project ↩︎
In vite, is there a way to update the root html name from index.html - Stack Overflow https://stackoverflow.com/questions/71295772/in-vite-is-there-a-way-to-update-the-root-html-name-from-index-html ↩︎