Four Keysを測定するサイトを作る 1（技術選定、Tailwind、next-intlで国際化）
saneatsu【2025-02-11】Hello, World!
ことの発端
今すでにRemixで作っているアプリケーションもあるので本当にすこーーーーしずつ作っていく。
1日1時間くらい気分転換にやれればいいんじゃないかな...。
Scrapの立ち位置
Scrapは開発時のメモとして書いていく。
去年も1年間、50万文字くらいScrap書いたけどあとから見返せるの便利だし、自分なりに言語化して学んでいくの効果的だったと感じる。
saneatsu【2025-02-11】技術選定
選定基準
-
すべてTypesScriptで書きたい
- Go langとかも勉強してみたさあるけど1人ですべて作っていくことを考えると正直めんどうくさい。
-
使ったことのないものを使いたい
- RemixやTurso（DB）はすでに使っている
結論
| 前回 | 今回 | |
|---|---|---|
| フロントエンド | Remix | Next.js |
| バックエンド | Remix | Hono |
| バリデーション | Zod | Valibot |
| チャート | <未使用> | Recharts |
| データベース | Turso（SQLite） | Supabase（PostgreSQL） |
| インフラ | Cloudflare | Cloudflare + Vercel |
SupabaseとNeonは結構悩んだ。
途中でNeonに変更する可能性もある。
以下のScrapに雑メモを書いた。
その他
構成
この記事の構成に近くなりそう。
そういえばこのoliverさんという方、前に渋谷で開催されたHono x Cloudflareのミートアップでお話してたな。
Hono のすごい点は、そのポータビリティです。「comilio」の開発環境では Next.js を立ち上げた際、バックエンドのコードは Next.js 上の API Routes にマウントされるようになっています。これにより開発環境は Next.js の起動だけで済み、本番環境ではバックエンドを別のところに配置する。ということが可能となります。
要するに、Next.js を Vercel にデプロイしたいけれど、コストの都合や、Database の IP 制限などの要件に対応するためにバックエンドだけ CloudRun など別の場所にデプロイすることがめちゃくちゃ簡単にできる。ということです。
これすごい。
APIドキュメント
Supabaseを調べてたら出会ったApidogというアプリケーション、面白そうなので導入してみたい。
saneatsu
これを見たらSizeがZodの方が小さい。
Valibotの方が小さいイメージだったけど。
一応BundlePhobiaも見ておく。
saneatsu
Valibotのソースコードを見ると、各関数はそれぞれ独立してexportされていることに気づきます。
これによりバンドラーのツリーシェイキングが効果的に機能するようになっています。シンプルなケースではZodと比較して90%以上もバンドルサイズを減らせるとのことです。
saneatsuチャートライブラリ
比較
これを見る限り開発の活発さや、参考までにStarを見るとRechartsは結構「安定の選択肢」って感じなのかな？
この記事の比較表見て決めるわけじゃないけど活発さは大事。
決定
ということで雑に決定。
公式ドキュメントはめっちゃシンプル。
saneatsu
全然考慮してなかったけど、 shadcn/ui もrechart使ってる。
安心&ラッキー。
saneatsu【2025-02-12】Supabase x ORM
この記事ではPlanetScale x Drizzleだった。
自分は現在 Turso x Drizzle。
PrismaよりDrizzleの方が好きなので今回もそうしようかと思っていたら以下の記事を発見。
どうしてもprismaを使いたい理由があるならそれでもいいと思うのですが、supabaseに全部寄せちゃった方が楽だと個人的には思いますね。マイグレーション管理もSupabase CLIでできますし
こういうのってそもそも用意してくれてるやつ使ったほうが後々便利なパターンあると思うんだよな。全くわからんけど。
慣れないものを使っていくというのも目的の一つだし頑張るか...。
そういや、Commit Log大量に扱うならBig queryとかに手を出したほうがいいのかな。
後で考えよう。今はRDBに全部突っ込もう。
saneatsu
【2025-02-18】@t3-oss/env-nextjsで環境変数に型をつける
ここを見てやっていく。
@t3-oss/env-nextjs というものを使って環境変数に型をつけるぞ〜と思ったのだが、どうやらzodといっしょに使うものでValibotは未対応。
どうしよう。一旦考える。
saneatsu【2025-02-18】AIにCommit messageを書いてもらう
背景
自分以外も書くかもだからCommit Messageは英語で書いていきたい。
しかし考えるのは面倒くさい。
aicommits
以前はこの記事をみてaicommitsを使ってみたこともあるがもう1年もメンテされていないっぽい。
OpenCommit
こっちは先週もメンテしてるし良さそう。
こっちでいく。
ただ、Cursor使ってる以上Cursorだけで済む気もしている。
その他
chore: Add hoge みたいに、Prefixの次は大文字英語にしていく。
小文字は受け付けない。我慢できない。
saneatsu【2025-02-19】ドメインを取得する
Cloudflare で調べると「プレミアム」とついているものがある。
プレミアムドメイン名は、人々がオンライン検索でしばしば利用する共通の単語や語句に基づくため、他のドメインより価値があります。
ということだそうで。
アプリ名は1単語（HogeFugaではなくHoge）で、シンプルな造語っぽいものが好みなんだけどそうするとドメインが空いていないのでつらい。
最悪サービス名変えよう。
- app: 取れない
- tech: 取れる($250、更新$500、プレミアムドメイン)
- dev: 取れない
- com: 取れない
saneatsu【2025-02-22】Tailwind v4にしてshdcn/uiを導入
これだけでアプデ出来るの便利〜〜。
tailwind.config.ts は必須じゃなくなったのか。
npx @tailwindcss/upgrade@next
以下コマンドでTailwind v4のshadcn/uiを導入。
pnpm dlx shadcn@canary init
【2025-02-22】VercelのTempalte見てみる
VercelにテンプレがあったのでNex.js、Tailwind、Supabaseでフィルタリングしてみる（上記のリンクはフィルタリング済み）。
