Kaito Kaki

はじめに 最近、State of Javascript 2025が公開されました。 中でも個人的に印象的だったのが、Backend Frameworkのセクションです。 https://2025.stateofjs.com/en-US/libraries/back-end-frameworks/ SatisfactionとInterestのランキングを見ると、Hono・tRPC・ElysiaJSと、RPC機能を持つフレームワークが3つ上位に入ることがわかります。 ! RPC（Remote Procedure Call）とは、リモートのサーバーにある関数を、ローカル関数のように呼び出せ...

【RPC比較】tRPC・oRPC・Hono・Elysia 結局どれを選ぶべき？

はじめに 最近、Claude Codeに Agent Teams という実験的機能が登場しました。 複数のエージェントをチームとして同時に動かし、並列で開発・テスト・レビューを進められる仕組みです。 この機能を使い込む中で、Agent Teamsを本格的に使うなら、チーム編成そのものをどう設計すべきかがボトルネックになると感じました。 After enabling agent teams, tell Claude to create an agent team and describe the task and the team structure you want in natu...

Claude Code Agent Teams を使ってわかったチーム設計の勘所と自動化の限界

はじめに どんなシステムでも認証機能を実装する際、自前で認証システムを構築するのは結構大変です。 セッション管理、Cookie周り、セキュリティ対策など、考慮すべき点が山ほどあります。 私は利用できるのであれば、Clerkや今回のWorkOSをはじめとした認証系SaaSを積極活用することが望ましいと考えております。 そこで今回は、WorkOSのAuthKitを使って、TanStack Startに認証機能を実装する方法を解説します。実際に動くコードを交えながら、セットアップから実装、ハマりどころまでまとめましたので、TanStack StartとWorkOSで認証機能を構築する際は参...

TanStack StartとWorkOSで認証を実装する

はじめに 今回、HonoからElysiaJSにリプレイスした際に、詰まったポイントと解消法について記載します。 リプレイスの経緯 リプレイスの経緯は以下2つになります。 優れたパフォーマンス: ベンチマーク上で高いパフォーマンスを示している OpenAPI準拠: デフォルトでOpenAPIに対応している 保守性: 記述量をHonoより減らせる この3点からHonoからElysiaJSへのリプレイスを行いました。 https://elysiajs.com/migrate/from-hono.html それでは本題に移ろうと思います。 注意点 早速、注意点ですが、Middl...

【ElysiaJS】Honoからの移行でハマった！Middlewareとスコープレベルの重要性

はじめに 今回ですが、TanStackのフレームワークであるTanStack Start上で、 TanStack DBによるクエリとElysiaによるAPIを使ったローカルファーストアプリ開発について記述してきます。 この記事でわかること この記事では以下について解説しています。 TanStack DBの概要 TanStack DBによるCRUDの実装方法 ElysiaによるAPI側のCRUDの実装方法 ElysiaとTanStack DBの連携 まずはTanStack DBの概要から解説していきます。 TanStack DBとは ToDoアプリ開発に入る前に、まずは、T...

【TanStack DB ☓ Elysia】クライアントで完結するローカルファーストアプリ開発 —— 再レンダリング最適化を自動化しよう

はじめに 今回ですが、Convex・TanStack StartにBetter Authを統合させた認証機能の実装をしたので、実装手順・方法を紹介したいと思います。 また、今回の実装を行ったソースは以下となります。 https://github.com/sc30gsw/tanstack-convex-better-auth-example TL;DR Convexを使用する場合、認証処理の中核（Better Authの主な機能実装）はConvex側で必要 TanStack StartではBetter Authの client定義が必要かつConvexのSiteURLを設定する必...

【保存版】Convex × TanStack Start × Better Auth 認証実装ガイド

はじめに：AIコーディングの新たな可能性 Claude Codeを使ってコーディングをしていると、こんな悩みを抱えたことはありませんか？ プロジェクトの全体像を理解してもらうのに毎回長い説明が必要 トークン消費量が気になって、詳細な指示を躊躇してしまう 同じような説明を何度も繰り返している コンテキストが切れて、以前の作業内容を忘れられてしまう これらの問題を一挙に解決してくれるのが、今回紹介する「Serena MCP」です。このオープンソースツールを使うことで、Claude Codeの理解力と効率性が劇的に向上し、まさに「10倍賢く」なったような体験を得られます。 Sere...

