はてなブックマーク

Claude Code のデスクトップアプリに新しい Preview 機能がリリースされました。これを使用すると、コードから起動したアプリケーションの UI を直接確認しながら、同時にログやコードも確認して問題を解決できます。この記事では Preview 機能の使い方を紹介します。 Claude Code のデスクトップアプリに新しい Preview 機能がリリースされました。これを使用すると、コードから起動したアプリケーションの UI を直接確認しながら、同時にログやコードも確認して問題を解決できます。この記事では Preview 機能の使い方を紹介します。 Preview 機能を使用する まずは Claude Code のデスクトップアプリをインストールしましょう。Claude Code のドキュメント からお使いの OS に対応したインストーラーをダウンロードして、インストールを完了

Claude Code to Figma はコードから Figma デザインを生成するための機能です。Figma MCP サーバーの `generate_figma_design` ツールを使用して、ローカルで開発したコードから Figma デザインを生成して、さらに Figma 上で編集した内容をコードに反映させるという双方向のワークフローが実現できるようになります。 Figma MCP サーバー に新しいツールがリリースされ、ブラウザ上の UI からコードを Figma デザインに変換できるようになりました。これにより、ローカルで開発したコードから Figma デザインを生成して、さらに Figma 上で編集した内容をコードに反映させるという双方向のワークフローが実現できるようになります。この記事では実際のコードから Figma デザインを生成する方法を試してみます。 Figma MC

Entire CLI は AI エージェントのセッションを Git 互換のデータベースとして保存するためのツールです。Git レポジトリで Entire を有効にすると、AI エージェントのセッションをチェックポイントとして保存できるようになります。チェックポイントではユーザーのプロンプトや AI エージェントの応答、ツールの使用履歴、AI がコードを書いた割合などを確認できます。 今日の開発者の役割は大きく変わりつつあります。Claude Code, Codex, Cursor といった AI コーディングアシスタントの登場により、開発者はコードを書くことだけでなく、AI エージェントを効果的に活用してプロジェクトを管理して問題を解決することが求められるようになっており、まるでマネージャーのような役割も担うようになっています。 このような状況の中で GitHub の元 CEO である T

WebMCP は Web 開発者が Web アプリケーションの機能をツールとして公開できるようにする JavaScript インターフェイスです。これにより AI エージェントが Web アプリケーションの機能を直接呼び出して操作できるようになります。 WebMCP は Web 開発者が Web アプリケーションの機能をツールとして公開できるようにする JavaScript インターフェイスです。これは AI エージェントや支援技術から呼び出せる自然言語による説明と構造化スキーマを備えた JavaScript 関数です。WebMCP を使用する Web アプリケーションは MCP サーバーとみなすことができます。これにより従来の AI エージェントがウェブページのスクリーンショットを解析して情報を取得するのではなく、Web アプリケーションが提供するツールを直接呼び出して操作できるようにな

Claude Code のエージェントチームを使用すると、複数の Claude Code インスタンスが連携して動作するようになります。この記事では、Claude Code のエージェントチーム機能を試し、どのように動作するかを探ってみます。 Claude Code のエージェントチームを使用すると、複数の Claude Code インスタンスが連携して動作するようになります。1 つのセッションがチームリーダーとして機能し、他のセッションにタスクを割り当てたり作業を調整したりします。チームメンバーは独立したコンテキストで動作し、それぞれのメンバーと直接やり取りできます。 従来のサブエージェント機能では、メインのエージェントがサブエージェントにタスクを委任する一方向の関係であり、サブエージェントはメインエージェントのみに結果を報告できました。一方エージェントチームでは、リーダーを介さずにメン

MoonBit は、WebAssembly や JavaScript にコンパイルできる新しいプログラミング言語です。この記事では、MoonBit を使用してシンプルな RESTful API サーバーを作成する方法を紹介します。 MoonBit は、WebAssembly や JavaScript にコンパイルできる新しいプログラミング言語です。Rust のような構文とパフォーマンスを持ちつつ、ガベージコレクションを採用し所有権やライフタイムといった概念がないという点が特徴です。 この記事では、MoonBit を使用してシンプルな RESTful API サーバーを構築する方法を紹介します。TODO アイテムを管理するための基本的な CRUD 操作を提供する API サーバーの作成を通じて、以下の内容をカバーします。 moonbitlang/async パッケージを使用して非同期処理によ

