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...

IntroHono は Web 標準の Request を受けて Response を返す Web フレームワークです。Cloudflare Workers や Bun などの JavaScript ランタイムは、(request: Request) => Response 関数(以後 fetch ハンドラー)を渡してやれば、それがそのまま HTTP ハンドラーとして機能します。Hono はそれらのランタイムが要求するインターフェイスを満たしているため、簡単に Hono とランタイムを組み合わせることができます。一方で Node.js は node:http モジュールの...

はじめにあなたのTailwind CSS、ベースラインに準拠していますか？Tailwind CSSを使っていると、ブラウザ互換性の問題に気づきにくくなります。開発者はユーティリティクラスを書くだけ、裏側でどんなCSSプロパティが生成されているかを意識することが少ないためです。本記事では、Tailwind CSS v4が生成したCSSファイルに対して、stylelint-plugin-use-baselineでWeb Platform Baseline準拠チェックを行う手法を紹介します。 Web Platform BaselineとはBaselineは、主要ブラウザ（Chr...

microCMSのようなヘッドレスCMSは便利ですが、下書きした投稿のプレビュー機能はアプリケーション側で実装する必要があります。実装にあたって難しかったのは、静的ページをプレビュー時だけ動的レンダリングに切り替える設計でした。Next.jsの動的APIをどこで・どの条件で呼ぶかによって、通常時のキャッシュ戦略に影響が出てしまいます。加えて、プレビュー終了の仕組みやVercelのPassword Protectionとの共存など、周辺の設計判断にも時間を使いました。この記事では自分が詰まってしまったり、注意が必要と感じた箇所をまとめています。次のような流れで説明しています。プレ...

2026年になってしまいましたが、State of chot Inc. 2025 の集計結果を発表します！ State of chot Inc. とは？世界中のJavaScriptエンジニアのアンケートをもとに業界の動向やトレンドを調査する State of JavaScript というものがあります。それにならって、ちょっと社で働く皆さんのあれこれについて統計を取ってみようという企画です！（名前に "2025" と入っていますが、毎年やるかは未定です…… ！） 調査方法Google フォームを用いて回答を募集回答期間: 12/15 ~ 12/22 回答者合...