Claude Codeを10倍賢くする無料ツール「Serena」の威力とトークン効率化術

はじめに 今回は、Claude CodeのCustom slash commandでテストを自動化できたため、その方法を共有します。 前提 AIとテスト駆動開発の相性の良さ 近年、Vibe Coding（AIとの対話的プログラミング）とテスト駆動開発の組み合わせが注目されています。以下の記事でも詳しく解説されており、品質と開発効率を両立できる手法として紹介されています。 https://www.wantedly.com/companies/wantedly/post_articles/981006 https://zenn.dev/farstep/articles/claud...

【Claude Code】Custom slash commandでテストを自動化した話

はじめに 最近、API設計とフロントエンド実装をもっと楽にできないかと模索していた中で、 oRPCというライブラリに出会いました。 https://orpc.unnoq.com/ このoRPC、RPCの手軽さとOpenAPIドキュメント生成の恩恵を いいとこ取りしたかのような素晴らしい体験を提供してくれます。 しかも、Next.js（Server Actions含む）にも対応しており、 最新のフルスタック開発にぴったりな設計になっています。 本記事では、 「そもそもRPCとは何か？」 「RPCが持つ課題とは？」 「oRPCがそれをどう解決するのか？」 「Next.jsでの具体的な使...

RPCなのにOpenAPIも自動生成？oRPCの衝撃

はじめに React 19 では useActionState と Server Actions を使う機会が大幅に増えたことでしょう。 しかし、フォームアクションの結果に応じてトーストを表示するなど、UI を適切に更新しようとすると意外と手間がかかります。特に、useEffect を使わずにこれを実現しようとすると、どう書けばいいのか悩むこともあるのではないでしょうか？ 筆者も、この記事で紹介する方法に出会うまでは、「Server Actions + useActionState はリダイレクトする用途なら便利だけど、トースト表示やモーダルの開閉には結局 useEffect が必要...

useEffect で苦しまない！useActionState × Server Actions ベストプラクティス

はじめに 今回は、Better Authというライブラリによる認証システムの実装について解説します。 Better Authは2024年11月22日にv1.0がリリースされたばかりの、TypeScript製の新しい認証ライブラリです。 https://www.better-auth.com/ 公式ページにあるように、フレームワーク非依存なことがメリットであるため、一般的に使われるフレームワークでは、Better Authをフルに活用することができます。 また、パスキー認証といった最新の認証標準にも対応しています。 もちろんEmail・PasswordやUsernameといった認証規格...

【パスキー・2FA・OAuth】Better Authで作るモダン認証システム

はじめに 今回はAuth.js v5とNext.js 15およびReact19による、Server Actions対応版の認証機能の実装方法について解説したいと思います 技術スタック 最初に、今回使用する技術スタックを紹介します。 以下のようになっているので、認証関連の処理以外の、各セクションの事細かなコードについては、ドキュメントを参照いただければと思います。 Next.js v15 React 19 Auth.js v5: 認証ライブラリ Conform: form管理ライブラリ Justd: コンポーネントライブラリ Turos: DB Drizzle: ORM...

【Auth.js v5 ✗ Next.js 15】Server Actionsで実装する認証機能

