Claude Code で MCP Tasks と Elicitation を試す
Claude は MCP の Tasks と Elicitation に対応し始めました。Tasks は時間のかかるツール呼び出しをタスク ID とポーリングに分ける拡張で、Elicitation は処理の途中でユーザーに入力を求める仕組み
azukiazusa のテックブログ2
Web フロントエンド要素多めの技術ブログです。週に1度更新されます。
Device Posture API と Viewport Segments API で折りたたみ端末の画面に対応する
Safari 27.1 では、iPhone Duo のような折りたたみ端末向けに Device Posture API と Viewport Segments API が機能フラグ付きで実装されました。Device Posture API
OpenAI の Decisions API で問い合わせの分類と段階評価をする
OpenAI の Decisions API は、入力に対する条件判定・分類・段階評価を返す API です。TypeScript から問い合わせを評価する例を使い、predicate・choice・score の使い分けについて紹介します。
AI SDK の MCP Events 対応で MCP サーバーからのイベントを Webhook で受け取る
MCP のクライアントがサーバー側の変化を知るには、ポーリングするか接続を張り続ける必要がありました。MCP Events はサーバーが購読者へイベントを通知するための実験的な拡張で、poll、push、webhook の 3 つの配信モー
react-devtools-cdt-mcp で AI エージェントが React のコンポーネントツリーを調べられるようにする
Chrome DevTools MCP で AI エージェントはブラウザを操作できますが、DOM からはどのコンポーネントが描画したのか、なぜ遅いのかがわかりません。react-devtools-cdt-mcp はページで import す
エージェントスキル集 pstack の開発原則と使い方
AI が生成したコードを安心して任せるには、実装前の理解と実装後の検証が欠かせません。pstack は調査・設計・実装・レビューを組み合わせるエージェントスキル集です。この記事では pstack の開発原則と使い方を紹介します。
Claude Code の Mods で Claude Code 自身に機能を追加する
Claude Code の Mods は、Claude Code のプロセス内で動く TypeScript/JavaScript の関数でイベントを観察・書き換え・代わりに応答できる仕組みです。settings hooks では難しかった
Void でフルスタックアプリを構築して Cloudflare にデプロイする
Void は VoidZero が開発した、Vite でフルスタックアプリを構築して Cloudflare にデプロイするためのツールキットです。void/db などの import から必要なリソースを推論し、void deploy コマ
GitHub Actions の依存関係を lockfile で固定する
GitHub Actions でタグやブランチを参照すると、ワークフローを変更しなくても実行するコードが変わる可能性があります。Workflow dependency lockfiles を使うと、読みやすいタグ表記を残しながら依存先をコミ
Element-scoped View Transitions で要素ごとに View Transition を実行する
`document.startViewTransition()` の遷移はドキュメント全体で 1 つしか実行できず、ページ全体の上に描画されます。`element.startViewTransition()` を使うと、遷移を特定の要素に限
Go でデスクトップアプリを作る MyGo を試してみた
MyGo は Go でデスクトップアプリを作るフレームワークです。OS の WebView に Web の画面を表示し、Go のメソッドから生成した TypeScript クライアントでネイティブ機能を呼び出せます。この記事ではテキストをフ
MSW v3 の Vite プラグインでモックのセットアップを簡単にする
MSW v3 で公式の Vite プラグインが追加されました。Worker ファイルのコピーや更新が不要になり、virtual:msw からモックを設定できます。この記事では、Vite と TypeScript の小さなアプリケーションにプ
自然言語で操作し、結果を検証するテストフレームワーク e2e
e2e は自然言語による操作と、要素を指定した操作・アサーションを組み合わせられるテストフレームワークです。この記事では Todo アプリを対象に、AI に操作を任せて結果をコードで検証するテストを作成します。
CSS の margin-trim でコンテナーの端の余白を取り除く
カードの内側に padding を設定しても、先頭の見出しや最後の段落の margin が加わり、上下の余白が意図より大きくなることがあります。margin-trim を使うと、要素間の余白を保ったまま、コンテナーの端のマージンを取り除けま
iframe の高さをコンテンツに合わせる CSS の frame-sizing
外部サービスのコメント欄やフォームを iframe で埋め込むと、内容の高さと枠の高さが合わず、スクロールや余白が生じることがあります。frame-sizing を使うと、埋め込み側の許可のもとで内容に応じた高さを使えます。
CSS の scroll-axis-lock で斜め方向にスクロールできる UI を作る
ブラウザはスクロール操作の方向を縦か横の一方向に固定することがあります。scroll-axis-lock プロパティを使うと、この軸ロックを解除できます。この記事で scroll-axis-lock の基本的な使い方を紹介します。
MCP サーバーからエージェントスキルを配布する Skills Extension
MCP サーバーが提供するツールを使いこなすには、複数のツールを組み合わせる手順や判断基準も必要です。Skills Extension は、こうした知識を記した Agent Skills を MCP 経由で発見・取得するための拡張です。この
json-render と Jev で UI を組み立ててみた
json-render の Jev 連携では、文言やデータを含むコンポーネントの候補を用意し、モデルに選択と配置を任せます。従来の json-render では、モデルが新しい Props を生成していました。この記事では Jev 連携の仕
TypeSafe AI の Jev を TypeScript で試してみた
Jev は入力された状態に対して、選択肢の判定や段階評価、真である確率を返すモデルです。この記事では TypeScript で問い合わせを評価し、実際の出力をもとに担当部署や人の確認へ振り分ける処理を紹介します。
React 互換の軽量ランタイム TanStack Redact とは
TanStack Redact は、React のコンポーネントや Hooks の書き方を引き継ぐ軽量ランタイムです。同期描画を採用しており、React と同じ API があっても動作が異なる部分があります。この記事では基本的な導入方法と設
React 19.3 の Fragment Refs で子コンポーネント内の入力欄にフォーカスする
React 19.3 の Fragment Refs は、ラッパー要素を追加せずに複数の DOM 要素を操作する機能です。この記事では配送先フォームを例に、Fragment Refs の使い方を紹介します。
AI エージェントとアプリを動かす Cloudflare OS を試してみた
AI エージェントを業務に使うには、社内の知識やシステムへのアクセスと、成果物を共有する仕組みが必要です。Cloudflare OS は、エージェントと小さなアプリを動かすワークスペースを提供します。この記事ではローカルでの利用手順と、アプ
React の browser() API でブラウザ専用のコンポーネントを描画する
SSR を使う React アプリで localStorage を読む場合、従来は useEffect と state を使って初回表示を管理していました。browser() API では、ブラウザでのみ描画する意図を use(browse
フォームの Enter 送信で isComposing と keyCode === 229 を併用する理由
IME の変換確定に使う Enter キーで、書きかけのメッセージが送信されることがあります。isComposing と非推奨の keyCode === 229 を併用して、変換中の Enter を送信処理から除外する理由を解説します。
新しいグラフライブラリ TanStack Charts の設計思想と使い方
多くのグラフライブラリがある中、TanStack Charts はなぜ作られたのでしょうか。この記事では、TanStack Charts の設計思想を整理し、React で売上の折れ線にキャンペーンの注釈を重ねるサンプルを紹介します。
pnpm update で GitHub Actions もまとめて更新する
GitHub Actions で使用する Action をコミット SHA に固定すると安全性が高まる一方、更新作業が煩雑になります。pnpm 11.16.0 で追加された `pnpm update --include-github-act
`:playing` や `:muted` で video 要素の状態に応じたスタイルを適用する
video 要素の再生やミュート状態に応じて見た目を変えるには、JavaScript でイベントを監視して CSS クラスを同期する方法が使われてきました。メディア状態擬似クラスを使うと、ブラウザが管理する再生、一時停止、シーク、バッファリ
flex-wrap: balance で Flexbox の折り返しを均等にする
flex-wrap: wrap では、最後の行に少数のアイテムだけが残り、行ごとのアイテムの量が大きく偏ることがあります。flex-wrap: balance は、通常の折り返しで決まる行数を維持しながら、各行の長さが近くなるように Fle
Zod の z.compile() でバリデーションを高速化する
Zod 4.5 で、スキーマを実行時に最適化された JavaScript へ変換する z.compile() が追加されました。コンパイル済みスキーマは通常のスキーマと同じ API を保ちながら、複雑なデータの検証を高速化します。この記事で
CSS の shape() 関数でレスポンシブな図形を作る
clip-path の path() 関数で複雑な図形を作ると、固定座標のため要素のサイズへ追従させにくいという問題があります。shape() 関数ではパーセントや CSS の単位、カスタムプロパティを使って曲線を含む図形を定義できます。こ
ローカル開発中に現れる GET /.well-known/appspecific/com.chrome.devtools.json とは何か
Chrome でローカル開発をしていると、開発サーバーへ GET /.well-known/appspecific/com.chrome.devtools.json という見慣れないリクエストが送られることがあります。これは Chrome
ChatGPT デスクトップの Codex から WebMCP 対応 TODO アプリを操作する
ChatGPT デスクトップの内蔵ブラウザが、Web サイトの機能を AI エージェント向けのツールとして公開する WebMCP に対応しました。この記事では WebMCP に対応した TODO アプリを実装し、Codex が呼び出した S
IndexedDB と React・Dexie.js でタスク管理アプリを作ってみる
IndexedDB は、構造化されたデータをブラウザへ保存できる非同期・トランザクション型のデータベースです。この記事では素の IndexedDB API で基本的な仕組みを確認した後、React と Dexie.js でタスク管理アプリを
Vitest のモックを using で自動的に復元する
Vitest で作成したスパイを復元し忘れると、別のテストへモックの状態が漏れるおそれがあります。Vitest 3.2.0 以降では `vi.spyOn()` の戻り値を `using` で宣言すると、スコープを抜けるときに元の実装を自動的
AI に技術ブログを書かせてみてわかったこと
AI が書いた記事は一般論に寄りすぎ、冗長になりやすいと考えていたため、これまでは誤字脱字の確認にだけ AI を使っていました。AI に任せる執筆フローを試したところ、生成稿を批判的に読み、自分の体験を加えて推敲すれば、学習効果は大きく失わ
Slack 上でオープンな開発を行う Slack Code を試してみた
Slack Code は Slack 上でオープンな開発を行う手段を提供する機能です。コードチャンネルと呼ばれる特別なチャンネルを作成し、チーム全体でコーディングエージェントとやり取りを行うことができます。この記事では Slack Code
TanStack Virtual で大量の要素を仮想化して描画する
大量の要素を一度に DOM へ追加すると、初期描画や更新のコストが増加します。TanStack Virtual はスクロール位置に応じて必要な要素だけを描画するヘッドレスな仮想化ライブラリです。この記事では React 向けの @tanst
React でアクセシブルな Tree View を実装する
Tree View は階層構造を効率よく操作できる一方、ARIA ロールを付けるだけではアクセシブルになりません。WAI-ARIA APG を参考に、roving tabindex、矢印キー、選択、文字検索を備えた単一選択の Tree Vi
宣言的にカメラ・マイク権限を要求する `<usermedia>` 要素
Chrome 151 で `` 要素が使えるようになりました。従来の `getUserMedia()` の問題を解決するために提案された新しい HTML 要素です。この記事では、仕様の概要と、実際に動かしてみた様子を紹介します。
Scoped Custom Element Registries でカスタム要素の名前衝突を防ぐ
Web Components を利用してアプリケーションを構築する際に、異なるコンポーネントライブラリが同じ名前のカスタム要素を定義していると、名前の衝突が発生します。Scoped Custom Element Registries を使用