はじめにプライベートで進めているプロジェクトで、複数サイトを1つの基盤で動かす仕組みを作成しています。今回はデプロイフローについて、背景や構成をご紹介します。 本記事で解説しないこと具体的なコード、設定値ハマりポイント、トラブル等（特に詰まることがなかったため）認証・認可などの権限、マルチテナント時におけるセキュリティ など 背景全体構成がほぼ同じサイトが複数あるのですが、リポジトリを分けて管理しており、同様の変更を各リポジトリに対して行って回らなければならないという、メンテナンスコストの高い構成となっています。一般向けサイト: Next.js SSGCM...

最近、Claude Code から使うことを前提にした小さな CLI ツールを Go でつくりました。きっかけは「過去に似た実装がないか、複数のリポジトリを横断して探したい」という場面がちょこちょこ出てきたことです。GitHub を毎回探しに行くのが地味に大変だったので、自然言語で投げたら良い感じに探してくれるとうれし〜と思ったのがはじまりでした。で、実際につくってみると人間向けの CLI とは違う設計判断があり面白いな〜と思ったので、気づいたことをまとめてみます。 1. Skill の内容は CLI への参照だけに留めて、使い方は CLI に同梱するClaude Code ...

2026年6月17日に、Vercel社が主催するVercel関連製品/OSSのカンファレンスVercel Ship Londonが開催されました。2024までVercel Shipとして開催され昨年、サンフランシスコで１度だけ「Ship AI」として開催されたイベントの復刻版ですかね？今年からはアムステルダム等欧米圏で複数回開催する方式になりました。https://vercel.com/ship/londonカンファレンスの目玉としてGuillermoが紹介したのが、エージェント開発用フレームワーク「Eve」です。主に以下のVercel提供のプロダクト・OSSを組み合わせたEveはエ...

はじめにCIのテスト用DBを共通にしていると、PR間でデータが競合してしまいます。TursoのBranching機能でPRごとに独立したDBを用意し、自動テストを回す構成を組んだので紹介します。 TursoのBranching機能https://docs.turso.tech/features/branchingTursoのBranching機能を使うと、既存のDBからスキーマとデータをまとめて複製できます。複製したDBは元のDBから独立しているため影響を及ぼすことがありません。執筆時点で、DB数の上限はFreeプランで100、有料プランでは無制限となっています。Dep...

TypeScript 7の襲来2026年4月21日、Microsoftは TypeScript 7.0 Beta を公式に発表しました。これはTypeScriptの12年の歴史における最大級のアーキテクチャ転換であり、TypeScript自身で書かれてきた既存コンパイラを丸ごと Go へ移植 した、いわば「中身を入れ替えた」リリースです。本記事では、TypeScript 7 の目玉である tsgo の正体、なぜ Go が選ばれたのか(Rust じゃないのか)、現行の 5 系・6 系との違い、そして 7 への移行で準備すべきことを整理します。 TypeScript 7 の主要な...

仕様書にも色々ある業務系の受託開発をやっていると、「仕様書」と言っても読み手に合わせて様々な形式のものが必要になります。エンジニア向けの仕様書: 実装の指針、データ構造、エッジケース、テスト観点まで含めたものクライアント向けの仕様書: 「何ができるのか」をビジネス用語だけで書いたもの最近はAIコーディングが主流になってきました。自分は実装前に仕様書を書くワークフローを採用しているのですが、せっかくならこの仕様書をクライアント向けの仕様書にも流用したいと思い、変換用のスキルを作ってみました。 全体像ワークフローはこうなっています。エンジニア向け仕様書（specs）...

なにやら様子のおかしいアクセスが増えている 最近の自分の話やSNS情報ついて（世間話） 自分の案件の話案件スタート時(2025年3月)は、Vercelのコストを下げることを目的にしたNext.jsのアップデートとしてスタートし、コストが高い原因を分析しながら進めてました。VercelのUsageアップデートの対応しながらVercelのログとUsageになにか異常あるなと3月末に気づくことになり、4月からBot対策に本気を出したという感じでした。(コスト下げるために案件やっていたのでこのタイミングでコスト上がってると言われたらふざけんな😡ともなるわけで...)とはいえB...

Valibotのエラーメッセージをカスタマイズする方法について説明します。Valibotは、スキーマを定義しデータのバリデーションを行うライブラリです。バリデーションと切り離せないのが、エラーメッセージです。'Invalid length: Expected >=8 but received 0'のようなエラーメッセージではエンドユーザが困る場合があります。 はじめにValibotは、スキーマを定義しバリデーションしたい値を渡してバリデーションします。import * as v from "valibot";// バリデーション用のスキーマ ログイン機能を想定してい...

はじめにjson-render は、Zod で定義したコンポーネントカタログを介して、LLM が生成した JSON Spec を React コンポーネントとして描画する Vercel Labs 製の Declarative Generative UI フレームワークです。本記事では、その json-render を AI SDK のストリームパイプラインに挟み込み、テキストと Generative UI をインラインで描画する仕組みの実装全体像を解説します。MCP Apps は iframe 内で双方向・継続的な更新が可能な UI を提供します。ただし sandboxed i...

個人のナレッジやdotfilesの管理ではClaudeのMaxプランでClaude Codeを使っています。ある案件で「Claude CodeをAWS Bedrock経由で使ってほしい」という指定が入り、Bedrock版のセットアップが必要になりました。ただ個人作業では引き続きMaxプランを使いたいので、同じマシンでBedrockとMaxプランをコマンドで切り替えられるようにしました。 全体像claude # デフォルト：Bedrock（案件用）cc-my # エイリアス：Anthropic API直接（個人Maxプラン）デフォルトをBedro...