はじめに 今回は、React 19から搭載されたuseのアンチパターンについて解説します。 これまでにできなかった、Promiseを子コンポーネントに渡せたりと、便利で画期的なHookなのですが、使い方には、一定の注意が必要なので、そこを見ていきたいと思います。 use とは useはPromiseやContextなどのリソースから値を読み取るためのAPIです。 以下のように、Contextから値を読み取ったり、Promise解決ができたりするHookです。 import { use } from 'react' const Example = () =&gt; { con...

【React 19】 use APIのアンチパターン

はじめに 今、Next.js 15がホットな話題ですが、そのNext.js 15で導入された、use cahceにより、これまでのNext.jsのcache戦略が大きく改良されることになりました。 また、よりシンプルかつ柔軟なcache戦略を取り入れやすくなり、大幅に開発体験が改良されることになるであろうため、use cacheについて以下の記事を参考に解説しようと思います。 https://nextjs.org/blog/our-journey-with-caching Next.js 14までの課題 1. fetch()について これまでNext.jsのfetch()とい...

【Next.js 15】cache実装が大幅改良される話

はじめに 本記事では、Next.jsのIntercepting Routesの基本についてまとめます。 Parallel Routesと合わせて用いられることが多く、便利な機能なのですが、意外と基本的なことを知っていないと使いこなせないかつ意図した挙動にならないということでハマりやすかったりするので、まとめておこうと思います https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes https://nextjs.org/docs/app/building-your-applica...

【Next.js】Intercepting Routesって何やねん

はじめに 最近、Next.jsのApp RouterでもRemixでも開発することが多々あります。 そこで、要件によっては1ページで複数のデータフェッチを行うことがあり、その際に興味本位ですが、直列と並列でパフォーマンスを比較してみました。 その結果とともに、RSC環境だったり、Reactのフレームワークでは複数のデータフェッチは並列でやることをおすすめしたいと思い、本記事を記述しようと思いました。 TL;DR データ取得が完了するまでコンポーネントはレンダリングされない ユーザーのリクエストに対してレンダリングはなるべく早く完了させる 複数のデータフェッチは並列にしよう ...

【React】複数のデータフェッチは並列で取得しよう

はじめに 今回は、prismaとDockerを用いてMySQLでデータベースの構築をしたのですが、その際、MySQL上で日本語入力したいと思ったのですが、それなりに時間がかかったため、その方法を備忘録的に残そうと思い、記事にいたします。 前提 prisma導入済み（npm install --save-dev prisma実行済み） schema.primsa作成済み(npx prisma init実行済み) 実装 それでは以下の順に見ていきましょう。 docker-compose.yml Dockerfile・my.cnf mysqlログイン・日本語入力確認 d...

【prisma ✕ Docker】MySQLコンテナで日本語を使用する方法

はじめに 本記事では、Remixとremix-auth・remix-auth-googleを用いた、Credential認証（メールアドレス・パスワードによる認証）とGoogle認証の実装方法について解説します。 コードの全容はGitHubにありますので、気になる方やより詳しく見たい方は見てみてください。 https://github.com/sc30gsw/fullstack-remix-app 環境 実装環境は以下のとおりです。 @remix-run/react ^2.8.0 @remix-run/node ^2.8.0 @remix-run/serve ^2.8.0 re...

【Remix v2】remix-auth・remix-auth-googleによる認証機能の実装方法

はじめに 最近、「App Routerで開発すること多いけど、RSCを最大限活用できていないのでは？」と思ったので、MVCアーキテクチャからRSCにかけてのレンダリングの変遷を調べ、どのようにしたら、RSCにおける良い実装ができるかを学習したので、その内容をまとめたいと思います。 本記事では、MVC〜RSCの変遷を記述しているのですが、具体的には、以下の順で解説しています。 1.MVC 2.SPA 3.SSR 4.RSC これらのレンダリングの変遷を見ていき、RSCでどのように実装したら、よりパフォーマンスの良いフロントエンドを開発できるかを解説しようと思います。 MVCアーキテ...

【Next.js】RSCから見るレンダリングの変遷（MVC〜RSC）

はじめに 今回は、Next.jsを使用して画像をblurローディングする方法についてまとめます。 また、デモ動画では高速表示捺せ対画像とそうでないblurの画像の表示比較を行い、違いを確認しています。 前提 今回の実装では、MicroCMSからデータを取得しています。 ただ、個人的には、動的データの場合、next/imageのblurローディングではなく、Suspenceで囲って、画像も含めたプロパティ全てをローディングにしてから表示する実装をすることをおすすめします。 blurローディングはLPなど画像をそれなりに使用する場合で、初期表示時に画像が表示されるが、高速表示の優先度...