Kaito Kaki

はじめにどんなシステムでも認証機能を実装する際、自前で認証システムを構築するのは結構大変です。セッション管理、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;DRConvexを使用する場合、認証処理の中核（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/981006https://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 v15React 19Auth.js v5: 認証ライブラリConform: form管理ライブラリJustd: コンポーネントライブラリTuros: DBDrizzle: 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 = () => {  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-routeshttps://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.ymlDockerfile・my.cnfmysqlログイン・日本語入力確認 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.0re...

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

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

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

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

【Next.js14】next/imageによる画像パフォーマンス最適化（blur・lazyローディング）

はじめにNext.jsのApp RouterのRoutingのまとめの後半になります。前半はNext.js触ったことがある人なら大体分かる内容で、基礎的な部分が多かったと思います。今回は、前回と比べると若干、難解な部分があるとは思いますが、これを理解すれば、実装の幅はかなり高まると思うので、やっていきましょう。前半の記事も読みたい方は以下から読むことができます。https://zenn.dev/sc30gsw/articles/64240c11d7dbf9 Routing Route Groupsこれは、appディレクトリ内のディレクトリに対して使用できる機能です...

【Next.js ✗ App Router】Routingまとめ 〜後半〜

はじめに今回ですが、Next.jsのApp RouterのRoutingについて基礎から内容をまとめていこうと思います。Routingを使いこなせば、開発の幅もかなり広がると感じました。本題に入る前に注釈です。Next.jsのRoutingはそれないに内容が多いので、本記事は全後半に分けております。以下、後半の記事ですので、合わせて読むと、より理解が深まると思います。https://zenn.dev/sc30gsw/articles/67aae793e39d74それでは本題に入ります。 Routing Defining Routesまずはルートの定義ですが、こ...

Kaito Kaki

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【Next.js14】next/imageによる画像パフォーマンス最適化（blur・lazyローディング）

【Next.js ✗ App Router】Routingまとめ〜後半〜

【Next.js ✗ App Router】Routingまとめ〜前半〜

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【Next.js14】next/imageによる画像パフォーマンス最適化（blur・lazyローディング）

【Next.js ✗ App Router】Routingまとめ 〜後半〜

【Next.js ✗ App Router】Routingまとめ 〜前半〜

【Next.js ✗ App Router】Routingまとめ〜後半〜

【Next.js ✗ App Router】Routingまとめ〜前半〜