MCP Apps は MCP にインタラクティブな UI コンポーネントを返す方法を標準化した拡張機能です。この記事では MCP Apps を使用してインタラクティブな UI コンポーネントをエージェントが返す方法について試してみます。 AI エージェントとチャット形式の対話ではなく、インタラクティブな UI を通じてやり取りすることが求められるケースがあります。例えば、グラフやチャートとして視覚的に表示したり、購入したい商品の一覧をカード形式で表示したうえで、ユーザーがクリックして購入を完了できるようにしたりするといったケースが考えられます。このようなインタラクティブな UI のやり取りを可能にした Apps in ChatGPT や MCP-UIは大きな注目を集めました。 Apps SDK や MCP-UI はそれぞれ[Model Context Protocol (MCP)]を基盤と

MoonBit は WebAssembly と JavaScript にコンパイル可能な新しいプログラミング言語です。Rust 風のシンタックスと関数型プログラミングの特徴を持ちながら、ガベージコレクションを採用しているという特徴があります。この記事では MoonBit の基本的な使い方をチュートリアル形式で紹介します。 MoonBit は、WebAssembly (Wasm) や JavaScript (JS) へのコンパイルに対応した新しいプログラミング言語です。中国のスタートアップにより開発されており、以下のような特徴があります。 高速なコンパイル 出力される Wasm バイナリが軽量 Rust 風のシンタックス パターンマッチングや代数データ型のような関数型プログラミングの特徴をサポート Rust のように所有権を管理せずに、ガベージコレクションを使用 この記事では MoonBit

Pencil は Figma のような使用感で UI デザインができるツールです。Pencil MCP サーバーを利用して双方向に AI コーディングツールと連携し、デザインからコードを書き出したり、プロンプトでデザインを生成したりすることができます。 Pencil は、Figma のような使用感で UI デザインができるツールです。Pencil MCP サーバーを利用して双方向に AI コーディングツールと連携し、デザインからコードを書き出したり、プロンプトでデザインを生成したりすることができます。オープン形式の .pen ファイルを使用しており、テキストエディタで内容を確認したり、バージョン管理システムで管理したりすることも可能です。また Figma からのインポートにも対応しています。 この記事では Pencil を実際に試してみた感想を共有します。 インストールとセットアップ Pe

AI コーディングエージェントの普及により、ターミナルベースの TUI アプリケーションの需要が高まっています。OpenTUI は Typescript で TUI アプリケーションを簡単に構築できるライブラリです。この記事では OpenTUI の特徴と基本的な使い方を紹介します。 AI コーディングエージェントの普及により、ターミナルにふれる時間が増えた開発者が多いでしょう。そんな中、ターミナルベースの TUI (Text-based User Interface) アプリケーションの需要が高まっています。OpenTUI は Typescript で TUI アプリケーションを簡単に構築できるライブラリです。OpenTUI は opencode の基盤として利用されていることもあり、今後も開発が活発に続けられることが期待されます。この記事では OpenTUI の特徴と基本的な使い方を紹介

agent-browser は Vercel が開発した CLI でブラウザを操作するツールであり、AI エージェントにブラウザ操作能力を提供するために設計されています。この記事では agent-browser のインストール方法、基本的な使い方、AI エージェントからの利用方法について紹介します。 AI エージェントにより効果的にタスクを実行させるためには、適切なフィードバックループを構築することが重要です。特にフロントエンドの開発においては、ブラウザ上での動作確認が欠かせません。しかし AI エージェントは通常ブラウザを直接操作する能力を持っていないので、ツールを提供して AI エージェントがブラウザを操作できるようにする必要があります。 AI エージェントにブラウザを操作させるツールとして Playwright MCP や ChromeDevTools/chrome-devtools

