たった数行のコマンドでOK!Claude CodeでWebサービスと会話するプログラムを動かしてみよう

Claude Code

たった数行のコマンドでOK!Claude CodeでWebサービスと会話するプログラムを動かしてみよう

【これを読むと何ができるようになる?】

この記事を読むと、Claude Codeを使って、あなたのパソコン上で動く特別なプログラム(サーバー)と対話できるようになります。これにより、毎回Webサイトを開かなくても、プログラムにお願いするだけで情報を取ってきたり、文章を作ってもらったりする、自分だけの便利な道具を作る第一歩が踏み出せます。

準備するもの

始める前に、以下のものがパソコンにインストールされているか確認してください。

  • Claude Code(AnthropicのCLIツール)
  • Node.js と npm(プログラムを動かすための実行環境と、その部品を管理するツールです)
  • Git(プログラムの設計図をダウンロードするためのツールです)

「Node.js」「npm」という単語が出てきて「何語?何OS?」と混乱してしまう方は非常に多いです。ご安心ください。これらは「プログラムを書くための道具一式」と考えていただいて大丈夫です。

  • Node.js: プログラムを実際に動かす「エンジン」のようなものです。
  • npm: 「Node Package Manager」の略で、これはインターネット上の世界にある、様々な「便利な部品(ライブラリ)」をダウンロードして、必要な時に使えるように管理してくれる「巨大な部品倉庫の管理人」のようなものです。
    まずは、各公式サイトからダウンロードし、インストーラーに従って進めてみてください。

手順(ステップごとに丁寧に)

1. 専用の作業場所(フォルダ)を用意する

まず、パソコンに文字で命令を出すための画面「ターミナル」を開きましょう。(Macの場合は「ターミナル」、Windowsの場合は「コマンドプロンプト」や「PowerShell」という名前のアプリを探して起動してください)

【🔰最初のターミナルを開くためのコツ】
「ターミナル」という名前自体が難しそうですが、基本的には「文字の指示を出すための黒いメモ帳」のようなものです。もしどのアプリを起動すればいいかわからなければ、まずは検索バーで「コマンドプロンプト」と入力して起動するだけで試してみるのが一番早いです。

【⚠️重要な注意点】
ターミナルは、実行するコマンドを一つでも間違えると、パソコンのシステムに一時的な影響を与える可能性があります。しかし、これから行う作業はあくまで「フォルダの作成」と「ダウンロード」に留まりますので、壊れる心配はありませんので、リラックスして試してみてくださいね。

ターミナルが開いたら、以下のコマンドを一行ずつ入力して、Enterキーを押してください。これは、これから作るプログラムのファイルをまとめておくための、専用のお道具箱(フォルダ)を作って、その中に入るための命令です。

mkdir claude-mcp-server-testcd claude-mcp-server-test

画面には特に大きな変化はありませんが、命令を受け付けてカーソルが次の行に移れば成功です。

【✅成功の目印】
「成功」したかどうかを確認する一番簡単な方法は、プロンプト(通常は $> のようなマーク)の後に、カーソルが点滅している状態が続いていることです。もしエラーメッセージが赤文字で表示されたり、何も起こらずにカーソルが消えた場合は、そのコマンドが正しく実行されていない可能性があります。

2. プログラムの設計図をダウンロードする

次に、今回動かしてみるサーバープログラムの設計図を、インターネット上からあなたのパソコンに丸ごとコピーしてきます。以下のコマンドを実行してください。

git clone https://github.com/e-arveldaja/mcp-server.git

なぜこれをするのかというと、一からプログラムを書くのは大変なので、すでに公開されているお手本を借りてきて、それを動かす練習をするためです。「done.」といった文字が表示されればダウンロード完了です。

【💡gitコマンドとは?】
gitというツールは、世界中のプログラマーたちが共同で作品(ソースコード)を管理するための「巨大な共同作業プラットフォーム」のようなものです。git cloneは、そのプラットフォームにある「公開されている完成品の最新版」を、あなたのローカル環境にそっくりコピーしてくる作業だとイメージしてください。

3. ダウンロードしたフォルダに移動する

ダウンロードした設計図が入っているフォルダに移動します。今いる場所から、さらに深い階層に移動するイメージです。

cd mcp-server

これも画面に大きな変化はありませんが、プロンプト(文字を入力する場所の左側にある表示)の文字が少し変わっていれば成功です。

4. プログラムを動かすための部品を集める

プログラムは、たくさんの小さな部品が組み合わさって動いています。以下のコマンドで、このプログラムに必要な部品を自動で集めてきてもらいましょう。

npm install

【❓npm installが途中で止まった場合の対応】
もし「Dependencies cannot be found」や「Missing package」といった警告(Warning)が出た場合は、ひとまず気にせず次のステップに進めることが多いですが、もし赤いエラーメッセージで止まってしまった場合は、一度ターミナルを閉じて、「このフォルダ(mcp-server)に入った状態」から、再度 npm install を実行してみてください

