makewith.jp をつくり直す

これからの makewith.jp を、Void を使ってつくり直しています。今回は、その最初の記録です。

# 何をつくり直しているのか

以前の makewith.jp では、イベントサイトや場所のサービスへのリンクを掲載していました。その後、サービスを閉じ、サイトもいったん役目を終えました。

これからは、もくもく会のお知らせや、つくったもの、つくっている途中のことなどを載せていく場所にします。

まずは自分自身のものづくりや活動の記録から始めて、この場所を少しずつ育てていくつもりです。

# Void を選んだ理由

Void は、Vite をベースにフロントエンドとサーバーをまとめて開発し、Cloudflare Workers にデプロイできるフレームワークです。データベースやストレージ、認証といった機能も、必要になったものから使えます。

一方で、すべてのページをビルド時に HTML に書き出す、静的サイト生成にも対応しています。設定ファイルに output: "static" と書けば、サーバーを必要としない HTML とアセットだけを出力できます。

export default defineConfig({
  output: "static",
});

今回は、まず静的サイトとして公開することにしました。これまでどおり GitHub Pages を使い、サーバーが必要な機能を追加するときに Cloudflare への移行を考えます。コードをなるべくそのまま使って移行できるといいな、と思っています。

それと、Void 自体を触って理解したいという理由もあります。サイトをつくりながら、開発からデプロイまでの流れをひと通り確かめていくつもりです。

# UI は React で書く

Void では、React、Vue、Svelte、Solid のいずれでもページを書けます。ドキュメントを読んだ範囲では、どれも同じ機能を使えるようになっていて、Void 側の事情で選ぶ必要はなさそうでした。

今回は React を選びました。せっかく新しくつくるなら、React の知見も深めたいと思ったからです。

# JavaScript を送らないページ

最初につくった「準備中」のページは、見出しと 1 文しかないシンプルなものでした。それでも、ブラウザには React 本体を含む約 240 KB の JavaScript が送られていました。

普通にページを書くと、ページ全体がブラウザ側で React のコンポーネントとして動く形になるためです。

Void には、ページの大部分を静的な HTML にして、動きが必要な部品だけに JavaScript を送る islands という仕組みがあります。ページのファイル名を index.island.tsx のようにするだけで、この形式に切り替えられます。

実際に切り替えてみると、ビルドした HTML から <script> タグがなくなりました。

いまのページには動く部品がないので、どのページも JavaScript なしで表示できます。シンプルなページなら、ブラウザに余計な JavaScript を送らずに済むのはいいですね。

# つまずいたところ

npx void init でプロジェクトをつくろうとしたとき、最初はサンプルのページがつくられず、データベースを選ぶ質問で止まってしまいました。

調べてみると、Void はリポジトリの直下に決まったファイル（package.json や .gitignore など）以外のものがあると、空のプロジェクトではなく、既存のプロジェクトとして扱います。今回はカスタムドメイン用の CNAME と、メモ用のフォルダがあったため、いったん別の場所に移してから初期化し、終わってから戻しました。

もう 1 つ、記録の日付でも少し引っかかりました。

Markdown の先頭に date: 2026-10-27 と書くと、YAML では日付として解釈されます。その値をそのまま表示すると、2026-10-27T00:00:00.000Z という形式になってしまいました。

今回は、表示する前に年月日の部分だけを取り出すようにしています。見た目は小さな問題ですが、こういうところは実際に触ってみて初めて気づきます。

# これから

次は、GitHub Actions でビルドから公開までを自動化し、新しいサイトを公開する予定です。

そのあとは、サイトの機能を増やすことばかりに時間を使わず、もくもく会の準備をしたり、実際につくったものや制作途中の記録を増やしたりしていきたいと思っています。

このサイトのコードは GitHub で公開しています。