Claude Code のステータスラインは oh-my-zsh のターミナルプロンプトのようにカスタマイズ可能です。これにより現在のブランチやトークンの使用量などを一目で確認できるようになります。この記事では TUI で簡単にステータスラインをカスタマイズできる ccstatusline の使い方を紹介します。 Claude Code の下部に表示されるステータスラインは自分好みにカスタマイズできます。これは oh-my-zsh のターミナルプロンプト（PS1）をカスタマイズするのと似ています。ステータスラインをカスタマイズすれば以下のように現在のブランチやコンテキストの使用量などを一目で確認できるようになります。 ステータスラインをカスタマイズする方法は以下の 2 つが用意されています。 /statusline コマンド: Claude Code 自身にステータスラインの設定を支援して

Motia はバックエンド開発をシンプルにすることを目指したコードファーストのバックエンドフレームワークです。この記事では Motia を使用して簡単な TODO REST API を構築する方法を紹介します。 Motia はバックエンド開発をシンプルにすることを目指したフレームワークです。Motia はコアプリミティブな概念である Step で設計されており、REST API, バックグラウンドジョブ, マルチステップワークフロー, AI エージェントの構築など、さまざまなバックエンド機能を 1 つのフレームワークで一貫した方法で実装できます。 Motia の目的は複雑になりすぎたバックエンドの開発をシンプルにし、開発者体験を向上させることです。現代のバックエンド開発では REST API のためのフレームワーク、SQS のようなジョブキューを通じたバックグラウンドジョブ、更にはバッチ処

AI コーディングエージェントにフロントエンドのコードを書かせる際、Figma MCP を使用してデザインコンテキストやデザイントークンを提供することで、一貫したデザインガイドラインを遵守させる方法を紹介します。 AI コーディングエージェントにフロントエンドのコードを書かせる際、デザインの正確なコンテキストを提供することが課題の 1 つです。特に何も指定せずにフロントエンドのコードを書かせると、紫色の配色やグラデーションに偏りすぎたり、Inter や Roboto など特定のフォントばかり使用する傾向があります。これは Tailwind UI のような人気の UI フレームワークの初期設定に Indigo（紫色）を採用しており、それが AI モデルの学習データに多く含まれていることが原因と考えられます。 AI によって誰でも一定水準のフロントエンドコードを書けるようになる一方で、画一的な

Claude Code のツール検索ツールを有効にすることで、MCP ツールの定義を事前にコンテキストウィンドウに読み込まず、必要に応じて動的にツールを検索・呼び出しできます。これにより、多数の MCP ツールをインストールしている場合でもトークン使用量を大幅に削減できる可能性があります。この記事では Claude Code のツール検索ツールの概要と使用方法を紹介します。 Claude のツール検索ツール は Claude がすべてのツール定義を事前にコンテキストウィンドウに読み込むのではなく、必要に応じてツールを検索・呼び出すことができる機能です。これにより、不必要なツール定義がコンテキストウィンドウに含まれてコンテキストを圧迫する問題を回避できます。 2025 年 12 月現在、環境変数 ENABLE_TOOL_SEARCH=true を有効にすることで実験的に Claude Cod

AI を活用するための技術というのはとりわけ新しいものではなく、過去の知見を基盤として構築されていることが多いです。それゆえに、AI 時代だからこそ基礎的な知識を体系的に学ぶことができる書籍に学ぶことに価値を求めるのです。この記事では 2025 年に読んで特に印象に残った本をいくつか紹介します。 2025 年はとりわけ AI 関連の書籍が多く出版された年であったように感じました。しかし AI を活用するための技術というのはとりわけ新しいものではなく、過去の知見を基盤として構築されていることが多いです。コーディングの分野でも AI によるコード生成を魔法として捉えるのではなく、自分のプログラマーとしての能力を増幅させるためのツールとして捉え、ツールを熟達し磨き上げより良いものにすることが重要なのです。このことはまさに 達人プログラマー に書かれている内容と通じるものがあります。AI 時代だか

Claude Code のバージョン 2.0.74 から LSP（Language Server Protocol）サポートが追加されました。LSP サポートにより、Claude Code はコードベースに対してシンボルの定義検索、参照検索、ホバー情報の取得などの操作が可能になります。この記事では Claude Code の LSP サポートの概要と使用方法を紹介します。 コーディングエージェントが LSP（Language Server Protocol）を扱えるようになることで、エージェントがより効率的にタスクを遂行できるようになります。文字列でコードベース全体を検索するのではなく、LSP を通じてコードの構造やシンボル情報にアクセスできるため、正確な情報を迅速に取得・編集できるためトークンと時間を大きく節約できます。このことはコーディングエージェントにセマンティックなコード検索・編集

