# azukiazusa のテックブログ2 > このブログは [azukiazusa](https://github.com/azukiazusa1) によって運営されている技術ブログです。主に Web フロントエンド周辺の技術について書いています。 ## Blog Posts - [AI エージェントのセッションを Git 互換のデータベースに保存する Entire CLI](https://azukiazusa.dev/blog/entire-for-saving-ai-agent-sessions-as-git-compatible-database.md): Entire CLI は AI エージェントのセッションを Git 互換のデータベースとして保存するためのツールです。Git レポジトリで Entire を有効にすると、AI エージェントのセッションをチェックポイントとして保存できるようになります。チェックポイントではユーザーのプロンプトや AI エージェントの応答、ツールの使用履歴、AI がコードを書いた割合などを確認できます。 - [Web アプリケーションをツール化する WebMCP](https://azukiazusa.dev/blog/webmcp-for-web-applications.md): WebMCP は Web 開発者が Web アプリケーションの機能をツールとして公開できるようにする JavaScript インターフェイスです。これにより AI エージェントが Web アプリケーションの機能を直接呼び出して操作できるようになります。 - [React で動画を作る Remotion](https://azukiazusa.dev/blog/react-remotion.md): Remotion は React を使ってプログラム的に動画を作成できるフレームワークです。CSS や SVG、Canvas API などのウェブ技術を活用したり、変数や関数、ループ、条件分岐などのプログラミングの概念を利用して動画を生成できます。この記事では Remotion の基本的な使い方を紹介します。 - [Claude Code のオーケストレーション機能であるエージェントチームを試してみた](https://azukiazusa.dev/blog/trying-claude-code-agent-teams.md): Claude Code のエージェントチームを使用すると、複数の Claude Code インスタンスが連携して動作するようになります。この記事では、Claude Code のエージェントチーム機能を試し、どのように動作するかを探ってみます。 - [MoonBit の宣言 UI ライブラリ Luna を使ってみる](https://azukiazusa.dev/blog/moonbit-declarative-ui-library-luna-ui.md): Luna は MoonBit と JavaScript を使用して Web アプリケーションのユーザーインターフェースを構築するための宣言型 UI ライブラリです。この記事では、Luna UI と MoonBit を使用してシンプルなカウンターアプリケーションを作成する方法を紹介します。 - [MoonBit で RESTful API サーバーを構築する](https://azukiazusa.dev/blog/moonbit-restful-api-server.md): MoonBit は、WebAssembly や JavaScript にコンパイルできる新しいプログラミング言語です。この記事では、MoonBit を使用してシンプルな RESTful API サーバーを作成する方法を紹介します。 - [AI とインタラクティブな UI のやり取りを実現する MCP Apps](https://azukiazusa.dev/blog/ai-interactive-ui-with-mcp-apps.md): MCP Apps は MCP にインタラクティブな UI コンポーネントを返す方法を標準化した拡張機能です。この記事では MCP Apps を使用してインタラクティブな UI コンポーネントをエージェントが返す方法について試してみます。 - [はじめての MoonBit](https://azukiazusa.dev/blog/getting-started-with-moonbit.md): MoonBit は WebAssembly と JavaScript にコンパイル可能な新しいプログラミング言語です。Rust 風のシンタックスと関数型プログラミングの特徴を持ちながら、ガベージコレクションを採用しているという特徴があります。この記事では MoonBit の基本的な使い方をチュートリアル形式で紹介します。 - [新しいデザインツール Pencil を試してみた](https://azukiazusa.dev/blog/new-design-tool-pencil.md): Pencil は Figma のような使用感で UI デザインができるツールです。Pencil MCP サーバーを利用して双方向に AI コーディングツールと連携し、デザインからコードを書き出したり、プロンプトでデザインを生成したりすることができます。 - [TUI を構築するための Typescript ライブラリ OpenTUI](https://azukiazusa.dev/blog/build-tui-with-opentui.md): AI コーディングエージェントの普及により、ターミナルベースの TUI アプリケーションの需要が高まっています。OpenTUI は Typescript で TUI アプリケーションを簡単に構築できるライブラリです。この記事では OpenTUI の特徴と基本的な使い方を紹介します。 - [AI エージェントのために CLI でブラウザを操作する agent-browser](https://azukiazusa.dev/blog/agent-browser-for-ai-agents.md): agent-browser は Vercel が開発した CLI でブラウザを操作するツールであり、AI エージェントにブラウザ操作能力を提供するために設計されています。この記事では agent-browser のインストール方法、基本的な使い方、AI エージェントからの利用方法について紹介します。 - [Claude Code のステータスラインを TUI でカスタマイズできる ccstatusline](https://azukiazusa.dev/blog/claude-code-ccstatusline.md): Claude Code のステータスラインは oh-my-zsh のターミナルプロンプトのようにカスタマイズ可能です。これにより現在のブランチやトークンの使用量などを一目で確認できるようになります。この記事では TUI で簡単にステータスラインをカスタマイズできる ccstatusline の使い方を紹介します。 - [1 つの Step で完結するバックエンドフレームワーク Motia を試してみた](https://azukiazusa.dev/blog/motia-backend-framework.md): Motia はバックエンド開発をシンプルにすることを目指したコードファーストのバックエンドフレームワークです。この記事では Motia を使用して簡単な TODO REST API を構築する方法を紹介します。 - [Figma MCP でデザインシステムを提供して AI コーディングエージェントに一貫したフロントエンドコードを書かせる](https://azukiazusa.dev/blog/using-figma-mcp-to-provide-design-system-for-ai-coding-agents.md): AI コーディングエージェントにフロントエンドのコードを書かせる際、Figma MCP を使用してデザインコンテキストやデザイントークンを提供することで、一貫したデザインガイドラインを遵守させる方法を紹介します。 - [Claude Code のツール検索ツールを有効にして MCP のトークン使用量を削減する](https://azukiazusa.dev/blog/enable-claude-code-tool-search-to-reduce-mcp-token-usage.md): Claude Code のツール検索ツールを有効にすることで、MCP ツールの定義を事前にコンテキストウィンドウに読み込まず、必要に応じて動的にツールを検索・呼び出しできます。これにより、多数の MCP ツールをインストールしている場合でもトークン使用量を大幅に削減できる可能性があります。この記事では Claude Code のツール検索ツールの概要と使用方法を紹介します。 - [2025 年に読んでよかった本](https://azukiazusa.dev/blog/books-i-liked-in-2025.md): AI を活用するための技術というのはとりわけ新しいものではなく、過去の知見を基盤として構築されていることが多いです。それゆえに、AI 時代だからこそ基礎的な知識を体系的に学ぶことができる書籍に学ぶことに価値を求めるのです。この記事では 2025 年に読んで特に印象に残った本をいくつか紹介します。 - [Claude Code の LSP サポート](https://azukiazusa.dev/blog/claude-code-lsp-support.md): Claude Code のバージョン 2.0.74 から LSP（Language Server Protocol）サポートが追加されました。LSP サポートにより、Claude Code はコードベースに対してシンボルの定義検索、参照検索、ホバー情報の取得などの操作が可能になります。この記事では Claude Code の LSP サポートの概要と使用方法を紹介します。 - [ブラウザから要素を選択してエージェントにコンテキストを提供する React Grab を試してみた](https://azukiazusa.dev/blog/try-react-grab-for-agents.md): React Grab はブラウザ上で要素を選択し、その要素に対応するコードコンテキストをコーディングエージェントに提供するライブラリです。この記事では React Grab のセットアップ方法と使用方法を紹介します。 - [フルスタックフレームワーク TanStack Start を試してみた](https://azukiazusa.dev/blog/try-tanstack-start.md): TanStack Start は TanStack Router と Vite をベースにしたフルスタック React フレームワークです。型安全なルーティング、サーバーサイドレンダリング、ストリーミング、サーバー関数、API ルートなどの機能を提供します。この記事では TanStack Start の概要と基本的な使い方を紹介します。 - [TypeScript 向けの AI フレームワーク TanStack AI を試してみた](https://azukiazusa.dev/blog/try-tanstack-ai.md): TanStack AI は TanStack チームが開発する TypeScript 向けの軽量な AI フレームワークです。LLM プロバイダーのインターフェイスを抽象化し、ツール呼び出しやチャット機能を提供します。この記事では TanStack AI の概要と基本的な使い方を紹介します。 - [Claude のプログラミングによるツール呼び出し](https://azukiazusa.dev/blog/claude-programmatic-tool-calling.md): MCP ツールの呼び出しはコンテキスト汚染や推論のオーバーヘッドなどの課題があります。Claude のプログラムによるツール呼び出し機能を利用することで、これらの課題を解決する方法について解説します。 - [Claude のツール検索ツールを試してみた](https://azukiazusa.dev/blog/trying-claude-tool-finder.md): MCP では多くのツール定義が LLM のコンテキストを圧迫する問題があります。Claude のツール検索ツールを使用すると、必要に応じて関連するツールのみを LLM に提供でき、コンテキスト圧迫を軽減できます。この記事では Claude の TypeScript クライアントを使用して、ツール検索ツールを実際に使用した例を紹介します。 - [Claude Code のプランモードがより正確な計画を立てられるようになっていた](https://azukiazusa.dev/blog/claude-code-plan-mode-improved.md): Claude Code のプランモードはリリース当初から定期的に改善が加えられており、より正確な計画を立てられるようになっています。この記事では最近の改善点について紹介します。 - [読んだ本は忘れていい ― 年間300冊読む私の読書術](https://azukiazusa.dev/blog/my-reading-techniques-300-books-a-year.md): 以前 YAPC::Fukuoka 2025 で発表した探求の技術では「良いアウトプットを出すためには良いインプットが必要」であるという主張を裏付けるために、私が年間 300 冊の本を読む読書習慣があることを紹介しました。この記事では私がどのような目的で本を読み、どのように本を選び、どのように読書時間を確保し、そして読んだ内容をどのように扱っているのかについて紹介します。 - [MCP におけるインタラクティブな UI を標準化する拡張機能 MCP Apps の提案](https://azukiazusa.dev/blog/mcp-standard-ui-extension.md): MCP Apps は MCP の拡張機能として、AI エージェントがインタラクティブな UI コンポーネントを返すための標準化された方法を提供します。この記事では MCP Apps の概要と実装方法について解説します。 - [標準の Web API で URL のパターンマッチングを処理する URLPattern](https://azukiazusa.dev/blog/urlpattern-web-api.md): Web アプリケーションにおけるルーティングは重要な要素です。URL Pattern API は URL のパターンマッチングを標準化するための Web API であり、ブラウザやサーバーサイド環境で一貫した方法で URL パターンを処理できます。この記事では、URLPattern API の基本的な使い方とパターン構文について解説します。 - [MCP ツールのコンテキスト圧迫の問題とその解決策](https://azukiazusa.dev/blog/mcp-tool-context-overflow.md): MCP の普及に伴い、多数のツール定義が LLM のコンテキストを圧迫する課題が浮上しています。本記事では Progressive disclosure（段階的開示）による最小限の情報提供、MCP を使ったコード実行によるツール呼び出しの効率化、単一の検索ツールによるコンテキスト削減など、実践的な解決策を Claude Skills や Cloudflare Code Mode の事例とともに解説します。 - [Claude Code のサンドボックス機能を試してみた](https://azukiazusa.dev/blog/claude-code-sandbox-feature.md): Claude Code をはじめとする AI コーディングエージェントは、コマンドを実行するたびにユーザーの承認を求める仕組みが備わっていますが、これには開発サイクルの低下や承認疲れといった問題があります。Claude Code のサンドボックス機能は、ファイルシステムやネットワークへのアクセスを制限し、安全に動作させるための仕組みです。この記事では、Claude Code のサンドボックス機能の仕組みと利用方法について解説します。 - [Claude Skills でエージェントに専門的なタスクを実行させる](https://azukiazusa.dev/blog/claude-skills-custom-skills-for-claude.md): Claude Skills は Claude が特定のタスクを実行するためのカスタムスキルを作成・共有できる新しい機能です。この記事では、Claude Skills の仕組みと作成方法、MCP ツールとの違いについて解説します。 - [Remix v3 を実際に動かして試してみた](https://azukiazusa.dev/blog/try-remix-v3.md): 2025 年 10 月に発表された Remix v3 は React から独立し、Web 標準技術を活用した新しいフレームワークへと進化しました。この記事では、Remix v3 のセットアップ手順と新機能を実際に動かして試してみた内容を紹介します。 - [Playwright Agents によるテストの自動生成を試してみた](https://azukiazusa.dev/blog/playwright-agents.md): Playwright v1.56 で導入された Playwright Agents は、Planner、Generator、Healer の 3 つのエージェントで構成されており、アプリケーションコードを解析してテストケースの計画、テストコードの生成、失敗したテストの修正を自動化できます。この記事では、Claude Code から Playwright Agents を呼び出して、シンプルなカンバンアプリのテストコードを自動生成する手順を紹介します。 - [ChatGPT 内でアプリを直接操作する Apps SDK に自作のアプリを接続する](https://azukiazusa.dev/blog/chatgpt-apps-sdk.md): Apps in ChatGPT は ChatGPT のチャット内で会話の流れに応じて外部のアプリを呼び出し、インタラクティブな操作を可能にする機能です。アプリごとに独自の UI コンポーネントを提供し、ユーザーはチャット画面からシームレスな体験でアプリを操作できます。この記事では Apps SDK を使用して、実際に ChatGPT 内で動作するシンプルなアプリを作成する手順を紹介します。 - [Claude Code の設定をプラグインで共有する](https://azukiazusa.dev/blog/claude-code-plugins.md): Claude Code は強力なコーディング支援ツールですが、効果的に活用するためには適切な設定が必要です。プラグインを使用することで、スラッシュコマンド、サブエージェント、MCP サーバー、フックなどの設定をパッケージ化し、他のユーザーと簡単に共有できます。この記事では、Claude Code のプラグインの作成方法と利用方法について解説します。 - [MCP のツールアノテーションでユーザーにヒントを提供する](https://azukiazusa.dev/blog/mcp-tool-annotations.md): MCP ではツールアノテーションを使用して、ユーザーにツールの動作に関するヒントを提供できます。例えば `readOnlyHint` を設定することで、ツールがデータを変更しないことを示すことができます。この記事では TypeScript SDK を使用して MCP サーバーでツールアノテーションを設定し、Claude Code クライアントでどのように表示されるかを確認します。 - [Chrome DevTools MCP で AI エージェントのフロントエンド開発をサポートする](https://azukiazusa.dev/blog/chrome-devtools-mcp.md): 自律的な AI エージェントを利用したコーディングでは、生成したコードを実行した結果からフィードバックを得て、コードを改善していく反復的なプロセスが重要です。しかし、フロントエンド開発では、生成したコードはブラウザ上で実行されるため、AI エージェントが直接コードを実行したり、ブラウザのコンソールログを取得したりすることは困難です。Chrome DevTools MCP はこの課題を解決するためのツールです。 - [YAML ファイルで AI エージェントを構築する cagent](https://azukiazusa.dev/blog/yaml-file-defined-ai-agent-cagent.md): cagent は Docker 社が開発した AI エージェントフレームワークです。YAML ファイルでエージェントの振る舞い・役割・使用するツールを宣言的に定義でき、コードを 1 行も書かずにエージェントを構築できます。この記事では cagent の概要とインストール方法、YAML ファイルの書き方、実際にエージェントを動作させるまでの手順を解説します。 - [AI エージェントのための Agent Payments Protocol (AP2) を試してみた](https://azukiazusa.dev/blog/trying-agent-payments-protocol-ap2.md): 現状の決済システムでは人間が信頼できる画面上で直接購入ボタンをクリックすることを前提としており、自立型の AI エージェントがユーザーに代わって決済することは想定されていません。そこで Google により Agent Payments Protocol (AP2) と呼ばれる新しいプロトコルが提案されました。プラットフォーム間でエージェント主導の決済を安全に開始・処理することを可能にします。この記事では AP2 のサンプルコードを実際に試してみた手順を紹介します。 - [自然言語で CI/CD パイプラインを定義する Agentic Workflows](https://azukiazusa.dev/blog/natural-language-ci-cd-with-agentic-workflows.md): Agentic Workflows は自然言語で CI/CD パイプラインを定義できるツールとして GitHub Next が開発しています。自然言語で定義されたワークフローは GitHub CLI の拡張機能として提供される gh aw コマンドでコンパイルして実行できます。これは継続体なAI（Continuous AI）を実現するためのツールです。 - [仕様駆動開発を支える Spec Kit を試してみた](https://azukiazusa.dev/blog/spec-driven-development-with-spec-kit.md): 仕様駆動開発（Specification-Driven Development, SDD）は、AI コーディングエージェントを活用した新しいソフトウェア開発スタイルです。GitHub が提供する Spec Kit は、仕様駆動開発を支援するためのツールキットであり、AI との対話を通じて正確な受け入れ基準の定義とコード生成を支援します。この記事では Spec Kit を使用して仕様駆動開発を試してみます。 - [AI コーディングエージェントの管理を行う Vibe Kanban を試してみた](https://azukiazusa.dev/blog/coding-agent-management-vibe-kanban.md): Vibe Kanban は、AI コーディングエージェントの管理を支援するためのツールです。カンバン方式の UI でタスク管理を行い、各タスクに対して AI エージェントを割り当てて人間がその進捗を管理できます。この記事では Vibe Kanban を使用して AI コーディングエージェントの管理を実際に試してみます。 - [Claude Code の学習モードで自分の手でコードを書く練習をしよう](https://azukiazusa.dev/blog/claude-code-learning-mode.md): コーディングに AI エージェントを活用する流れはもはや避けられないものとなっています。しかし、AI エージェントによってコーディングの多くが自動化されると、開発者が自分の手でコードを書く機会は減少してしまうというジレンマがあります。Claude Code の学習モードを使用すると、自分の手でコードを書く練習ができます。学習モードでは、AI エージェントはユーザー自身にも一部のコードの生成を依頼します。この記事では、Claude Code の学習モードの使い方について解説します。 - [LLM へのプロンプトを構造化された文書で管理する POML](https://azukiazusa.dev/blog/poml-prompt-structured-document.md): POML (Prompt Orchestration Markup Language) は、Microsoft によって提案されたプロンプトを構造化された文書として管理するためのマークアップ言語です。プロンプト開発における構造の欠如や複雑なデータとの統合の困難さ、特定のフォーマットへの依存性といった課題を解決することを目指しています。 - [AI エージェントがインタラクティブな UI を返すことを可能にする MCP UI](https://azukiazusa.dev/blog/mcp-ui.md): MCP UI は Model Context Protocol (MCP) を拡張して、AI エージェントがインタラクティブな UI コンポーネントを返すことを可能にする仕組みです。これにより、AI エージェントとのチャットの返答としてグラフや画像ギャラリー、購入フォームなどを表示できます。この記事では MCP UI の SDK を利用して、AI エージェントがインタラクティブな UI コンポーネントを返す方法を試してみます。 - [コーディングのための LLM モデル Qwen3-Coder を試してみた](https://azukiazusa.dev/blog/coding-agent-qwen3-corder.md): Alibaba が開発した Qwen3-Coder を使用したコーディングエージェント Qwen Code を試してみた記事です。OpenRouter 経由での認証設定、コードベースの調査、リファクタリング、テストコード生成などの実際の使用例を紹介しています。 - [コーディングエージェントの能力を拡張する Serena を試してみた](https://azukiazusa.dev/blog/serena-coding-agent.md): LSP を活用してセマンティックなコード検索・編集能力を提供する MCP サーバー Serena の導入・使用方法を紹介。Claude Code でのオンボーディングからリファクタリングまでの実践的な活用例を解説します。 - [SvelteKit の remote functions でコンポーネント内で非同期にデータを取得する](https://azukiazusa.dev/blog/sveltekit-remote-functions.md): SvelteKit の remote functions を使用することで、コンポーネント内で直接非同期にデータを取得したり、サーバーにデータを書き込むことができます。これにより、コンポーネントごとに必要なデータを個別に取得できるようになり、コードの責任の分離が容易になります。remote functions は SvelteKit v2.27 以降で利用可能です。 - [Claude Code でカスタムサブエージェントを作成する](https://azukiazusa.dev/blog/create-custom-sub-agent-in-claude-code.md): Claude Code では特定の種類のタスクを処理するために呼び出されるカスタムサブエージェントを作成できます。カスタムサブエージェントを使用することでメインの会話セッションとは別に独立したコンテキストウィンドウを持つことができ、コンテキストの汚染を防ぐことができます。この記事では、Claude Code でカスタムサブエージェントを作成する方法とその利点について解説します。 - [私のキャリアに影響を与えたコンピューター・IT の定番書籍](https://azukiazusa.dev/blog/computer-it-books.md): 現代は知らないことがあればすぐにインターネットで調べたり、AI に質問できる時代です。このような時代において本を読む必要はあるのでしょうか？答えは Yes です。なぜなら、検索をしたり AI に質問をするためには、ある程度の基礎知識が必要だからです。この記事では私のキャリアにおいて影響を与えたであろうコンピューター・IT の定番書籍を紹介します。 - [AWS の エージェント IDE Kiro を使ってみた](https://azukiazusa.dev/blog/kiro-agent-ide.md): Kiro は AWS が開発した IDE 内蔵型の AI コーディングエージェントです。Kiro の特徴は単なるバイブコーディングにとどまらず、スペックを使用して仕様駆動開発でアプリケーションを開発できることです。この記事では Kiro を使ったアプリケーション開発の流れを紹介します。 - [サンドボックス環境を MCP サーバーで提供する Container Use](https://azukiazusa.dev/blog/mcp-server-container-use.md): AI コーディングエージェントは便利ですが、任意の Bash コマンドを実行できるため、ユーザーのシステムに影響を与える可能性があります。Container Use は MCP サーバーとして動作し、AI コーディングエージェントにサンドボックス環境を提供します。この記事では Container Use の利用方法について紹介します。 - [v0 の SDK を試してみる](https://azukiazusa.dev/blog/try-v0-sdk.md): v0 は Vercel が開発した AI ベースの Web アプリケーション・UI 生成ツールです。v0 のプラットフォーム API を使用すると、v0 の機能を自身のコードから利用できます。この記事では v0 TypeScript SDK を使用して、v0 のプラットフォーム API を試してみます。 - [値の補間計算を簡潔に記述できる CSS の `progress` 関数](https://azukiazusa.dev/blog/css-progress-function.md): CSS の `progress` 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。流体タイポグラフィやレスポンシブなレイアウト調整に利用できます。流体タイポグラフィは `clamp` 関数を使用して実装することもできますが、`progress` 関数を使用することでより意図を明確に記述できます。この記事では、CSS の `progress` 関数の構文と使用例について解説します。 - [Claude Code の Hooks で作業が終わった後にフォーマッターを実行する](https://azukiazusa.dev/blog/claude-code-hooks-run-formatter.md): Claude Code hooks は Claude Code のライフサイクルの特定のタイミングで実行されるユーザー定義のシェルスクリプトです。hooks を使用することで、コードのフォーマットを常に実行することができます。この記事では hooks を使用してコードの変更後に prettier が実行されるように設定してみましょう。 - [ワンクリックで MCP サーバーをインストールする .dxt ファイル](https://azukiazusa.dev/blog/one-click-mcp-server-installation-dxt-file.md): Model Context Protocol (MCP) サーバーは LLM が外部のツールと対話するための標準的な方法ですが、インストールが複雑でハードル高いという課題があります。`.dxt` ファイルは MCP サーバーを簡単にインストールできるパッケージ形式です。これを使用することでユーザーはターミナルを操作したり JSON ファイルを編集することなく MCP サーバーを利用できるようになります。 - [MCP の Structured tool output を試してみる](https://azukiazusa.dev/blog/mcp-structured-output.md): MCP の 2025-06-18 バージョンでは Structured tool output がサポートされました。ツールの定義で `outputSchema` を出力のスキーマを定義し、`structuredContent` フィールドに構造化された出力を返すことができます。この記事では MCP の TypeScript SDK を使用して Structured tool output を試してみます。 - [Claude Code でカスタムスラッシュコマンドを作成する](https://azukiazusa.dev/blog/claude-code-custom-slash-command.md): Claude Code では `/` で始まる文字列がスラッシュコマンドとして定義されておりあらかじめ割り当てられた操作を実行できます。スラッシュコマンドはユーザーが独自に定義することもできます。この記事では、Claude Code でカスタムスラッシュコマンドを作成する方法について説明します。 - [ブラウザから MCP サーバーに接続する use-mcp React フック](https://azukiazusa.dev/blog/use-mcp-react-hook.md): use-mcp はリモートの MCP サーバーに接続するための React フックです。ツールの呼び出しや認証を簡単に行うことができます。この記事では、use-mcp を使用して MCP サーバーに接続し、ツールを呼び出す方法と、OAuth 認証の実装方法について解説します。 - [A2A プロトコルの JavaScript SDK を試してみる](https://azukiazusa.dev/blog/a2a-protocol-js-sdk.md): A2A プロトコルはエージェント間の通信を標準化するためのプロトコルです。JavaScript SDK を使って A2A サーバーとクライアントを実装し、エージェント間通信を試してみます。 - [バイブコーディングチュートリアル：Claude Code でカンバンアプリケーションを作成しよう](https://azukiazusa.dev/blog/vibe-coding-tutorial-create-app-with-claude-code.md): バイブコーディングとは、AI エージェントを活用して直感的にアプリケーションを開発する新しいコーディングスタイルです。このチュートリアルでは、Claude Code を使って Next.js でカンバンボードアプリケーションを作成します。 - [OpenAI Agents の TypeScript SDK](https://azukiazusa.dev/blog/openai-agents-sdk-typescript.md): OpenAI Agents SDK は AI エージェントを構築するためのパッケージです。軽量で使いやすく、抽象化を最小限に抑えているのが特徴です。この記事では、OpenAI Agents SDK の TypeScript バージョンの使用例を紹介します。 - [フロントエンドアプリケーションがエージェントに接続する方法を標準化する AG-UI](https://azukiazusa.dev/blog/how-to-standardize-frontend-apps-connecting-to-agents.md): AG-UI はフロントエンドアプリケーションがエージェントに接続する方法を標準化するプロトコルです。この記事では AG-UI を使用してフロントエンドアプリケーションがエージェントに接続する方法を紹介します。 - [コーディングエージェントの現状の整理とエンジニアの仕事の変化について](https://azukiazusa.dev/blog/coding-agents-and-developers-work.md): AI によるコーディングの支援はコード補完型からチャット型、そして自律型へと進化しています。この記事では現時点で主流となっているコーディングエージェントの種類とその特徴を整理したうえで、エンジニアの仕事の変化について考察します。 - [Claude Code Action で Claude Code を GitHub に統合しよう](https://azukiazusa.dev/blog/claude-code-action-github-integration.md): Claude Code Action は Claude Code を GitHub Actions のワークフローに統合するためのアクションです。これを使用することで、GitHub 上でコードの生成やレビューを AI に依頼することができます。 - [Mastra の A2A プロトコルサポート](https://azukiazusa.dev/blog/mastra-a2a-protocol-support.md): Mastra は A2A プロトコルをサポートしています。Mastra サーバーを構築することで A2A プロトコルに準拠したサーバーが立ち上がります。この記事では Mastra を使用して A2A プロトコルに準拠したサーバーを構築し、Mastra のクライアント SDK を使用して A2A プロトコルの仕様に従い通信を行う方法を紹介します。 - [TypeScript で AI エージェントを構築する VoltAgent](https://azukiazusa.dev/blog/typescript-ai-agent-voltagent.md): VoltAgent は TypeScript で AI を活用したアプリケーションを構築するためのツールキットです。VoltAgent Console を使用すると、エージェントの状態をリアルタイムで確認したり、エージェントのワークフローを可視化できる点が特徴です。 - [React Router の Server Components 対応](https://azukiazusa.dev/blog/react-router-server-components.md): React Router はプレビュー版として Server Components に対応しました。これにより loader や actions を使用してデータを返す際にコンポーネント渡したり、Server Components ファーストのサーバーコンポーネントルートを作成できるようになりました。この記事では React Router の Server Components 対応を実際に試してみます。 - [Vercel で MCP サーバーを構築する](https://azukiazusa.dev/blog/vercel-mcp-server.md): Model Context Protocol (MCP) の 2025-03-26 の仕様では新たに Streamable HTTP が追加され、リモート MCP サーバーへの注目が集まっています。この記事では Next.js を使用して Vercel 上に MCP サーバーを構築する方法を紹介します。 - [Cloudflare で MCP サーバーを構築する](https://azukiazusa.dev/blog/cloudflare-mcp-server.md): Model Context Protocol (MCP) の 2025-03-26 の仕様では新たに Streamable HTTP が追加され、リモート MCP サーバーへの注目が集まっています。この記事では `agents` フレームワークを使用して Cloudflare 上に MCP サーバーを構築する方法を紹介します。 - [Error インスタンスかどうか判定する Error.isError() メソッド](https://azukiazusa.dev/blog/error-is-error.md): Error.isError() メソッドは、オブジェクトが Error インスタンスかどうかを判定するためのメソッドです。今までも instanceof 演算子を使用して判定することができましたが、偽陽性と偽陰性が発生する可能性があります。Error.isError() メソッドは Array.isArray() と同じく内部スロットを使用して判定するため、より堅牢に判定することができます。 - [Docker の MCP Toolkit を試してみる](https://azukiazusa.dev/blog/docker-mcp-toolkit.md): Docker の MCP Toolkit はコンテナ化された MCP サーバーを AI エージェントと統合するための Docker Desktop の拡張機能です。コンテナ化された環境で MCP サーバーを実行することができ、信頼された Docker MCP カタログから MCP ツールを簡単にインストールできる点が特徴です。 - [ESLint を MCP サーバーとして実行する](https://azukiazusa.dev/blog/eslint-mcp-server.md): ESLint v9.26.0 から MCP サーバーとして実行できるようになりました。この機能により LLM（大規模言語モデル）は ESLint のルールを使用してコードを修正することができるようになります。 - [actions/ai-inference を使って GitHub Actions のワークフローから AI モデルを呼び出す](https://azukiazusa.dev/blog/actions-ai-interface-github-actions.md): actions/ai-inference は GitHub Actions のワークフローから AI モデルを呼び出すための公式のアクションです。これを使用することで CI/CD のワークフローから AI モデルを簡単に利用できるようになります。この記事ではプルリクエスト上で AI に記事のレビューをしてもらうという実践的な使用例を紹介します。 - [UI の一部を非表示にする React の Activity コンポーネント](https://azukiazusa.dev/blog/react-activity-component.md): React の新しい実験的なコンポーネントとして `` が追加されました。これは UI の表示非表示を切り替えるために使用されます。従来の条件付きレンダリングとは異なり、アンマウントされた場合にも状態を保持する点が特徴です。 - [AIと本音トーク：エンジニアの仕事、これからどうなる？](https://azukiazusa.dev/blog/ai-talk-what-will-happen-to-engineers.md): 「AI コーディングエージェントの台頭によりエンジニアの働き方はどう変わるのか？」というテーマについて AI と人間のインタビューを通じて探ります。 - [Ink を使って CLI アプリを React で書く](https://azukiazusa.dev/blog/ink-cli-app.md): Ink は CLI アプリを React で書くためのライブラリです。Flexbox レイアウトエンジンである Yoga を使用しているため、Web アプリケーションと同じような CSS を使って UI を構築できることが特徴です。Codex や Claude Code といったコーディングエージェントの CLI アプリが Ink で書かれています。 - [MCP サーバーの Streamable HTTP transport を試してみる](https://azukiazusa.dev/blog/mcp-server-streamable-http-transport.md): MCP では stdio と Streamable HTTP の 2 つの transport が定義されています。TypeScript SDK では v1.10.0 から Streamable HTTP transport がリリースされました。この記事では MCP サーバーを構築し、Streamable HTTP transport を試してみます。 - [AI エージェントの連携を標準化する A2A プロトコルを試してみる](https://azukiazusa.dev/blog/ai-a2a-protocol.md): AI エージェント同士の連携を標準化するために Agent2Agent プロトコル（A2A）を発表しました。A2A プロトコルは基盤となるフレームワークやベンダーに依存せず、エージェント同士が安全な方法で相互に通信できるように設計されています。この記事ではサンプルコードを通じて A2A プロトコルを使用した AI エージェントの連携を体験してみます。 - [コーディング AI エージェントを自作してみよう](https://azukiazusa.dev/blog/build-your-own-coding-ai-agent.md): 好むと好まずと関わらず、ソフトウェア開発において AI の活用は重要なパラダイムシフトの 1 つです。AI エージェントはユーザーからの指示を元に自律的にタスクを選択し、実行します。この記事では、コーディング AI エージェントを自作する過程を紹介します。 - [Vercel AI SDK で MCP クライアントをツールとして利用する](https://azukiazusa.dev/blog/vercel-ai-sdk-mcp-client.md): MCP（Model Context Protocol）は LLM に追加のコンテキストを提供するための標準化されたプロトコルです。Vercel AI SDK は v4.2 から MCP をサポートしており、MCP クライアントをツールとして利用できます。この記事では Vercel AI SDK を使って MCP ツールを使用する方法を紹介します。 - [::scroll-button と ::scroll-marker を使って CSS だけでカルーセルを作る](https://azukiazusa.dev/blog/css-only-carousel.md): カルーセルは Web アプリケーションでよく使われる UI コンポーネントの一つであるものの、標準化された実装方法が存在しないため、各ライブラリやフレームワークで独自の実装が行われています。この問題を解決するため、CSS だけを使用してカルーセルを実装するための新しい仕様が提案されています。:この仕様では ::scroll-button と ::scroll-marker 擬似要素を使用してカルーセルを実装します。 - [Vercel AI SDK を使って Next.js アプリに AI 機能を追加する](https://azukiazusa.dev/blog/vercel-ai-sdk-nextjs.md): Vercel AI SDK は TypeScript 向けの AI 機能を活用するプロダクトを構築するためのツールです。AI SDK は AI モデルのプロバイダー間における API の違いを抽象化することで、開発者はアプリケーションの開発に集中できるようになります。この記事では Vercel AI SDK の使い方を確認し、最終的に Next.js で構築した Web アプリケーションに AI 機能を追加する方法を紹介します。 - [TypeScript で MCP サーバーを実装し、Claude Desktop から利用する](https://azukiazusa.dev/blog/typescript-mcp-server.md): MCP（Model Context Protocol）とはアプリケーションが LLM にコンテキストを提供する方法を標準化するプロトコルです。MCP を使用することで、LLM は外部ツールやサービスからコンテキストを取得するだけでなく、コードの実行やデータの保存など、さまざまなアクションを実行できるようになります。この記事では MCP サーバーを TypeScript で実装する方法を紹介します。 - [TypeScript 製の AI エージェントフレームワーク Mastra](https://azukiazusa.dev/blog/typescript-ai-agent-framework-mastra.md): Mastra は TypeScript 製の AI エージェントフレームワークであり Gatsby の開発チームによって開発されています。Mastra サーバーを実行することで REST API サーバーを介してエージェントとやり取りすることができます。Mastra はAI エージェントを構築するために必要なプリミティブな機能を提供するために設計されています。 - [ブログで llms.txt を提供してみた](https://azukiazusa.dev/blog/llms-txt.md): 従来のウェブサイトは人間用のマークアップが主であり、bot が情報を収集するために無駄な情報が多く含まれています。一方でウェブサイトを提供する側にとっても AI エージェントにより過剰なスクレイピングによりサーバーの負荷がかかることが問題となっています。LLM に適したコンテンツを提供するために Answer.AI の共同創業者である Jeremy Howard 氏により `llms.txt` というファイルが提案されました。 - [インラインで条件分岐する CSS の if() 関数](https://azukiazusa.dev/blog/inline-conditional-css-if-function.md): if() 関数は CSS Values and Units Module Level 5 という仕様で提案されている関数です。if() 関数は CSS でインラインの条件分岐を可能にします。 - [ブラウザで非同期イベントストリームを処理する Observable API](https://azukiazusa.dev/blog/observable-api-for-handling-asynchronous-event-streams-in-the-browser.md): Observable API は非同期イベントストリームを処理するための API です。 EventTarget に .when() メソッドを追加し addEventListener() よりも宣言的で優れたイベントハンドリングを提供します。 - [ブラウザに広くサポートされていない CSS を検証する require-baseline ESLint ルール](https://azukiazusa.dev/blog/require-baseline-eslint-rule-to-validate-css-not-widely-supported-in-browsers.md): Baseline はブラウザで利用可能な JavaScript や CSS のサポート状況を明確化するプロジェクトです。ESLint/CSS の require-baseline ルールを使用することで、Baseline でサポートされていない CSS プロパティや値を検出することができます。 - [アップグレードされた CSS の `attr()` 関数を使う](https://azukiazusa.dev/blog/upgraded-css-attr-function.md): `attr()` 関数は HTML の属性を読み取り、それを CSS で利用できるようにする関数です。従来までは `content` プロパティのみで使用できましたが、CSS Values and Units Module Level 5 ではこの制限が見直され、`attr()` 関数がカスタムプロパティを含む任意の CSS プロパティで使用できるようになりました。 - [ボタンが押し込まれた状態を表す Press Button の提案](https://azukiazusa.dev/blog/proposal-press-button.md): UI デザインにおいてボタンが「押し込まれた」状態を表現することはしばしばあります。しかし、ネイティブの HTML 要素では表現できず `aria-pressed` 属性を使用する必要がありました。Press Button Proposal では `type="press"` 属性を追加することでボタンが押し込まれた状態を表現することが提案されています。 - [Deno v2.2 で追加されたビルドイン OpenTelemetry サポートを試してみる](https://azukiazusa.dev/blog/deno-v2-2-opentelemetry.md): Deno v2.2 でビルドインの OpenTelemetry サポートが追加されました。アプリケーションのコードに変更を加えることなく、Deno のビルトイン API から自動的にテレメトリーデータを計装できるようになります。 - [Prisma で OpenTelemetry のトレースデータを計装する](https://azukiazusa.dev/blog/prisma-opentelemetry-trace.md): Prisma は OpenTelemetry の仕様に準拠したトレースデータを計装するためのパッケージを提供しています。この記事では、Prisma で OpenTelemetry のトレースデータを計装する方法について紹介します。 - [スキーマバリデーションライブラリの標準インターフェース standard-schema](https://azukiazusa.dev/blog/schema-validation-library-standard-interface-standard-schema.md): スキーマバリデーションライブラリはここ数年で人気を集めています。多くのライブラリが登場する中で、standard-schema はスキーマバリデーションライブラリの標準インターフェースを提供します。これにより、エコシステムツールがユーザー定義の型検証ツールをより簡単に受け入れられるようにすることを目指しています。 - [パスキーによる認証をブラウザで実装してみる](https://azukiazusa.dev/blog/implement-path-key-in-browser.md): パスキーとはパスワードに代わる認証方法で、生体認証やデバイス PIN を使ってログインができる仕組みです。ユーザーはパスワードを覚える必要がなく、またフィッシング攻撃にも強いという点からよりセキュア認証方法として注目を集めています。この記事では WebAuthn を使ってパスキーをブラウザで実装する方法を紹介します。 - [React Server Components を手軽に扱うフレームワーク react-server](https://azukiazusa.dev/blog/react-server.md): react-server は Node.js で JavaScript ファイルを実行するかのように React Server Components を扱うことを目的としたフレームワークです。Next.js の機能が過剰に感じられるような小さなアプリケーションを開発する際に有用です。 - [型安全にクエリパラメーターを扱う nuqs](https://azukiazusa.dev/blog/type-safe-query-string-parameters-with-nuqs.md): フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。ですが、クエリパラメーターの型が文字列であるため、型安全性が保証されないという課題があります。この記事では `nuqs` というライブラリを使用してクエリパラメーターを型安全に扱う方法について解説します。 - [ダイアログの Light dismiss を有効にする `