はじめにアニメや映画など「作品」を検索するときに、以下のようなことで困ったことはないですか？昔見た作品をもう一度見たいけどタイトルを覚えていない好きなジャンルで検索しても見たいと思うものがなかなか見つからない例えば、「昔見たアニメで、主人公が料理を通じて人と繋がっていく話」をGoogleで検索しようとしても、なかなかその作品をピンポイントで見つけることは難しいです。「同じ感じの作品が見たい！」と思って同ジャンルで調べても「あれ、なんか思った内容と違う」となることが結構多いと思います。 類似検索なら、自分の言葉で探せるもし「心温まる家族の絆を描いた作品」と検索する...

個人開発は楽しいですが、ゼロからすべて作ると週末だけではなかなか終わりません。今回は、UI生成AI「v0」と「Claude Code」などを活用し、従来なら2日では終わらなかった開発を土日だけでリリースできた工程を紹介します。このアプリの約9割はLLM（コーディングエージェント）による実装です。人は仕様や品質ルールを考え、実装はAIに任せる――そんな進め方で短期間リリースを実現しました。作ったのはこちらhttps://www.shimizu-okini.com/この記事では、使ったツールのセットアップから完成までの流れをまとめます。また、コードやプロンプトの詳細より「どう進...

軽量でfetch準拠でOpenAPI由来の型推論・補完がそのまま効くopenapi-fetchを使ってみました パッケージインストールnpm install openapi-fetchnpm install -D openapi-typescript 1) OpenAPIを公開（今回はHonoを使用)/doc でスキーマを返す。import { OpenAPIHono } from '@hono/zod-openapi'export const app = new OpenAPIHono()app.doc('/doc', { openapi: '3.1.0'...

Reactでは、JSXを返す関数を組み合わせてアプリケーションを作っていきます。それらの関数は<Component />のように呼び出すこともあれば、Component()のように呼び出すこともあります。後者を使用する機会は多くないかもしれませんが、例えばrender hooksパターンによってカスタムフックからUIを返したいときに使われることがあります。一見どちらも同じようにJSXを返しますが、Reactはそれらをまったく異なるものとして扱います。この投稿では、2つの呼び出し方の違いと、それによって挙動がどう変わるのかを見ていきます。 「コンポーネント呼び出し」と「...

SSGOIとはSSGOI（スゴイ）はウェブでネイティブアプリのようなページトランジションを実装することができるアニメーションライブラリです。2025年10月現在はReact・Svelte・Vueに対応しており、Next.jsなどのフレームワークにも互換性があります。ブラウザ標準のView Transition APIに依存しない独自の実装となっており、すべてのモダンブラウザへの対応を謳っていることも特徴の一つです。https://ssgoi.dev/en Next.jsでネイティブアプリのような画面遷移を再現してみる公式ドキュメントを参考に実際に触って試してみます。今...

Next.jsのドキュメントやQiitaなどでは、URLの末尾に .md を付けるとページ内容を生のMarkdownで取得できます。AIエージェントにコンテキストを渡したり、別クライアントから取り込んだりするのに便利なパターンです。この記事では Rewrites + Route Handlers（App Router） で、/post/hello はHTML、/post/hello.md は text/markdown を返す“二刀流配信”を実装します。 前提Next.js 16.0.0 (App Router)React 19.2.0Markdownでコンテンツを管理して...

ある日、Vercelのダッシュボードを見ると以前はだいたい100KB前後だったページのレスポンスサイズが500KB前後に増えてしまっていました。原因はサーバコンポーネントからクライアントコンポーネントに渡すpropsが巨大だったことでした。SCからCCに渡したpropsはRSCペイロードという形で初回レスポンスのHTMLに含まれるためです。分かってしまえば単純なことなのですが、当時Next.jsのバージョンアップなどの改修も同時に行なっていたために原因調査に手こずりました。そんなわけで、レスポンスサイズが5倍になったときの調査に役に立つかもしれない（？）RSCペイロードの覗き方を...

背景middleware.tsを本番と開発環境で別の内容にする必要があった今までは開発環境のBasic認証にのみ使っていた。新たにリダイレクトの処理を入れるため、middlewareを環境によって分ける必要が出てきた本番環境でのmiddlewareの発火を抑えることも課題だったのでmatcherの記述も追加した 課題middleware.tsは1ファイルしかデプロイできないmatcherを開発と本番で切り替えたいが、process.env.NODE_ENVのような環境による切り替えができない 解決法middleware.tsとmiddleware-f...

ちょっと株式会社の KindBurger です！本記事では、プロンプトだけでは表現しきれないデザイン原則を、デザインシステムを「コンテキスト」として与えることでどう改善できるのかを紹介します。また、v0 にはサンプルのデザインシステムも用意されており、すぐに試すことができます 🎉これを利用すれば、次のように一貫性のあるデザインが整ったサイトを簡単に生成できます。 v0 とはざっくりいうと 「アイデアを素早くかたちにできる」 生成 AI ツールです。自然言語のプロンプトや画像、Figma ファイルなどから、React / Next.js / Tailwind CSS / ...

CloudflareのRedirect Rulesで、すぐに、簡単に、リダイレクト設定ができたので紹介します。 はじめにわたしがプライベートで建てているサービスは以下の構成で動いています。（ドメインは仮のものです）service.example.comメインのEC2インスタンスにつながる。基本的にユーザーはこのドメインにアクセスしてサービスを利用しているmediaproxy-service.example.comプロキシ用のEC2インスタンスにつながる。画像や動画などのプロキシを行っており、画像のURLなどはこのドメインが使われるドメイン・DNS管理は...

はじめに標準の new WebSocket()（RFC 6455）はブラウザ実装で任意のリクエストヘッダー追加を禁止しています。そのため、ハンドシェイクの HTTP リクエストで任意の HTTP ヘッダーを付けることができません。https://github.com/whatwg/websockets/issues/16#issuecomment-332065542WebSocket でアクセストークンを送る方法を調べるといくつか選択肢があることが分かりました。ふとSocket.IOはどうしているのかと思って見てみたら下記の記法が使えるようでした。// クライアントcons...

こんにちは！9/6(土)に開催された「フロントエンドカンファレンス北海道2025」に参加してきたので自分の感想を共有させてください！イベントのサイトhttps://www.frontend-conf.jp/自分で撮った会場（弊社の社長が写っています笑） 参加背景東京に住んでいる私が参加を決めた理由は以下です。会社がスポンサーなのでメンバーとして参加できる！北海道に行ったことないのでこの機会に行ってみたい！ 会社がスポンサーなのでメンバーとして参加できる!自分は参加者としてもこれくらいの規模のカンファレンスは参加したことがありません。なので、前からチャンスがあ...

ちょっと株式会社の KindBurger です！2025/09/06 にて行われた「フロントエンドカンファレンス北海道 2025」にて登壇しました。テーマは v0 という生成 AI ツールで、その特徴や業務での活用について紹介しました。オフラインイベントは初参加かつ初登壇でかなり緊張しましたが、イベントの温かい雰囲気に助けられ、楽しく参加することが出来ました！本記事では、イベント参加のきっかけや当日の感想などを共有します。同じようにイベント参加や登壇を始めてみたい方にとって、少しでも参考になれば幸いです。https://www.frontend-conf.jp/ 参加のき...

CodexやClaude Codeなどの普及により、ターミナル環境に触れる時間が増えた方も多いのではないでしょうか。私自身もともとターミナル環境が好きで、日常のなかで最も長く接している画面とも言えます。普段使っているターミナルの画面毎日使うターミナル環境だからこそ、もっと便利に、もっと楽しく使えるものになれば素敵だと思いませんか？そんな気持ちで私のカスタマイズについて紹介していきます。この記事が、ターミナル環境をすこし良くする一助になれば嬉しいです 🙏 前提私の環境は以下の通りです。仕事：Webエンジニア（フロントエンド）OS：macOS 15.6.1シェル：z...

トップページなど情報量が多いページは、複数のfetch処理ををする場合があります。どのように実装する事が適切か説明します。 1つずつデータを取得fetchTopPageDataを内で、様々なデータを取得する為複数のfetchを実行しています。1つずつデータを取得する直列タイプです。今は2つのfetchですが、fetch処理が増えると待ち時間が増えます。type FetchResponse<T> = Promise< | { isSuccess: true; data: T; } | { isSuccess: ...

はじめにAIチャットアプリケーションを開発していると、従来のWeb開発とは異なる課題に直面します。レスポンスが少しずつ生成されるストリーミング処理、不完全なMarkdownのリアルタイムレンダリング、複雑なチャット状態の管理など、AI特有の要件への対応が必要です。この記事では、これらの課題を解決するVercel製の3つのツールを紹介します。実際のプロダクション環境での使用経験を基に、実装パターンと注意点を解説します。ツール役割解決する課題Vercel AI SDK基盤層プロバイダAPI統一、ストリーミング処理AI ElementsUI層チャット...

TypeScript の ORM である Prisma の話。Primary Key 制約や Unique 制約のついたカラムを WHERE 句に指定してデータを取得する場合、通常は findUnique を使います。await prisma.user.findUnique({ where: { id: userId } });findFirst というメソッドも存在し、まったく同じように書けてまったく同じ値が取得できます。await prisma.user.findFirst({ where: { id: userId } });しかし、この findFirst が恐ろしい不...

ちょっと株式会社, n13uです. 今回の記事では現在自分が取り組んでいる案件でuseSWR+CQRSパターンを採用しローカルでの状態管理を減らしてみた話をします. 前提条件Next.js 14.x / Pages RouterStatic Exportsで出力されSPAモードで動いているFluxパターンをもとにした自作の状態管理システムから新しい状態管理システムへの移行が必要になっていたほぼ掲示板型のアプリケーションデータベースはFirestoreでアプリケーション（クライアント）側は基本的にFirestoreの更新と表示を行うだけで良い（複雑なローカルでの状態管理が必...

背景複数人で開発するプロジェクトにおいて、必ずしもGit管理されたCLAUDE.mdだけで開発がストレスフリーに進むとは限りません。VSCodeの個人用settings.jsonが数十行に及ぶ人がいるように、Claude Codeも自分好みの設定をしたい場合があります。例えば、自分はあるプロジェクトではZenn記事「Claude Codeの「すぐルール忘れる問題」を解決する超効果的な方法を見つけた気がする」のテンプレを少しアレンジして使っています。CLAUDE.md<language>Japanese</language><character...

Node.js アプリケーションを CommonJS (CJS) から ES Modules (ESM) に移行したのでやったことを書き記します。今回移行したアプリケーションは、バンドラーを伴わない純粋な Node.js アプリケーションです。TypeScript で書かれており、ビルド時には単に tsc で型を落としているだけです。ビルド成果物には require / module.exports が残っていて各ファイル同士が参照し合う、古典的なCJSアプリケーションとなります。Node.js バージョンが 20 とやや古いので、残念ながら TypeScript のまま実行させるこ...