React Grab はブラウザ上で要素を選択し、その要素に対応するコードコンテキストをコーディングエージェントに提供するライブラリです。この記事では React Grab のセットアップ方法と使用方法を紹介します。 コーディングエージェントに期待したコードを生成してもらうためには、適切なコンテキストを提供することが重要です。しかし Web フロントエンドの分野ではコーディングエージェントの出力結果を元に修正を依頼する、という一般的なワークフローが困難な場合があります。 例えば実装したコードに対してテストを実行するのであれば、コーディングエージェントはターミナルの出力結果を元に修正できます。しかし UI の見た目や動作に関するフィードバックを提供する場合、コーディングエージェントはブラウザ上で実際に動作している UI を直接確認できません。 そのため、UI のスクリーンショットや DOM

TanStack Start は TanStack Router と Vite をベースにしたフルスタック React フレームワークです。型安全なルーティング、サーバーサイドレンダリング、ストリーミング、サーバー関数、API ルートなどの機能を提供します。この記事では TanStack Start の概要と基本的な使い方を紹介します。 TanStack Start は TanStack Router と Vite をベースにしたフルスタック React フレームワークです。TanStack Router が提供する型安全なルーティング機能に加えて、サーバーサイドレンダリング（SSR）, ストリーミング, サーバー関数, API ルートなどの機能を備えています。この記事では TanStack Start の概要と基本的な使い方を紹介します。TanStack Start は Next.js

TanStack AI は TanStack チームが開発する TypeScript 向けの軽量な AI フレームワークです。LLM プロバイダーのインターフェイスを抽象化し、ツール呼び出しやチャット機能を提供します。この記事では TanStack AI の概要と基本的な使い方を紹介します。 AI エージェントの開発をする上で LLM の API 呼び出しを抽象化してくれるフレームワークは欠かせないものと言えるでしょう。OpenAI や Anthropic などの主要な LLM プロバイダーはそれぞれ公式 SDK を提供していますが、それぞれ異なるインターフェイスを提供しているため複数の LLM モデルを切り替えながら開発する場合には煩雑さが増してしまいます。 この差異を吸収してくれるフレームワークとして TypeScript なら AI SDK、Python なら LangChain が

