React Grab はブラウザ上で要素を選択し、その要素に対応するコードコンテキストをコーディングエージェントに提供するライブラリです。この記事では React Grab のセットアップ方法と使用方法を紹介します。
TanStack Start は TanStack Router と Vite をベースにしたフルスタック React フレームワークです。型安全なルーティング、サーバーサイドレンダリング、ストリーミング、サーバー関数、API ルートなどの機能を提供します。この記事では TanStack Start の概要と基本的な使い方を紹介します。
TanStack AI は TanStack チームが開発する TypeScript 向けの軽量な AI フレームワークです。LLM プロバイダーのインターフェイスを抽象化し、ツール呼び出しやチャット機能を提供します。この記事では TanStack AI の概要と基本的な使い方を紹介します。
MCP ツールの呼び出しはコンテキスト汚染や推論のオーバーヘッドなどの課題があります。Claude のプログラムによるツール呼び出し機能を利用することで、これらの課題を解決する方法について解説します。
以前 YAPC::Fukuoka 2025 で発表した探求の技術では「良いアウトプットを出すためには良いインプットが必要」であるという主張を裏付けるために、私が年間 300 冊の本を読む読書習慣があることを紹介しました。この記事では私がどのような目的で本を読み、どのように本を選び、どのように読書時間を確保し、そして読んだ内容をどのように扱っているのかについて紹介します。
MCP Apps は MCP の拡張機能として、AI エージェントがインタラクティブな UI コンポーネントを返すための標準化された方法を提供します。この記事では MCP Apps の概要と実装方法について解説します。
Web アプリケーションにおけるルーティングは重要な要素です。URL Pattern API は URL のパターンマッチングを標準化するための Web API であり、ブラウザやサーバーサイド環境で一貫した方法で URL パターンを処理できます。この記事では、URLPattern API の基本的な使い方とパターン構文について解説します。
MCP の普及に伴い、多数のツール定義が LLM のコンテキストを圧迫する課題が浮上しています。本記事では Progressive disclosure（段階的開示）による最小限の情報提供、MCP を使ったコード実行によるツール呼び出しの効率化、単一の検索ツールによるコンテキスト削減など、実践的な解決策を Claude Skills や Cloudflare Code Mode の事例とともに解説します。
Claude Code をはじめとする AI コーディングエージェントは、コマンドを実行するたびにユーザーの承認を求める仕組みが備わっていますが、これには開発サイクルの低下や承認疲れといった問題があります。Claude Code のサンドボックス機能は、ファイルシステムやネットワークへのアクセスを制限し、安全に動作させるための仕組みです。この記事では、Claude Code のサンドボックス機能の仕組みと利用方法について解説します。
2025 年 10 月に発表された Remix v3 は React から独立し、Web 標準技術を活用した新しいフレームワークへと進化しました。この記事では、Remix v3 のセットアップ手順と新機能を実際に動かして試してみた内容を紹介します。
Playwright v1.56 で導入された Playwright Agents は、Planner、Generator、Healer の 3 つのエージェントで構成されており、アプリケーションコードを解析してテストケースの計画、テストコードの生成、失敗したテストの修正を自動化できます。この記事では、Claude Code から Playwright Agents を呼び出して、シンプルなカンバンアプリのテストコードを自動生成する手順を紹介します。
Apps in ChatGPT は ChatGPT のチャット内で会話の流れに応じて外部のアプリを呼び出し、インタラクティブな操作を可能にする機能です。アプリごとに独自の UI コンポーネントを提供し、ユーザーはチャット画面からシームレスな体験でアプリを操作できます。この記事では Apps SDK を使用して、実際に ChatGPT 内で動作するシンプルなアプリを作成する手順を紹介します。
Claude Code は強力なコーディング支援ツールですが、効果的に活用するためには適切な設定が必要です。プラグインを使用することで、スラッシュコマンド、サブエージェント、MCP サーバー、フックなどの設定をパッケージ化し、他のユーザーと簡単に共有できます。この記事では、Claude Code のプラグインの作成方法と利用方法について解説します。
MCP ではツールアノテーションを使用して、ユーザーにツールの動作に関するヒントを提供できます。例えば `readOnlyHint` を設定することで、ツールがデータを変更しないことを示すことができます。この記事では TypeScript SDK を使用して MCP サーバーでツールアノテーションを設定し、Claude Code クライアントでどのように表示されるかを確認します。
自律的な AI エージェントを利用したコーディングでは、生成したコードを実行した結果からフィードバックを得て、コードを改善していく反復的なプロセスが重要です。しかし、フロントエンド開発では、生成したコードはブラウザ上で実行されるため、AI エージェントが直接コードを実行したり、ブラウザのコンソールログを取得したりすることは困難です。Chrome DevTools MCP はこの課題を解決するためのツールです。
GitHub Actions のワークフローで YAML アンカーがサポートされました。YAML アンカーを使用すると、ワークフロー内でコードの重複を避け、共通の設定を再利用できます
現状の決済システムでは人間が信頼できる画面上で直接購入ボタンをクリックすることを前提としており、自立型の AI エージェントがユーザーに代わって決済することは想定されていません。そこで Google により Agent Payments Protocol (AP2) と呼ばれる新しいプロトコルが提案されました。プラットフォーム間でエージェント主導の決済を安全に開始・処理することを可能にします。この記事では AP2 のサンプルコードを実際に試してみた手順を紹介します。
最近は npm パッケージのサプライチェーン攻撃が増えています。幸いほとんどの場合悪意のあるパッケージは公開から 1 週間以内に削除されるため、公開から一定期間が経過したパッケージのみをインストールすることでリスクを軽減できます。
Agentic Workflows は自然言語で CI/CD パイプラインを定義できるツールとして GitHub Next が開発しています。自然言語で定義されたワークフローは GitHub CLI の拡張機能として提供される gh aw コマンドでコンパイルして実行できます。これは継続体なAI（Continuous AI）を実現するためのツールです。
仕様駆動開発（Specification-Driven Development, SDD）は、AI コーディングエージェントを活用した新しいソフトウェア開発スタイルです。GitHub が提供する Spec Kit は、仕様駆動開発を支援するためのツールキットであり、AI との対話を通じて正確な受け入れ基準の定義とコード生成を支援します。この記事では Spec Kit を使用して仕様駆動開発を試してみます。
Vibe Kanban は、AI コーディングエージェントの管理を支援するためのツールです。カンバン方式の UI でタスク管理を行い、各タスクに対して AI エージェントを割り当てて人間がその進捗を管理できます。この記事では Vibe Kanban を使用して AI コーディングエージェントの管理を実際に試してみます。
コーディングに AI エージェントを活用する流れはもはや避けられないものとなっています。しかし、AI エージェントによってコーディングの多くが自動化されると、開発者が自分の手でコードを書く機会は減少してしまうというジレンマがあります。Claude Code の学習モードを使用すると、自分の手でコードを書く練習ができます。学習モードでは、AI エージェントはユーザー自身にも一部のコードの生成を依頼します。この記事では、Claude Code の学習モードの使い方について解説します。
コーディングエージェントを使用する際にはプロジェクトの技術スタックやビルド手順、コーディング規約を記載したドキュメントを用意して、コンテキストに含めるのが一般的な手法です。 しかし、 コーディングエージェントの製品ごとに異なるファイル名で用意しなければいけないという問題がありました。
POML (Prompt Orchestration Markup Language) は、Microsoft によって提案されたプロンプトを構造化された文書として管理するためのマークアップ言語です。プロンプト開発における構造の欠如や複雑なデータとの統合の困難さ、特定のフォーマットへの依存性といった課題を解決することを目指しています。
MCP UI は Model Context Protocol (MCP) を拡張して、AI エージェントがインタラクティブな UI コンポーネントを返すことを可能にする仕組みです。これにより、AI エージェントとのチャットの返答としてグラフや画像ギャラリー、購入フォームなどを表示できます。この記事では MCP UI の SDK を利用して、AI エージェントがインタラクティブな UI コンポーネントを返す方法を試してみます。
Alibaba が開発した Qwen3-Coder を使用したコーディングエージェント Qwen Code を試してみた記事です。OpenRouter 経由での認証設定、コードベースの調査、リファクタリング、テストコード生成などの実際の使用例を紹介しています。
LSP を活用してセマンティックなコード検索・編集能力を提供する MCP サーバー Serena の導入・使用方法を紹介。Claude Code でのオンボーディングからリファクタリングまでの実践的な活用例を解説します。
SvelteKit の remote functions を使用することで、コンポーネント内で直接非同期にデータを取得したり、サーバーにデータを書き込むことができます。これにより、コンポーネントごとに必要なデータを個別に取得できるようになり、コードの責任の分離が容易になります。remote functions は SvelteKit v2.27 以降で利用可能です。
従来の JavaScript では Cookie の管理は `document.cookie` を使用して文字列で行われていました。しかし、文字列での Cookie 管理は面倒で間違いやすいです。また `document.cookie` は同期的に動作するため、Cookie の更新が完了するまでイベントループがブロックされてしまいます。さらに `document` オブジェクトに依存しているため、Web Worker や Service Worker などの非同期環境では使用できません。 このような問題を解決するために、非同期 API `CookieStore` が導入されました。`CookieStore` は非同期的に Cookie の読み書きを行うことができ、さらに Cookie の属性をオブジェクトとして扱うことができます。
現代は知らないことがあればすぐにインターネットで調べたり、AI に質問できる時代です。このような時代において本を読む必要はあるのでしょうか？答えは Yes です。なぜなら、検索をしたり AI に質問をするためには、ある程度の基礎知識が必要だからです。この記事では私のキャリアにおいて影響を与えたであろうコンピューター・IT の定番書籍を紹介します。
Kiro は AWS が開発した IDE 内蔵型の AI コーディングエージェントです。Kiro の特徴は単なるバイブコーディングにとどまらず、スペックを使用して仕様駆動開発でアプリケーションを開発できることです。この記事では Kiro を使ったアプリケーション開発の流れを紹介します。
AI コーディングエージェントは便利ですが、任意の Bash コマンドを実行できるため、ユーザーのシステムに影響を与える可能性があります。Container Use は MCP サーバーとして動作し、AI コーディングエージェントにサンドボックス環境を提供します。この記事では Container Use の利用方法について紹介します。
v0 は Vercel が開発した AI ベースの Web アプリケーション・UI 生成ツールです。v0 のプラットフォーム API を使用すると、v0 の機能を自身のコードから利用できます。この記事では v0 TypeScript SDK を使用して、v0 のプラットフォーム API を試してみます。
CSS の `progress` 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。流体タイポグラフィやレスポンシブなレイアウト調整に利用できます。流体タイポグラフィは `clamp` 関数を使用して実装することもできますが、`progress` 関数を使用することでより意図を明確に記述できます。この記事では、CSS の `progress` 関数の構文と使用例について解説します。
Claude Code hooks は Claude Code のライフサイクルの特定のタイミングで実行されるユーザー定義のシェルスクリプトです。hooks を使用することで、コードのフォーマットを常に実行することができます。この記事では hooks を使用してコードの変更後に prettier が実行されるように設定してみましょう。
Model Context Protocol (MCP) サーバーは LLM が外部のツールと対話するための標準的な方法ですが、インストールが複雑でハードル高いという課題があります。`.dxt` ファイルは MCP サーバーを簡単にインストールできるパッケージ形式です。これを使用することでユーザーはターミナルを操作したり JSON ファイルを編集することなく MCP サーバーを利用できるようになります。
MCP の 2025-06-18 バージョンでは Structured tool output がサポートされました。ツールの定義で `outputSchema` を出力のスキーマを定義し、`structuredContent` フィールドに構造化された出力を返すことができます。この記事では MCP の TypeScript SDK を使用して Structured tool output を試してみます。
Claude Code では `/` で始まる文字列がスラッシュコマンドとして定義されておりあらかじめ割り当てられた操作を実行できます。スラッシュコマンドはユーザーが独自に定義することもできます。この記事では、Claude Code でカスタムスラッシュコマンドを作成する方法について説明します。
use-mcp はリモートの MCP サーバーに接続するための React フックです。ツールの呼び出しや認証を簡単に行うことができます。この記事では、use-mcp を使用して MCP サーバーに接続し、ツールを呼び出す方法と、OAuth 認証の実装方法について解説します。
A2A プロトコルはエージェント間の通信を標準化するためのプロトコルです。JavaScript SDK を使って A2A サーバーとクライアントを実装し、エージェント間通信を試してみます。
バイブコーディングとは、AI エージェントを活用して直感的にアプリケーションを開発する新しいコーディングスタイルです。このチュートリアルでは、Claude Code を使って Next.js でカンバンボードアプリケーションを作成します。
OpenAI Agents SDK は AI エージェントを構築するためのパッケージです。軽量で使いやすく、抽象化を最小限に抑えているのが特徴です。この記事では、OpenAI Agents SDK の TypeScript バージョンの使用例を紹介します。
AG-UI はフロントエンドアプリケーションがエージェントに接続する方法を標準化するプロトコルです。この記事では AG-UI を使用してフロントエンドアプリケーションがエージェントに接続する方法を紹介します。
AI を使用してコードの生成を行う際、ある程度の時間待機する必要があります。その間ターミナルに張り付いて観察するのではなく、タスクが完了したタイミングで通知を受け取ることができれば、他の作業をしながら待機することができます。 Claude Code でタスクの完了を通知する方法を 3 つ紹介します。
AI によるコーディングの支援はコード補完型からチャット型、そして自律型へと進化しています。この記事では現時点で主流となっているコーディングエージェントの種類とその特徴を整理したうえで、エンジニアの仕事の変化について考察します。
Claude Code Action は Claude Code を GitHub Actions のワークフローに統合するためのアクションです。これを使用することで、GitHub 上でコードの生成やレビューを AI に依頼することができます。
VoltAgent は TypeScript で AI を活用したアプリケーションを構築するためのツールキットです。VoltAgent Console を使用すると、エージェントの状態をリアルタイムで確認したり、エージェントのワークフローを可視化できる点が特徴です。
React Router はプレビュー版として Server Components に対応しました。これにより loader や actions を使用してデータを返す際にコンポーネント渡したり、Server Components ファーストのサーバーコンポーネントルートを作成できるようになりました。この記事では React Router の Server Components 対応を実際に試してみます。
Model Context Protocol (MCP) の 2025-03-26 の仕様では新たに Streamable HTTP が追加され、リモート MCP サーバーへの注目が集まっています。この記事では Next.js を使用して Vercel 上に MCP サーバーを構築する方法を紹介します。
Model Context Protocol (MCP) の 2025-03-26 の仕様では新たに Streamable HTTP が追加され、リモート MCP サーバーへの注目が集まっています。この記事では `agents` フレームワークを使用して Cloudflare 上に MCP サーバーを構築する方法を紹介します。
Error.isError() メソッドは、オブジェクトが Error インスタンスかどうかを判定するためのメソッドです。今までも instanceof 演算子を使用して判定することができましたが、偽陽性と偽陰性が発生する可能性があります。Error.isError() メソッドは Array.isArray() と同じく内部スロットを使用して判定するため、より堅牢に判定することができます。
Docker の MCP Toolkit はコンテナ化された MCP サーバーを AI エージェントと統合するための Docker Desktop の拡張機能です。コンテナ化された環境で MCP サーバーを実行することができ、信頼された Docker MCP カタログから MCP ツールを簡単にインストールできる点が特徴です。
ESLint v9.26.0 から MCP サーバーとして実行できるようになりました。この機能により LLM（大規模言語モデル）は ESLint のルールを使用してコードを修正することができるようになります。
actions/ai-inference は GitHub Actions のワークフローから AI モデルを呼び出すための公式のアクションです。これを使用することで CI/CD のワークフローから AI モデルを簡単に利用できるようになります。この記事ではプルリクエスト上で AI に記事のレビューをしてもらうという実践的な使用例を紹介します。
React の新しい実験的なコンポーネントとして `<Activity>` が追加されました。これは UI の表示非表示を切り替えるために使用されます。従来の条件付きレンダリングとは異なり、アンマウントされた場合にも状態を保持する点が特徴です。
「AI コーディングエージェントの台頭によりエンジニアの働き方はどう変わるのか？」というテーマについて AI と人間のインタビューを通じて探ります。
Ink は CLI アプリを React で書くためのライブラリです。Flexbox レイアウトエンジンである Yoga を使用しているため、Web アプリケーションと同じような CSS を使って UI を構築できることが特徴です。Codex や Claude Code といったコーディングエージェントの CLI アプリが Ink で書かれています。
MCP では stdio と Streamable HTTP の 2 つの transport が定義されています。TypeScript SDK では v1.10.0 から Streamable HTTP transport がリリースされました。この記事では MCP サーバーを構築し、Streamable HTTP transport を試してみます。
AI エージェント同士の連携を標準化するために Agent2Agent プロトコル（A2A）を発表しました。A2A プロトコルは基盤となるフレームワークやベンダーに依存せず、エージェント同士が安全な方法で相互に通信できるように設計されています。この記事ではサンプルコードを通じて A2A プロトコルを使用した AI エージェントの連携を体験してみます。
好むと好まずと関わらず、ソフトウェア開発において AI の活用は重要なパラダイムシフトの 1 つです。AI エージェントはユーザーからの指示を元に自律的にタスクを選択し、実行します。この記事では、コーディング AI エージェントを自作する過程を紹介します。
MCP（Model Context Protocol）は LLM に追加のコンテキストを提供するための標準化されたプロトコルです。Vercel AI SDK は v4.2 から MCP をサポートしており、MCP クライアントをツールとして利用できます。この記事では Vercel AI SDK を使って MCP ツールを使用する方法を紹介します。
カルーセルは Web アプリケーションでよく使われる UI コンポーネントの一つであるものの、標準化された実装方法が存在しないため、各ライブラリやフレームワークで独自の実装が行われています。この問題を解決するため、CSS だけを使用してカルーセルを実装するための新しい仕様が提案されています。:この仕様では ::scroll-button と ::scroll-marker 擬似要素を使用してカルーセルを実装します。