なぜこれをするのかというと、設計図だけあっても部品がなければ動かせないからです。この命令一つで、必要なものをすべて揃えてくれるので非常に便利です。「added … packages」のような文字が表示されれば、部品集めは成功です。

5. サーバープログラムを起動する

いよいよサーバーを起動します。サーバーとは、私たちの命令を待ち受けてくれるプログラムのことです。以下のコマンドで起動してみましょう。

npm start

「MCP server listening on port 3000」というメッセージが表示されれば成功です!これで、あなたのパソコンの中で、Claude Codeからの命令を待っているサーバーが動き始めました。このターミナル画面は、サーバーが動き続けているので、このまま開いておいてください。

6. Claude Codeからサーバーに話しかける

新しいターミナル画面をもう一つ開いてください。(元の画面は閉じないでください!)
新しいターミナルで、いよいよClaude Codeを使って、先ほど起動したサーバーに話しかけてみます。以下のコマンドを実行してください。

claude-code --mcp-url http://localhost:3000 --prompt "Write a short poem about Estonia"

このコマンドは、「Claude Codeさん、私のパソコン(localhost)で待機している3000番窓口のサーバーに、『エストニアについての短い詩を書いて』というお願いを伝えてください」という意味です。しばらく待って、英語でエストニアに関する詩が表示されたら、大成功です!

【🧐専門用語解説:localhostとは?】
localhostという単語は、「今、このパソコン自身」を指す特殊なインターネット上の住所のようなものです。外部のウェブサイト(例:Google.com)にアクセスするのではなく、「自分自身のPCの、特定の場所(窓口)」に話しかけている、と覚えておくとバッチリです。

うまくいかないときは

  • 「command not found: git」や「command not found: npm」と表示される場合:
    パソコンにGitやNode.jsが正しくインストールされていない可能性があります。それぞれの公式サイトからダウンロードして、もう一度インストールしてみてください。
  • `npm start` でエラーが出る場合:
    手順4の部品集め(`npm install`)がうまくいかなかった可能性があります。一度Ctrlキー(Macではcontrolキー)を押しながらCキーを押してプログラムを停止し、再度 `npm install` を実行してから `npm start` を試してみてください。
  • Claude Codeのコマンドでエラーが出る場合:
    URLが間違っているかもしれません。「`http://localhost:3000`」が正しく入力されているか、また、サーバーを起動したターミナルでエラーが出ていないかを確認してみてください。

もっと活用するには

基本の手順に慣れてきたら、ダウンロードしたプログラムの中身を少し書き換えてみるのも面白いでしょう。「`src/index.ts`」というファイルを開いて、プログラムが返すメッセージを日本語にしてみるなど、自分だけのサーバーに改造してみてください。プログラミングの第一歩として、きっと楽しい経験になりますよ。

本日のミッション完了チェックリスト(自己診断シート)

この記事で行った一連の作業は、一つ一つのステップが積み重なって成り立っています。もし途中で止まってしまっても、どこまで成功したかをこのリストで確認してみましょう!

✅ ステップ 1:準備運動(環境構築)

  • Node.jsとnpmが正しくインストールされていることを確認しましたか?(コマンド実行時にエラーが出ないか確認するのが理想です)
  • ターミナル(またはコマンドプロンプト)を、常に「安全な作業場所」と認識できていますか?

✅ ステップ 2:作業場所の準備(ディレクトリ操作)

  • mkdir で新しいフォルダを作成しましたか?(例:mkdir my-ai-project
  • cd コマンドを使って、作成したフォルダの中に正しく移動できましたか?(ターミナルのプロンプトの先頭が、目的のフォルダ名になっているか確認!)

✅ ステップ 3:素材のダウンロード(ライブラリ導入)

  • git clone [URL] を実行し、お手本コードを無事にダウンロードできましたか?(大量のファイルがダウンロードされるイメージでOKです!)
  • npm install を実行し、プログラムが必要とする「部品(ライブラリ)」を全て揃える作業を完了できましたか?

✅ ステップ 4:サーバーの起動と連携(実行)

  • npm start でサーバーを起動し、待機信号(例:listening on port 3000)を確認できましたか?
  • 最後に、Claude Codeから http://localhost:3000/api/ のような正確な住所を叩くことができましたか?

「✅にチェックマークをつけられた項目が多いほど、マスターへの一歩が近づいています!」と感じてみてください。一つ思い出せない項目があっても、それは「復習が必要な点」というだけで、失敗ではありません。落ち着いて、もう一度最初から手順を追ってみましょう。

※Claude Codeは継続的にアップデートされます。最新情報は公式ドキュメントをご確認ください。

情報源:@AIDailyGems のポストをもとに編集部が解説記事として構成しました。

コメント

タイトルとURLをコピーしました