ツールの実行について Claude に明確なガイドラインを与えるため、両方を許可するのではなく ['direct'] または ['code_execution_20250825'] のいずれかを指定することが推奨されます。 実際にコードを実行してみましょう。以下のようなレスポンスが得られるはずです。 { "model": "claude-sonnet-4-5-20250929", "id": "msg_xxx", "type": "message", "role": "assistant", "content": [ { "type": "text", "text": "最新のTypeScriptの新機能について調べます。" }, { "type": "server_tool_use", "id": "srvtoolu_xxx", "name": "code_execution", "in

Claude Code のプランモードはリリース当初から定期的に改善が加えられており、より正確な計画を立てられるようになっています。この記事では最近の改善点について紹介します。 Claude Code v2.0.51 のリリースノートでは「Plan Mode now builds more precise plans and executes more thoroughly（プランモードがより正確な計画を立て、より徹底的に実行するようになりました）」と記載されています。リリースノートでは 1 行だけの説明で具体的な改善内容がわからないのですが、実際に Claude Code のプランモードは定期的に新しい機能が追加されており、プランモードが生まれた当初と比べて大きく進化していることがわかります。 プランモードの改善点は主に以下の 3 つです。 プランの計画に専用のサブエージェントを使用する

MCP では多くのツール定義が LLM のコンテキストを圧迫する問題があります。Claude のツール検索ツールを使用すると、必要に応じて関連するツールのみを LLM に提供でき、コンテキスト圧迫を軽減できます。この記事では Claude の TypeScript クライアントを使用して、ツール検索ツールを実際に使用した例を紹介します。 Model Context Protocol (MCP) の問題点の 1 つとしてツールの定義が LLM のコンテキストを圧迫することが挙げられます。ほとんどの MCP クライアントはツールの定義を LLM のシステムプロンプトにすべて渡す設計となっています。これは LLM に事前に利用可能なツールを認識させるために必要な手法です。しかし、タスクの実行に不要なツールの定義まで渡されてしまうため、LLM のコンテキストが無駄に消費されてしまいます。 多くの場

すべての本が正確で信頼できることを主張しているわけではないことに注意してください。信頼性が高い情報が含まれる割合の高さという観点で本とインターネット情報を比較しています。本の中にも誤った情報や偏った情報が含まれることがあります。すべてを鵜呑みにせずに批判的思考を持って情報を評価することが重要です。 本を読む環境を整える この章で私が伝える内容は「スマホを捨てろ」以上です。スマホには多くの誘惑があります。SNS、メール、通知、ゲームなど、スマホは注意を引く要素が満載です。 特に SNS は短時間で多くの情報を消費するように設計されており、集中力を削ぐ最大の要因です。スワイプするたびに「良い情報が得られるかも」という期待感がドーパミンを分泌させます。これはガチャと同じ仕組みです。 スマホが手元にあるだけで、集中力が落ちてしまったという研究結果もあります。ですから読書をする際には、（いえ読書する

MCP Apps は MCP の拡張機能として、AI エージェントがインタラクティブな UI コンポーネントを返すための標準化された方法を提供します。この記事では MCP Apps の概要と実装方法について解説します。 ChatGPT の Apps SDK や MCP-UI のように AI エージェントがチャット形式の対話だけでなく、インタラクティブな UI を通じてユーザーとやり取りできる仕組みが注目されています。AI エージェントが UI を返すことで、会話の流れの中で以下のような体験を提供できます。 「おすすめのランニングシューズを探して」と尋ねると、複数のシューズの画像と価格が表示され、ユーザーは気に入ったものをクリックしてカートに追加できる ホテルの予約を依頼すると、利用可能な部屋のリストが表示され、ユーザーは日付や人数を選択して予約手続きを進められる 希望にあった賃貸物件を探す

Web アプリケーションにおけるルーティングは重要な要素です。URL Pattern API は URL のパターンマッチングを標準化するための Web API であり、ブラウザやサーバーサイド環境で一貫した方法で URL パターンを処理できます。この記事では、URLPattern API の基本的な使い方とパターン構文について解説します。 Web アプリケーションにおいてルーティングは重要な要素です。URL はアプリケーションの状態を表現し、ユーザーが特定のリソースにアクセスするための手段となります。id や slug のような一意な識別子を URL に含めることによる動的なコンテキストの提供は、一般的な手法として広く採用されています。 動的なルーティングを実現するために標準的な手法は存在していませんが、Express や Hono, Next.js のような多くの Web フレームワー

MCP の普及に伴い、多数のツール定義が LLM のコンテキストを圧迫する課題が浮上しています。本記事では Progressive disclosure（段階的開示）による最小限の情報提供、MCP を使ったコード実行によるツール呼び出しの効率化、単一の検索ツールによるコンテキスト削減など、実践的な解決策を Claude Skills や Cloudflare Code Mode の事例とともに解説します。 Model Context Protocol (MCP) は登場からおよそ 1 年が経過し、事実的な標準としての地位を確立しつつあります。MCP が普及するにつれて、MCP ツールの課題点も浮き彫りになってきました。その課題の 1 つが、1 つのタスクを達成するために多くのツールが読み込まれ、結果として多くのコンテキストが消費されてしまうという問題です。 前提として、LLM がタスクの達

Claude Code をはじめとする AI コーディングエージェントは、コマンドを実行するたびにユーザーの承認を求める仕組みが備わっていますが、これには開発サイクルの低下や承認疲れといった問題があります。Claude Code のサンドボックス機能は、ファイルシステムやネットワークへのアクセスを制限し、安全に動作させるための仕組みです。この記事では、Claude Code のサンドボックス機能の仕組みと利用方法について解説します。 Claude Code をはじめとする AI コーディングエージェントは、ファイルの作成・編集・削除やコードの検証を行うためにホストマシンのファイルシステムにアクセスしたり、任意の bash コマンドを実行できる強力な機能を備えています。しかしこれらの機能は誤用や悪用されるリスクも伴います。例えば、エージェントが誤って重要なシステムファイルを削除したり、悪意の