最近はNewというサービスをつくりました。自分用ではあるのですが、公開しています。今回は、Newの技術スタックを余すことなく全て解説（？）し、僕の技術選定に関する考えや想いを書ければなと思います。本当はZennでちゃんとした記事を書きたかったのですが、そこまでの元気がなくここで供養することとしました。
本当はリポジトリを公開にしてpackage.jsonを見てもらうのが一番はやいのですが、gistにpackage.jsonを貼り付けて公開することにしました。
一番上からいきます。
date-fnsはdateを操作したりするライブラリです、昔だとmomentが一強だったイメージなのですが、いつからか移り変わり今一番使われているライブラリはdate-fnsだと思っています。これを使い始めた理由は単純で、後述するshadcn/uiがこのライブラリを使うのを見て、それだったらわざわざ別のライブラリを入れるよりもこれに乗っかるのが最善だと判断しました。（その際に乗っかっていいものなのかの調査はしています）
その次はmantine-hooksですかね。これも名前の通りですが色んなhookがあって便利です。このプロジェクトではdebounceくらいにしか使っていないので、react-useとかでも良かったんですが知り合いのエンジニアが「これも良いよ」とおすすめしてくれたので使ってみました。使ってみたいものを使ってみるのが個人開発の醍醐味の一つ。
ORMはPrismaです。僕は今までPrisma1本でやってきています。Rust Freeだと謳いながらコード内にwasmが埋め込まれていた事件などがあった時期はDrizzleに移行を考えましたが、Drizzleの書き方やメンテナーの発言、Drizzleとしての動き方がいまいちでなんだかんだPrismaを使い続けています。Drizzleがv1になったら使ってみようかなあと思っていますが、そう思いながら1年くらい経った気がします。PrismaもPrisma Next(Prisma 8)で完全にrust freeになることが発表されているので、期待しています。
データベースはNeonを使っています。特に理由はないですが、Supabaseは別のプロジェクトですでに使っていたので課金したくなくて別のプロバイダーを探していたところNeonになりました。日本リージョンないですが、無料プランでもproductionとdevelopmentの2個の環境を使うことができるので結構うれしいです。Supabaseだとできなくて苦しんだ経験があります。まあ、今回はdevelopment使ってないんですが。
ちょっと脱線しますが、僕はHetzner (最近価格改訂があり今はあまり安くありませんが、価格改定前はかなり安く、僕はその時に契約できています🎶）でVPSを借りていて、このサービスのデータはVPSでスクリプトを定期実行することにより収集しています。以前別のサービスを作るときにCronがやりたくてVPSを契約しました。(その時はcron内で行うsub requestがかなり多かったので、cloudflareやvercelは選択肢に入りませんでした） VPSはDokployを使ってセットアップしていて、めちゃくちゃ良いです。もうDokployがないとVPSをセットアップできません。全人類が使うべきだと思っています。以前はCoolifyを使っていましたが、Dokployに移行しました。
脱線しましたが、次はtanstack/aiですね。個人的に今回は個人開発ということもあって新しい技術に触れたいなという思いがありかなりTanstackに賭けたスタックになっています。tanstack/aiは特に言うことないんですが普通に良かったです。tanstack/devtoolsという開発環境で使えるデバッグに役立つツールみたいなのがあるんですが、それとtanstack/aiが連携できて超開発しやすかったです。あと、@tanstack/ai-anthropicみたいな不要なプロバイダのも入ってるのはミスです。あとで消しますw
tanstack/aiの話をしたので、ついでに使っているモデルについても話します。今回はopenaiのgpt-5.4-nanoを使っています。まあギリ使用に耐えうる速度で検索条件を反映してくれています。たかが検索にそんなに待ちたくないのですが、検索条件を自分で入れたりするUIよりも自然言語で反映できるのはやっぱり便利だなあと感じます。あと、今回は速度重視だったのでちょうどpreviewでリリースされたCerebrasのgemma-4-31bを試したんですが頭が悪すぎていい検索条件を生成してくれませんでした。でも尋常じゃない速度(1,800TPS)で1日100万トークンまで無料で使わせてくれるのはすごい。覚えてたらなんかに使えるかも
次はtanstack-hotkeysですね。このライブラリはまだベータどころかアルファです。理由はtanstackだからです。これも特に言うことなく使いやすかったです。さすがtanstack。でもやっぱりまだアルファだしお仕事だと使えないライブラリだな〜と思います。仕事だったらreact-hotkeys-hookを使うのが良いのかな？俺はtanstackに全て賭ける！（ちなみに、このライブラリをどこで使っているかと言うと、テーブルの行を選択した時に矢印キーで移動できるようにするためです）
次はtanstack query/table/router/startですね。tanstack startを選定した理由は、tanstackが好きなのと、Nextjsに飽きたのと、cloudflare workersにデプロイしたいからです。Nextjs x Prisma x cloudflare workersと聞いてここまで読んでいる人の中に嫌な気持ちになった人がいると思います。僕もその一人です。できることならopennextは使いたくない、そんな状況で嫌々ながらも使わざるを得ずopennextを使ったらPrismaのアップデートによりopennextのbuildが通らない！そんなことになるのはもう嫌でtanstackにしました。いやー、最高な開発体験でした。初回デプロイまで5分もかかってない気がします。ありがとうtanstack。
次はtanstack/virtualですね。テーブルの無限スクロール対応に使っています。これもすごく使いやすいです。これは仕事でも個人でも何回か使っていますが、まだ難しいと感じました。とりあえず使うことはできるがその程度という感じで、もっとちゃんと使って色々最適化できるようになりたいというところ。
UIはshadcn/uiで作っています。楽です。astryx?みたいなmetaが発表したやつも気になりますが、それより先に作っていたのでshadcn/uiを採用しました。
あとはLinter/Formatterですね。もちろん（？）oxlintとoxfmtを使用しています。やっぱり早いしcloudflareに買収されたvoidzeroが作っているので安心感もあります。tsgo使ってtype checkも行っても早すぎて気持ちいいです。
最後にportlessですね。僕はフリーランスで複数の開発を同時に行なったりするのでlocalhostのcookieが汚染されがちです。でもこれを使えば認証情報もごっちゃにならないし--ngrokで外部公開すぐできるしめっちゃ良いです。Web開発するフリーランスエンジニアは結構入れておいたほうがいい気がしてます。
あ、あと忘れかけてたけどパッケージマネージャーはbunです。早いから好きです。というか体感速度としてはnpmがかなり遅くpnpmとbunは同じくらいなのですがpnpmは早すぎるが故なのか帯域幅を圧迫して再生している音楽とかが止まったりするのがうざいのと、単純にBunが好きだから使ってます。Bun 1.4いつリリースされるんだ。2日くらい伸ばされてる！楽しみにしているのに！急ぎじゃないからいいんですけどw
脱線に脱線を重ねて書きすぎてしまいました。3,400文字。最後の方は疲れてきて適当になっちゃってますねw最近明らかに文章を書く能力（元々ないのに）が衰えてしまって、すごく見づらい文章になってしまっていたと思います。そんな中ここまで読んでくれた人がいたら、ごめんなさいと感謝を伝えたいです。
最新の技術でできたNew、せっかくなので触ってみてください。技術以外にも僕なりに考えて使いやすいUIにしようと頑張ってみました。https://new.pnuts.dev/
最近はチームで受託開発もしていて、もし今回のようなスタックで開発したいって人いたら連絡ください。一緒にやりましょう。