ホームページを公開しました。

ホームページを公開しました。

私"ちょらん"のホームページを公開しました。 普段はフードデリバリーの配達員をやりながら、時折Web開発、Web制作の仕事をしたりして暮らしています。

このサイトは、私の普段の活動を発信していくために作成しました。 今後も記事をできるだけマメに更新して、このHPが私の名刺代わりになるようにしていきたいです。

このHPを作るのに使用した技術

以下、主な使用技術とそれぞれの使用感を書き残します。

cloudflare Workers

前から興味があったのと、料金の優位性があったので採用です。 Workersの上で動かしたかったので、HonoでUIからサーバーサイドまでやることにしました。 Cloudflareのサービスで完結する形でやるのが初めてでしたが、特段困ることもなくスムーズにデプロイできました。 とにかく安いので良き。 これを採用したことによってNode Runtimeでしか動かないライブラリなどは使用できず、慣れたツールを使えない箇所がかなりありました。 普段やってるNext.jsでの開発と違ったので少し苦しみましたが、要件がシンプルだったので大きな苦労はありませんでした。

Hono

APIを書くのに使うのが一般的な気もしますが、JSXが使えたりUIの方も書けるとのことだったのでやってみました。 もともとHonoはNext.jsのプロジェクトのRoute Handlerに入れて、APIのコーディングを楽にする用途で使ったことがありました。 UIも全部Honoで書くのは初めてでしたが、AIに助けられながらコーディングすればどこか一箇所に詰まってたくさん時間を費やすことはありませんでした。 このサイトが個人用のブログサイトなので、Next.jsで書いてVercelにデプロイするほうが開発速度は早かった気がします。 とにかくさっぱりかけて良いです。素晴らしいFW。書き味◎。

Cloudflare D1

記事のデータを保存するのに使っています。

Cloudflare R2

画像などはこちらに。

Drizzle

確かPrismaがエッジで動かなかった気がしたので、消去法でDrizzle。 一応Prismaもどうにかすればエッジで動かせた気もしなくもないですが、ここ最近PrismaよりDrizzleを採用されるケースがSNS上などで増えている気がしたので、好奇心もありDrizzleに。 今のところデプロイでもマイグレーションに苦労することなどはなく。

スタイリング

Tailwindを中心にして、Naviなど動きがあるものはcssをベタ書きしました。

その他

Markdownエディタにcodemirrorを選んでます。 エディタ用のライブラリがいろいろあったんですが、どれが適しているかわからなかったのでGPTにお勧めされたものを採用しました。 フロントエンドにはViteを入れてます。Honoのcreate appコマンドで選べます。便利。

余談ですが、今回の開発で初めてClaude Codeを使ってみました。 便利すぎて驚きました。今後は自分でコードを書く割合が圧倒的に減りそうです。 SaaS関連株の株価を下げるには十分な威力だと思いました。これはすごい。