azukiazusa のテックブログ2

Web フロントエンド要素多めの技術ブログです。週に1度更新されます。

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 とやり取りしてみた

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 サーバーのツールを組み合わせることでキャンバス上のノードの

プラットフォームごとの Chat ボットの実装を抽象化する Chat SDK

Chat SDK は TypeScript で記述されたライブラリで、1 つのコードベースで複数のチャットプラットフォームに対応するチャットボットを開発できるようになります。イベント型アーキテクチャを採用しており、メンション, メッセージ,

テキストサイズの拡大設定の問題と解決策

WCAG 2.2 では、ユーザーが画像拡大ソフトや支援技術を使用せずに、200% までテキストを拡大してもコンテンツが正しく表示されることを要求しています。しかし、テキストサイズの拡大に関しては、ブラウザや OS の設定を尊重せず、ユーザー

Claude Code デスクトップで Worktree を作成するとき .worktreeinclude で .gitignore で除外されているファイルを含める

Git Worktree を作成するとき、.gitignore に指定している .env ファイルなどがコピーされないという問題があります。この問題を解決するために Claude Code のデスクトップバージョンでは .worktreei

デスクトップ Claude Code の Preview 機能で UI を直接確認する

Claude Code のデスクトップアプリに新しい Preview 機能がリリースされました。これを使用すると、コードから起動したアプリケーションの UI を直接確認しながら、同時にログやコードも確認して問題を解決できます。この記事では

Claude Code to Figma を使ってコードから Figma デザインを生成する

Claude Code to Figma はコードから Figma デザインを生成するための機能です。Figma MCP サーバーの `generate_figma_design` ツールを使用して、ローカルで開発したコードから Figma

AI エージェントのセッションを Git 互換のデータベースに保存する Entire CLI

Entire CLI は AI エージェントのセッションを Git 互換のデータベースとして保存するためのツールです。Git レポジトリで Entire を有効にすると、AI エージェントのセッションをチェックポイントとして保存できるように

Web アプリケーションをツール化する WebMCP

WebMCP は Web 開発者が Web アプリケーションの機能をツールとして公開できるようにする JavaScript インターフェイスです。これにより AI エージェントが Web アプリケーションの機能を直接呼び出して操作できるよう

React で動画を作る Remotion

Remotion は React を使ってプログラム的に動画を作成できるフレームワークです。CSS や SVG、Canvas API などのウェブ技術を活用したり、変数や関数、ループ、条件分岐などのプログラミングの概念を利用して動画を生成で

Claude Code のオーケストレーション機能であるエージェントチームを試してみた

Claude Code のエージェントチームを使用すると、複数の Claude Code インスタンスが連携して動作するようになります。この記事では、Claude Code のエージェントチーム機能を試し、どのように動作するかを探ってみます

MoonBit の宣言 UI ライブラリ Luna を使ってみる

Luna は MoonBit と JavaScript を使用して Web アプリケーションのユーザーインターフェースを構築するための宣言型 UI ライブラリです。この記事では、Luna UI と MoonBit を使用してシンプルなカウン

MoonBit で RESTful API サーバーを構築する

MoonBit は、WebAssembly や JavaScript にコンパイルできる新しいプログラミング言語です。この記事では、MoonBit を使用してシンプルな RESTful API サーバーを作成する方法を紹介します。

AI とインタラクティブな UI のやり取りを実現する MCP Apps

MCP Apps は MCP にインタラクティブな UI コンポーネントを返す方法を標準化した拡張機能です。この記事では MCP Apps を使用してインタラクティブな UI コンポーネントをエージェントが返す方法について試してみます。

はじめての MoonBit

MoonBit は WebAssembly と JavaScript にコンパイル可能な新しいプログラミング言語です。Rust 風のシンタックスと関数型プログラミングの特徴を持ちながら、ガベージコレクションを採用しているという特徴があります

新しいデザインツール Pencil を試してみた

Pencil は Figma のような使用感で UI デザインができるツールです。Pencil MCP サーバーを利用して双方向に AI コーディングツールと連携し、デザインからコードを書き出したり、プロンプトでデザインを生成したりすること

TUI を構築するための Typescript ライブラリ OpenTUI

AI コーディングエージェントの普及により、ターミナルベースの TUI アプリケーションの需要が高まっています。OpenTUI は Typescript で TUI アプリケーションを簡単に構築できるライブラリです。この記事では OpenT

AI エージェントのために CLI でブラウザを操作する agent-browser

agent-browser は Vercel が開発した CLI でブラウザを操作するツールであり、AI エージェントにブラウザ操作能力を提供するために設計されています。この記事では agent-browser のインストール方法、基本的な

Claude Code のステータスラインを TUI でカスタマイズできる ccstatusline

Claude Code のステータスラインは oh-my-zsh のターミナルプロンプトのようにカスタマイズ可能です。これにより現在のブランチやトークンの使用量などを一目で確認できるようになります。この記事では TUI で簡単にステータスラ

1 つの Step で完結するバックエンドフレームワーク Motia を試してみた

Motia はバックエンド開発をシンプルにすることを目指したコードファーストのバックエンドフレームワークです。この記事では Motia を使用して簡単な TODO REST API を構築する方法を紹介します。

Figma MCP でデザインシステムを提供して AI コーディングエージェントに一貫したフロントエンドコードを書かせる

AI コーディングエージェントにフロントエンドのコードを書かせる際、Figma MCP を使用してデザインコンテキストやデザイントークンを提供することで、一貫したデザインガイドラインを遵守させる方法を紹介します。

Claude Code のツール検索ツールを有効にして MCP のトークン使用量を削減する

Claude Code のツール検索ツールを有効にすることで、MCP ツールの定義を事前にコンテキストウィンドウに読み込まず、必要に応じて動的にツールを検索・呼び出しできます。これにより、多数の MCP ツールをインストールしている場合でも

2025 年に読んでよかった本

AI を活用するための技術というのはとりわけ新しいものではなく、過去の知見を基盤として構築されていることが多いです。それゆえに、AI 時代だからこそ基礎的な知識を体系的に学ぶことができる書籍に学ぶことに価値を求めるのです。この記事では 20

Claude Code の LSP サポート

Claude Code のバージョン 2.0.74 から LSP（Language Server Protocol）サポートが追加されました。LSP サポートにより、Claude Code はコードベースに対してシンボルの定義検索、参照検索

ブラウザから要素を選択してエージェントにコンテキストを提供する React Grab を試してみた

React Grab はブラウザ上で要素を選択し、その要素に対応するコードコンテキストをコーディングエージェントに提供するライブラリです。この記事では React Grab のセットアップ方法と使用方法を紹介します。

フルスタックフレームワーク TanStack Start を試してみた

TanStack Start は TanStack Router と Vite をベースにしたフルスタック React フレームワークです。型安全なルーティング、サーバーサイドレンダリング、ストリーミング、サーバー関数、API ルートなどの

TypeScript 向けの AI フレームワーク TanStack AI を試してみた

TanStack AI は TanStack チームが開発する TypeScript 向けの軽量な AI フレームワークです。LLM プロバイダーのインターフェイスを抽象化し、ツール呼び出しやチャット機能を提供します。この記事では TanS