【ITニュース解説】Claude Code をブラウザから操作できるクライアントを自作したらめちゃくちゃ捗った

近年、AIを活用してプログラミング作業を効率化するツールが数多く登場している。その中でも、対話形式でコーディングを支援するAIアシスタントは多くの開発者にとって強力な味方となっている。今回紹介するのは、そのようなAIアシスタントの一つである「Claude Code」の利便性をさらに高めるために、ある開発者が自ら開発したクライアントツールに関する取り組みである。このツールは、既存のツールの課題を特定し、それを解決するために独自のアプリケーションを構築するという、システム開発における非常に実践的な事例と言える。

Claude Codeは、主にターミナル（コンピュータに直接命令を打ち込む黒い画面）上で動作するツールである。対話を通じてコードの生成や修正、デバッグの補助などを行えるため非常に便利だが、ターミナルベースであるがゆえのいくつかの課題も存在する。例えば、過去のAIとのやり取りを遡って確認したい場合、ターミナルの画面を延々とスクロールバックする必要があり、目的の箇所を見つけ出すのが困難なことがある。また、複数のプロジェクトで同時にClaude Codeを使用していると、それぞれの会話セッションの管理が煩雑になりがちである。さらに、一度終了したセッションを後から再開（Resume）するには、特定のIDを調べてコマンドを再入力する必要があり、わずかな手間がかかる。

これらの課題を解決するために開発されたのが、Webブラウザ上で動作する「claude-code-viewer」というクライアントツールである。このツールは、Claude Codeの会話ログをリアルタイムにブラウザで表示し、過去のセッションの閲覧や再開を簡単に行えるようにするものである。このツールの仕組みを理解することは、システムがどのように連携して動作するのかを学ぶ上で非常に良い教材となる。

このツール開発の出発点は、Claude Codeが会話の履歴をどのように保存しているかを調査したことにある。調査の結果、Claude CodeはユーザーとAIの対話内容を、コンピュータ内の特定のフォルダに「JSONL」という形式のログファイルとしてリアルタイムに書き出していることが判明した。JSONL（JSON Lines）とは、1行に1つのJSONデータが記録されるファイル形式のことである。JSONはプログラムが扱いやすいデータ形式であり、JSONLは新しいログが発生するたびにファイルの末尾に1行ずつ追記していくだけで済むため、ストリームデータやログの記録に適している。

開発者はこの仕組みに着目し、ログファイルを監視して内容をWebブラウザに表示するシステムを構築した。このシステムは、大きく分けて二つの要素から構成されている。一つは、ログファイルの変更を監視するサーバーサイドのプログラム。もう一つは、その情報を表示するためのフロントエンドのWebアプリケーションである。

サーバーサイドのプログラムは、プログラミング言語Goを使って実装された。このプログラムの役割は、前述のJSONL形式のログファイルが保存されているフォルダを常に監視し、ファイルに新しい行が追加されたり、新しいログファイルが作成されたりするのを検知することである。変更を検知すると、プログラムは即座に新しい行のデータを読み取り、プログラムが理解できる形に解析（パース）する。そして、その解析したデータをフロントエンドに送信する。

ここで重要になるのが、サーバーとフロントエンド間の通信方法である。このツールでは「WebSocket」という技術が採用された。通常のWebサイト閲覧で使われるHTTP通信は、ブラウザからの要求に応じてサーバーが応答を返すという一方向的なやり取りが基本である。しかしWebSocketは、一度接続を確立するとサーバーとブラウザの間で双方向の通信路を維持し続けることができる。これにより、サーバー側で発生したイベント（この場合はログファイルの更新）を、即座にブラウザ側にリアルタイムで通知することが可能になる。チャットアプリケーションのように、相手からのメッセージが自動的に表示されるのは、このWebSocketのような技術が使われているからである。

一方、フロントエンド、つまりユーザーが直接目にするWebブラウザ上の画面は、SvelteとTypeScriptという技術を用いて構築された。WebSocketを通じてサーバーから送られてくる会話ログのデータを受け取り、それを人間が見やすいように整形して画面に表示する役割を担う。これにより、ユーザーはターミナルの無機質な表示ではなく、見慣れたチャットアプリのようなインターフェースで、Claude Codeとの対話履歴を快適に閲覧できるようになった。過去のセッション一覧も表示され、クリック一つでその内容を確認したり、特定のセッションを再開するコマンドをサーバーに送信したりすることもできる。この「再開」機能も、ブラウザからの要求をサーバーが受け取り、サーバーが代わりにターミナルで実行されるべきコマンドを実行することで実現している。

このように、このツールは既存のツールの内部的な仕組み（ログファイルの出力）をうまく利用し、サーバーサイドとフロントエンドの技術、そして両者を繋ぐリアルタイム通信技術を組み合わせることで、開発者の体験を大幅に向上させることに成功した。日常的に感じる小さな不便さを見過ごさず、それを解決するためのツールを自ら作り出すというアプローチは、すべてのシステムエンジニアにとって重要なスキルであり、また、プログラミング学習の大きなモチベーションにもなるだろう。