Claude Code のステータスラインを TUI でカスタマイズできる ccstatusline
Claude Code のステータスラインは oh-my-zsh のターミナルプロンプトのようにカスタマイズ可能です。これにより現在のブランチやトークンの使用量などを一目で確認できるようになります。この記事では TUI で簡単にステータスラインをカスタマイズできる ccstatusline の使い方を紹介します。 Claude Code の下部に表示されるステータスラインは自分好みにカスタマイズできます。これは oh-my-zsh のターミナルプロンプト（PS1）をカスタマイズするのと似ています。ステータスラインをカスタマイズすれば以下のように現在のブランチやコンテキストの使用量などを一目で確認できるようになります。 ステータスラインをカスタマイズする方法は以下の 2 つが用意されています。 /statusline コマンド: Claude Code 自身にステータスラインの設定を支援して
Claude Code のツール検索ツールを有効にして MCP のトークン使用量を削減する
Claude Code のツール検索ツールを有効にすることで、MCP ツールの定義を事前にコンテキストウィンドウに読み込まず、必要に応じて動的にツールを検索・呼び出しできます。これにより、多数の MCP ツールをインストールしている場合でもトークン使用量を大幅に削減できる可能性があります。この記事では Claude Code のツール検索ツールの概要と使用方法を紹介します。 Claude のツール検索ツール は Claude がすべてのツール定義を事前にコンテキストウィンドウに読み込むのではなく、必要に応じてツールを検索・呼び出すことができる機能です。これにより、不必要なツール定義がコンテキストウィンドウに含まれてコンテキストを圧迫する問題を回避できます。 2025 年 12 月現在、環境変数 ENABLE_TOOL_SEARCH=true を有効にすることで実験的に Claude Cod
2025 年に読んでよかった本
AI を活用するための技術というのはとりわけ新しいものではなく、過去の知見を基盤として構築されていることが多いです。それゆえに、AI 時代だからこそ基礎的な知識を体系的に学ぶことができる書籍に学ぶことに価値を求めるのです。この記事では 2025 年に読んで特に印象に残った本をいくつか紹介します。 2025 年はとりわけ AI 関連の書籍が多く出版された年であったように感じました。しかし AI を活用するための技術というのはとりわけ新しいものではなく、過去の知見を基盤として構築されていることが多いです。コーディングの分野でも AI によるコード生成を魔法として捉えるのではなく、自分のプログラマーとしての能力を増幅させるためのツールとして捉え、ツールを熟達し磨き上げより良いものにすることが重要なのです。このことはまさに 達人プログラマー に書かれている内容と通じるものがあります。AI 時代だか
MCP サーバーの Streamable HTTP transport を試してみる
MCP では stdio と Streamable HTTP の 2 つの transport が定義されています。TypeScript SDK では v1.10.0 から Streamable HTTP transport がリリースされました。この記事では MCP サーバーを構築し、Streamable HTTP transport を試してみます。 MCP（Model Context Protocol）では JSON-RPC を使用してメッセージをエンコードしています。クライアントとサーバー間のトランスポート方式として以下の 2 つが定義されています。 stdio: 標準入出力を介した通信（主にローカル実行向け） Streamable HTTP: HTTP ストリーミングを介した通信（リモートサーバー向け） 現在（2025 年 4 月時点）では、多くの MCP クライアントとサーバー
Claude Code の LSP サポート
Claude Code のバージョン 2.0.74 から LSP（Language Server Protocol）サポートが追加されました。LSP サポートにより、Claude Code はコードベースに対してシンボルの定義検索、参照検索、ホバー情報の取得などの操作が可能になります。この記事では Claude Code の LSP サポートの概要と使用方法を紹介します。 コーディングエージェントが LSP（Language Server Protocol）を扱えるようになることで、エージェントがより効率的にタスクを遂行できるようになります。文字列でコードベース全体を検索するのではなく、LSP を通じてコードの構造やシンボル情報にアクセスできるため、正確な情報を迅速に取得・編集できるためトークンと時間を大きく節約できます。このことはコーディングエージェントにセマンティックなコード検索・編集
ブラウザから要素を選択してエージェントにコンテキストを提供する React Grab を試してみた
React Grab はブラウザ上で要素を選択し、その要素に対応するコードコンテキストをコーディングエージェントに提供するライブラリです。この記事では React Grab のセットアップ方法と使用方法を紹介します。 コーディングエージェントに期待したコードを生成してもらうためには、適切なコンテキストを提供することが重要です。しかし Web フロントエンドの分野ではコーディングエージェントの出力結果を元に修正を依頼する、という一般的なワークフローが困難な場合があります。 例えば実装したコードに対してテストを実行するのであれば、コーディングエージェントはターミナルの出力結果を元に修正できます。しかし UI の見た目や動作に関するフィードバックを提供する場合、コーディングエージェントはブラウザ上で実際に動作している UI を直接確認できません。 そのため、UI のスクリーンショットや DOM
TypeScript 向けの AI フレームワーク TanStack AI を試してみた
TanStack AI は TanStack チームが開発する TypeScript 向けの軽量な AI フレームワークです。LLM プロバイダーのインターフェイスを抽象化し、ツール呼び出しやチャット機能を提供します。この記事では TanStack AI の概要と基本的な使い方を紹介します。 AI エージェントの開発をする上で LLM の API 呼び出しを抽象化してくれるフレームワークは欠かせないものと言えるでしょう。OpenAI や Anthropic などの主要な LLM プロバイダーはそれぞれ公式 SDK を提供していますが、それぞれ異なるインターフェイスを提供しているため複数の LLM モデルを切り替えながら開発する場合には煩雑さが増してしまいます。 この差異を吸収してくれるフレームワークとして TypeScript なら AI SDK、Python なら LangChain が
Claude Code のプランモードがより正確な計画を立てられるようになっていた
Claude Code のプランモードはリリース当初から定期的に改善が加えられており、より正確な計画を立てられるようになっています。この記事では最近の改善点について紹介します。 Claude Code v2.0.51 のリリースノートでは「Plan Mode now builds more precise plans and executes more thoroughly（プランモードがより正確な計画を立て、より徹底的に実行するようになりました）」と記載されています。リリースノートでは 1 行だけの説明で具体的な改善内容がわからないのですが、実際に Claude Code のプランモードは定期的に新しい機能が追加されており、プランモードが生まれた当初と比べて大きく進化していることがわかります。 プランモードの改善点は主に以下の 3 つです。 プランの計画に専用のサブエージェントを使用する
Claude のツール検索ツールを試してみた
MCP では多くのツール定義が LLM のコンテキストを圧迫する問題があります。Claude のツール検索ツールを使用すると、必要に応じて関連するツールのみを LLM に提供でき、コンテキスト圧迫を軽減できます。この記事では Claude の TypeScript クライアントを使用して、ツール検索ツールを実際に使用した例を紹介します。 Model Context Protocol (MCP) の問題点の 1 つとしてツールの定義が LLM のコンテキストを圧迫することが挙げられます。ほとんどの MCP クライアントはツールの定義を LLM のシステムプロンプトにすべて渡す設計となっています。これは LLM に事前に利用可能なツールを認識させるために必要な手法です。しかし、タスクの実行に不要なツールの定義まで渡されてしまうため、LLM のコンテキストが無駄に消費されてしまいます。 多くの場
Claude Code のサンドボックス機能を試してみた
Claude Code をはじめとする AI コーディングエージェントは、コマンドを実行するたびにユーザーの承認を求める仕組みが備わっていますが、これには開発サイクルの低下や承認疲れといった問題があります。Claude Code のサンドボックス機能は、ファイルシステムやネットワークへのアクセスを制限し、安全に動作させるための仕組みです。この記事では、Claude Code のサンドボックス機能の仕組みと利用方法について解説します。 Claude Code をはじめとする AI コーディングエージェントは、ファイルの作成・編集・削除やコードの検証を行うためにホストマシンのファイルシステムにアクセスしたり、任意の bash コマンドを実行できる強力な機能を備えています。しかしこれらの機能は誤用や悪用されるリスクも伴います。例えば、エージェントが誤って重要なシステムファイルを削除したり、悪意の
Claude Skills でエージェントに専門的なタスクを実行させる
Claude Skills は Claude が特定のタスクを実行するためのカスタムスキルを作成・共有できる新しい機能です。この記事では、Claude Skills の仕組みと作成方法、MCP ツールとの違いについて解説します。 Claude ではスプレッドシートやスライドを作成するためにスキルと呼ばれる機能を利用します。例えば「以下のマークダウンを元にスライドを作成してください」という指示を与えると、pptx スキル・html2pptx.md ファイルを読み込みスライドの作成方法を確認したうえで、アーティファクトとして pptx ファイルを生成します。 このスキルではスライドの元になる HTML ファイルを作成し、PptxGenJS ライブラリを使用して pptx ファイルを生成する JavaScript コードをサンドボックス内で実行している様子が確認できます。 2025/10/17
Remix v3 を実際に動かして試してみた
2025 年 10 月に発表された Remix v3 は React から独立し、Web 標準技術を活用した新しいフレームワークへと進化しました。この記事では、Remix v3 のセットアップ手順と新機能を実際に動かして試してみた内容を紹介します。 2025 年 10 月 10 日に行われた Remix Jam 2025 にて、Remix v3 が発表されました。Remix v3 は React から離れ、独自のフレームワークとして再設計されるという大きな変更が行われています。Remix v3 で新しいアーキテクチャが導入された理由について、以下の 3 つが挙げられています。 従来のフロントエンドエコシステムの複雑性の解消 Web 標準への回帰とシンプルなモデルの追求 AI エージェント時代への対応 この記事では、Remix v3 の新機能と変更点を実際に動かして試してみた内容を紹介します
Playwright Agents によるテストの自動生成を試してみた
Playwright Agents のセットアップ Playwright Agents は Playwright v1.56 以降で利用可能です。以下のコマンドで Playwright のエージェントの定義を追加します。--loop オプションは使用している AI エージェントの種類に応じて変更してください。 npx playwright init-agents --loop=claude コマンドを実行すると以下のファイルが生成されます。 .claude/agents/playwright-test-generator.md: Claude Code の SubAgents として Playwright Generator エージェントを定義 .claude/agents/playwright-test-healer.md .claude/agents/playwright-test-p
Claude Code の設定をプラグインで共有する
Claude Code は強力なコーディング支援ツールですが、効果的に活用するためには適切な設定が必要です。プラグインを使用することで、スラッシュコマンド、サブエージェント、MCP サーバー、フックなどの設定をパッケージ化し、他のユーザーと簡単に共有できます。この記事では、Claude Code のプラグインの作成方法と利用方法について解説します。 Claude Code を使用してコーディングを行う上では、以下の設定を活用することでより効果的に作業を進めることが期待できます。 スラッシュコマンド: よく使う操作をスラッシュコマンドとして登録し、素早くアクセスできるようにする サブエージェント: 特定のタスクに特化したサブエージェントを作成し、複雑なタスクを分割して処理する MCP サーバー: 外部ツールと連携するための MCP サーバーを設定し、Claude Code の機能を拡張する
MCP のツールアノテーションでユーザーにヒントを提供する
{ "scripts": { "build": "tsc && chmod 755 build/index.js" } } プロジェクトのルートに tsconfig.json を作成します。 { "compilerOptions": { "target": "ES2022", "module": "Node16", "moduleResolution": "Node16", "outDir": "./build", "rootDir": "./src", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "include": ["src/**/*"], "exclude": ["node_modules"] } src/inde
Chrome DevTools MCP で AI エージェントのフロントエンド開発をサポートする
自律的な AI エージェントを利用したコーディングでは、生成したコードを実行した結果からフィードバックを得て、コードを改善していく反復的なプロセスが重要です。しかし、フロントエンド開発では、生成したコードはブラウザ上で実行されるため、AI エージェントが直接コードを実行したり、ブラウザのコンソールログを取得したりすることは困難です。Chrome DevTools MCP はこの課題を解決するためのツールです。 自律的な AI エージェントを利用したコーディングでは、生成したコードを実行した結果からフィードバックを得て、コードを改善していく反復的なプロセスが重要です。バックエンドや CLI ツールの開発では、生成したコードはターミナル上で実行されログが表示されるため、AI エージェントはコードの実行結果を容易に取得できます。しかし、フロントエンド開発では、生成したコードはブラウザ上で実行され
GitHub Actions で YAML アンカーを使う
GitHub Actions のワークフローで YAML アンカーがサポートされました。YAML アンカーを使用すると、ワークフロー内でコードの重複を避け、共通の設定を再利用できます YAML アンカーは、YAML ドキュメント内で特定のノードに &anchor_name を使用して名前を付け、そのノードを *anchor_name を使用して参照することで機能します。例えば以下に例では、on.push セクションをアンカーとして定義し、on.pull_request セクションで再利用しています。 on: push: branches: &branch_list - main pull_request: branches: *branch_list
AI エージェントのための Agent Payments Protocol (AP2) を試してみた
現状の決済システムでは人間が信頼できる画面上で直接購入ボタンをクリックすることを前提としており、自立型の AI エージェントがユーザーに代わって決済することは想定されていません。そこで Google により Agent Payments Protocol (AP2) と呼ばれる新しいプロトコルが提案されました。プラットフォーム間でエージェント主導の決済を安全に開始・処理することを可能にします。この記事では AP2 のサンプルコードを実際に試してみた手順を紹介します。 今日ではユーザーの操作を代行する AI エージェントが普及しつつあります。ユーザーが旅行の計画を立てる際には、AI エージェントがウェブサイトを検索し宿泊施設やフライトの手段を提案したり、カレンダーから空き時間を確認してスケジュールを調整するといった操作を委任できます。とはいえすべての操作を AI エージェントに任せるわけには
自然言語で CI/CD パイプラインを定義する Agentic Workflows
Agentic Workflows は 2025 年 9 月現在研究目的のデモンストレーションとして提供されており、大幅に機能が変更される可能性があります。本番環境での使用は推奨されません。また自己責任で使用してください。 Agentic Workflows は自然言語で CI/CD パイプラインを定義できるツールとして GitHub Next が開発しています。Agentic Workflows は「あらゆるプラットフォームにおけるあらゆるソフトウェアコラボレーションをサポートする自動化された AI」を指す「継続的 AI（Continuous AI）」を実現します。継続的 AI はドキュメントの作成・コードの改善・Issue のトリアージといった自動化可能で繰り返し行われるタスクを支援することを目指しています。GitHub はこの継続的 AI を研究している段階であり、Agentic W
仕様駆動開発を支える Spec Kit を試してみた
仕様駆動開発（Specification-Driven Development, SDD）は、AI コーディングエージェントを活用した新しいソフトウェア開発スタイルです。GitHub が提供する Spec Kit は、仕様駆動開発を支援するためのツールキットであり、AI との対話を通じて正確な受け入れ基準の定義とコード生成を支援します。この記事では Spec Kit を使用して仕様駆動開発を試してみます。 Kiro と呼ばれる AI IDE の登場は、仕様駆動開発と呼ばれる AI コーディングエージェントを活用した新しい開発スタイルの可能性を示しました。仕様駆動開発とは、まず AI と対話しながら要件定義・システム設計を行い、その後作成した設計書をもとに AI にコード生成を行わせる開発スタイルです。 ユーザーの要求をまず明確な仕様として定義することで、ユーザーが頭の中で思い浮かべていた要
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