はじめに以前から少し気になっていた、比較的新しい CSS プロパティの ::scroll-marker-group と ::scroll-button を使って Swiper を使ったカルーセル実装置き換えれないか試してみました。なぜ Swiper かというと、現在参画しているプロジェクトで使用されているのでうまくいけば移行できそうと思ったのと、JSカルーセルライブラリとして大きなシェアを持っているためです。 お題：Swiper の Infinite Loop デモ今回の置き換え対象は、Swiper 公式ドキュメントの Infinite Loop デモ です。個人的によく...

robots.txt は更新頻度が高くない分、必要な場面でも見直しを忘れがちです。そこで今回は、Next.js 前提の話ですが page.tsx が PR に含まれていたら、GitHub Actions で robots.txt の確認を促すコメントを付ける例を紹介します。 やったことやったことはシンプルで、PR の差分に page.tsx が含まれていたら、Botが「page.tsx が含まれています」「robots.txt を更新すべきか確認してください」というようなコメントをつけるだけです。これだけでも確認のきっかけとしては十分機能するかと思います。 page.tsx...

はじめにFeature-Sliced Design（FSD）のレイヤー依存ルール、人手で守るの辛くないですか？FSD (v2) は 6 つのレイヤー間で依存を上から下への一方向のみに制限するアーキテクチャですが、このルールは「気をつける」だけではいずれ破綻します。リンターで自動強制したいところです。FSD のルール強制ツールには主に 3 つの選択肢があります。ESLint (eslint-plugin-boundaries 等) - おそらく最も普及しています。no-restricted-imports やプラグインベースです。Steiger - FSD 公式のアーキ...

Claude Codeを使い始めたときに驚いたのは、ファイルを探索して構造や問題点を探し当てるのが上手なことでした。詳細なコマンドを指示しなくても、grepやfindを自ら実行して、コードベースを読み解いて回答を返してくれます。でも、精度が期待よりも低かったり、何かよくわからない処理を延々と繰り返していることもあります。たとえば次のようなことです。直前のやり取りや自分の回答に引っ張られて、遠回りなやり方に固執する会話が長くなるにつれて、途中の情報を見落としたり最初に渡した指示を忘れたりして精度が下がるその一方、CLIツールはAIエージェントのような柔軟性は高くありませんが、機...

概要Next.js で動的ルートを実装していた際に、少し気になる挙動に遭遇しました。npm run dev では問題なく表示できるのに、npm run build && npm run start で起動した環境では同じページが Internal Server Error になります。開発中は再現しないため、最初はルーティングやデータ取得の実装を疑っていたのですが、調べていくと App Router における静的生成と動的 API の扱いが関係していました。 検証環境next: 16.2.1react: 19.2.4react-dom: 19.2....

以前 Convex を少し触ったとき、自分の中ではかなりシンプルな印象がありました。TypeScript で書きやすくて、リアルタイム更新も自然に入ってくる。個人開発で試すぶんには手触りがよくて、「開発体験のいい BaaS」だな、という理解でした。https://zenn.dev/chot/articles/582c381a80d0d1この見方は、今読み返してもそこまで外れていないと思います。実際、今の pricing を見ると、Free & Starter は個人開発やプロトタイプ用途を意識した構成ですし、EU hosting も全プランで利用できます。ただ、最近あらた...

はじめにEC のカートまわりを実装していると、地味に判断が難しいのが「商品をカートに入れたあとで在庫が変わった時の挙動」です。たとえば、カートに商品を n 個入れたあと、別の注文で在庫が n 個を下回ったらどうなるのか在庫が 0 になったら、カート内の明細は消えるのか、数量が 0 になるのかそれは API エラーになるのか、成功しつつ warning が返るのか今回確認していたのは Shopify の Cart API まわりです。このあたりを把握しておかないと、商品詳細画面でどこまで防ぐか、カート画面で何を表示するか、チェックアウト前に何をブロックするかが決めづらく...

概要Cloudflare はしばらく前から Cloudflare Pages でデプロイされているサイトを Cloudflare Workers に移行することを勧めてきています。ビルド時に Hugo のバージョンを指定するための環境変数 HUGO_VERSION について Pages のドキュメントにしか書いていなかったため放置していたのですが、Workers でも設定したら動いたので移行することにしました。 前提Hugo 製の完全に静的なサイトです。Pagefind で検索機能を提供しています。これまでのデプロイは Pages の環境変数 HUGO_VERSION に...

2025年5月23日開催された Anthropic「Code w/ Claude」内セッション Mastering Claude Code in 30 minutes にて Claude Code GitHub Actions（claude-code-action） が紹介されていました。https://www.anthropic.com/events/code-with-claude-2025試したことがなかったので動かしてみることにします。 この記事でやることClaude Code Action を使って GitHub 上で Claude Code を動かすセットアップ...

「もうコード書いてない（=AIが全部書いてくれた）」系の話をより頻繁に耳にするようになりました。その一方、コードレビューまでもAIだけに任せるという現場はまだ多くないのではないでしょうか。AIが主開発者になったことでコードの生産スピードは上がる一方で、その生産スピードに対してレビューのスピードが追いつかない、あるいはレビュワーの負担が大きい、というのは昨今の開発現場の大きな課題の一つと言えるでしょう。そこで、我々開発者は少しでもレビュワーのペインを軽減すべく、より意識的かつ丁寧にレビューしやすいPRを作ることが重要になってきているように感じています。この記事ではレビューしやすいPR...