`/goal` コマンドの活用例: Vitest の実行時間を 6 倍高速化した話
Vitest の `isolate: false` オプションを有効にすることで、テストの実行時間を大幅に短縮できましたが、その際に大規模なコードの修正が必要でした。Claude Code の `/goal` コマンドを活用することで、最終
azukiazusa のテックブログ2
Web フロントエンド要素多めの技術ブログです。週に1度更新されます。
エディタを Zed に乗り換えてみた
Zed は Rust で書かれたネイティブアプリケーションで、非常に高速な動作と軽量な設計が特徴の新しいエディタです。この記事では、Zed のインストール方法と、実際に使ってみて感じた主要な機能や特徴について紹介していきたいと思います。
OpenAI の Secure MCP Tunnel を試してみた
OpenAI の Secure MCP Tunnel を利用すると、プライベートな MCP サーバーをパブリックなインターネットに公開することなく OpenAI のプロダクトに接続できるようになります。この記事では Secure MCP T
Claude Code の Dynamic Workflow を試してみた
Claude Code v2.1.154 で Dynamic Workflow と呼ばれる機能が追加されました。Dynamic Workflow は数時間から数日かかるような大規模な作業を実行するために設計されています。ワークフローは Ja
2026-07-28 MCP 仕様ではステートレスファーストになる
2026-07-28 MCP 仕様リリース候補の最も大きな変更点は、MCP サーバーがステートレスファーストになることです。これにより、MCP サーバーはシンプルなロードバランサーの背後でスケーリングできるようになります。また `Mcp-M
Hermes Agent と Grok の統合を試してみた
Hermes Agent は v0.14.0 で xAI の Grok モデルとの統合できるようになりました。Grok モデルは X（旧 Twitter）の投稿を検索できる `x_search` ツールを使えることが特徴で、リアルタイムでト
Generative UI のためのフレームワーク OpenUI
OpenUI は Generative UI を構築するためのフレームワークです。OpenUI 言語と呼ばれる独自の宣言型言語を使用して、AI が UI を構築するための指示を与えるという新しいアプローチを提供します。この記事では Open
CSS Grid Layout の gap を装飾する `column-rule` と `row-rule`
グリッドレイアウトで「列の間に線を引く」といった装飾は多くの場面で必要になります。しかし、flexbox や grid で列の間に線を引くためのプロパティは存在せず、ボーダーや背景色を利用して線のように見せるといったワークアラウンドが必要で
兄弟要素のインデックスを返す CSS 関数 sibling-index()
`sibling-index()` は要素の兄弟要素の中でのインデックスを返します。`sibling-index()` 関数により取得したインデックスを使用することにより、スタッガー（時間差）アニメーションや、色相を段階的に変えるといった、
Codex を利用した iOS アプリ開発を試してみた
私自身は Web 開発の経験はありますが、iOS アプリ開発の経験はほとんどありません。このようなバックグラウンドを持つ私がコーディングエージェントである Codex を利用して iOS アプリ開発をどこまで進められるか試してみました。コー
Playwright CLI で AI エージェントに視覚的なフィードバックを与える
Playwright CLI v0.1.9 で追加されたアノテーション機能は AI エージェントに視覚的なフィードバックを与えるために便利な機能です。アノテーション機能を利用すると、ブラウザの要素を選択して、その要素に対するコメントを残すこ
`contrast-color()` 関数を使用した自動コントラスト調整
`contrast-color()` 関数は、指定した色に対して `white` もしくは `black` のどちらがより高いコントラスト比を持つかを自動的に判断し、適切な色を返す関数です。動的に色が変わる場合やユーザーがカスタムテーマを使
AI エージェントが UI を安全に生成して描画するためのプロトコル A2UI とは？
Google が提唱する A2UI（Agent-to-UI）プロトコルは、AI エージェントが安全に UI を生成してクライアントに送信し、クライアントがそれを描画するための標準的な方法を提供します。A2UI は、AI エージェントがテキス
事前に定義した UI を AI に生成させる json-render を試してみた
AI に UI を生成させる Generative UI の手法が注目されています。しかし、AI の出力が予測不可能であるため、意図しない UI が生成されてしまうリスクもあります。json-render はあらかじめ定義したコンポーネント
命令的な方法で支援技術に通知する `ariaNotify()` メソッド
`ariaNotify()` メソッドは、支援技術を使用しているユーザーに対して、動的なコンテンツの更新を通知するための命令的な方法を提供する Web API です。従来の WAI-ARIA の仕様では宣言的な属性を使用して支援技術に情報を
gh コマンドでエージェントスキルをインストール・管理できるようになった
GitHub CLI に `gh skill` コマンドが追加され、GitHub 上のエージェントスキルを簡単にインストール・検索・管理できるようになりました。この記事では `gh skill` コマンドの使い方について紹介します。
AI エージェント向けのパッケージマネージャー apm
apm は Microsoft が開発した AI エージェント向けパッケージマネージャーです。npm や pip のように依存関係を解決しながら、エージェントのスキルや MCP をパッケージ化して管理・共有できます。この記事では apm の
Claude の Advisor tool を活用して性能とコストのバランスを最適化する
Claude に新たに追加された advisor tool を使用すると、通常のタスクは軽量モデルに任せつつ、必要に応じて高性能モデルに相談することで、性能とコストのバランスを最適化できます。この記事では Claude Code 内で ad
Canvas 内に直接 HTML を描画できる HTML in Canvas API について
HTML in Canvas API は WICG で提案されている API で、Canvas 内に直接 HTML を描画できるようにするものです。現在の `` 要素にはリッチテキストや HTML コンテンツを描画する標準的な方法が存在しな
大規模にエージェントを構築する Claude Managed Agents を試してみた
Claude Managed Agents は Claude を自律的なエージェントとして動作させるためのハーネスとインフラストラクチャーを提供します。長時間かかるタスクや非同期のタスクを実行するために使用するのが想定されています。この記事
Codex の Sandbox とエージェントの承認について
コーディングエージェントの自動承認の範囲をどこまで許可するかは、ユーザー体験とセキュリティのバランスを取る上で重要な設計指針の1つです。Codex ではサンドボックス機能を提供することで、エージェントが安全に自律的に動作できる環境を実現して
Boneyard で正確なスケルトンローダーを生成する
スケルトンローダーは、コンテンツが読み込まれる前に表示されるプレースホルダーで、ユーザーに対して読み込み中であることを視覚的に示すためのものです。Boneyard はスケルトンローダーの手動の計測と更新の手間を解消するためのフレームワークで
Codex のネットワークアクセス設定
デフォルトの `workspace-write` サンドボックスではネットワークアクセスは無効です。外部通信を許可したい場合は、`config.toml` で明示的に有効にします。
Codex Hooks で終了時に通知を出す
Codex では `hooks` を使って、特定のタイミングで任意のコマンドを実行できます。例えば応答が終わるたびに通知したい場合は `Stop hook` を使います。
Codex の smart_approvals で承認の負担を軽減する
コーディングエージェントに多く承認を求められると、本当に確認が必要なコマンドの実行を見落とす確率が高まります。Codex には `smart_approvals` という設定があります。これは承認が必要になったとき、その一部をそのままユーザ
Claude Code の hooks で if フィールドでフックが呼び出される条件を指定する
v2.1.85 で、Claude Code の hooks で if フィールドを指定できるようになりました。if フィールドには、フックが呼び出される条件を指定できます。条件に一致しない場合はプロセス自体が起動しないため、オーバーヘッド削
difit-review スキルでエージェント自身に変更点をコメントしてもらおう
difit はローカルの git 差分を GitHub スタイルのインターフェースで確認できる CLI ツールです。difit-review スキルを使用することでエージェントがコードの変更点にコメントを残した状態で difit を起動でき
Claude Code から Codex を呼び出すためのプラグイン codex-plugin-cc
Codex プラグインを使用すると、Claude Code から Codex を呼び出してコードレビューをしたり、タスクを委任するといったことが簡単にできるようになります。この記事では、Codex プラグインの使用方法と、どのような方法で
Cline Kanban で複数のコーディングエージェントを一括管理する
Cline Kanban は人間が数十個のエージェントを運用するうえで正気を保つためにはどうすればいいか、という問いに対する 1 つの答えとして、Cline が開発したツールです。Cline Kanban はカンバン方式のビューを提供します
Figma のキャンバスを AI エージェントから操作してデザインしよう
2026 年 3 月末、Figma の MCP サーバーに Figma のキャンバスを直接操作できる `use_figma` ツールが追加されました。`use_figma` ツールは Figma Plugin API を通じて Figma
Storybook MCP を試してみた
Storybook MCP は Storybook と AI エージェントを接続し、エージェントがコンポーネントドキュメントを参照しつつコードを生成したり、ストーリーを作成して UI コンポーネントをテストしたりできるようにする機能です。こ
Claude Code と Discord 連携はどのように動作しているのか？
Claude Code v2.1.80 から Research Preview 版として Claude Code channels（以下、チャンネル）が利用できるようになりました。チャンネルとは実行中の Claude Code のセッション
Discord から Claude Code とやり取りしてみた
Claude Code v2.1.80 から Research Preview 版として Claude Code channels（以下、チャンネル）が利用できるようになりました。チャンネルとは実行中の Claude Code のセッション
npm パッケージに Agent Skills を同梱する TanStack intent
ライブラリのメンテナが Agent Skills を生成・検証して npm パッケージに同梱することを支援するツールである `@tanstack/intent` を使用して、ライブラリの使用者側と、メンテナ側の両方の観点から Agent S
新時代のフロントエンドツールチェイン Vite+ を試してみた
Vite+ は Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown といった人気のツールを統合し、開発, テスト, ビルド, リント, フォーマットなどのフロントエンド開発に必要な機能を1つのツールチ
CSS によるスクロールトリガーアニメーション
要素が画面内に入った時にアニメーションを開始するスクロールトリガーアニメーションは、これまでは JavaScript を使用して `Intersection Observer API` を利用する方法が一般的でした。JavaScript を
Skill Create スキルを使用したスキルの作成と改善
オープンスタンダードである Agent Skills に従い Claude Code にドメインの専門知識や組織のナレッジを提供するスキルが最近注目を集めていますが、スキルの作成にはいくつかのハードルがあります。Anthropic は sk
iOS Safari で触覚フィードバックを実現する WebHaptics
WebHaptics は、Web アプリケーションで触覚フィードバックを実装するための JavaScript ライブラリです。iOS Safari でも触覚フィードバックを提供することができます。この記事では、WebHaptics ライブラ
`clamp()` 関数を使用したレスポンシブなフォントサイズ
レスポンシブデザインにおいてメディアクエリを使用して異なる画面サイズに対して異なるフォントサイズを指定する方法は一般的ですが、いくつかの課題点もあります。`clamp()` 関数を使用することで、画面幅の変化に対してフォントサイズが滑らかに
AI エージェントを通じてコードとキャンバスを接続するデザインツール Paper を試してみた
Paper は AI エージェントを通じてコードとキャンバスを双方向に接続するデザインツールで、AI にデザインの作成やコードへの変換を任せることができます。Paper の MCP サーバーのツールを組み合わせることでキャンバス上のノードの