3.9K Views
July 26, 25
スライド概要
TechRAMEN2025登壇資料。
MCPとはなにか?
どうして学ぶべきなのか?
どのようなものなのか?という入門資料として作成しました。
発表20分予定なのに、手違いから45分の規模で作成しています
(主にフロントエンドを担当する開発者。現在、JX通信社のシニアエンジニアとして、札幌からフルリモートで活動しています。 個人開発ではバックエンドもやる。このアカウントはイラストや鳥や馬や犬や猫を気軽にRTしまくるので注意してください。
MCPサーバー開発は プログラミング入門にうってつけ! TechRAMEN 2025 Conference
予定 自己紹介 1章 MCPとは何か? 2章 なぜMCPを学ぶべきなのか? 3章 MCPの基礎 4章 MCPの活用 まとめ MCPサーバー開発はプログラミング入門にうってつけ! 2
自己紹介 HN 白雀 Twitter @azurdiary 株式会社JX通信社 シニアエンジニア 主にフロントエンドの領域を担当。最近は MCPとかエージェントとかも作る。 MCPサーバー開発はプログラミング入門にうってつけ! 3
自己紹介 生い立ち 北見生まれ。小学六年生の頃に札幌に引っ越し 現在は札幌からフルリモートで勤務 最近の趣味 スキー ドライブ MCPサーバー開発はプログラミング入門にうってつけ! 4
1章 MCPとは何か? 公式の説明によると? MCP is an open protocol that standardizes how applications provide context to LLMs. 引用元 https://modelcontextprotocol.io/introduction MCPサーバー開発はプログラミング入門にうってつけ! 5
意訳するなら MCPは、アプリケーションがLLMにコンテキストを提供する方法を標準化したオ ープンなプロトコルです USBのように、LLMとアプリケーションを接続するための標準規格です まだちょっとイメージがつかみにくい… MCPサーバー開発はプログラミング入門にうってつけ! 6
MCPを使うと エージェントを使ってラーメンを注文する事ができ る! 既存のシステムを使って、意外と簡単に? MCPサーバー開発はプログラミング入門にうってつけ! 7
エージェントってなに? LLMに専門知識を与え、方向性をもたせたもの LLM(人格)+ プロンプト(専門知識) ≒ エージェント MCPサーバー開発はプログラミング入門にうってつけ! 8
ユーザー エージェント ラーメン店MCPサーバー ラーメン店管理システム 醤油ラーメンの注文お願い ラーメン店MCPサーバーを使う必要があるな 店舗 注文(醤油,ユーザーの住所) 注文処理 醤油ラーメン一丁! 注文成功 注文成功 醤油ラーメンを注文しました 醤油ラーメンお届け ユーザー エージェント MCPサーバー開発はプログラミング入門にうってつけ! ラーメン店MCPサーバー ラーメン店管理システム 店舗 9
MCPの基本的な仕組みがわかったところで... でも、なぜMCPを学ぶ必要があるのでしょうか? MCPサーバー開発はプログラミング入門にうってつけ! 10
2章 なぜMCPを学ぶべきなのか? MCPサーバー開発はプログラミング入門にうってつけ! 11
なぜMCPが流行っているのか? LLM大手の一社であるAnthropicが提唱した オープンで簡潔なプロトコルが開発者のコミュニティに受け入れられた Anthropic以外の大手のLLMプロバイダーがサポートし、デファクトスタンダード となった。 MCPサーバー開発はプログラミング入門にうってつけ! 12
なぜ初学者にもおすすめできるのか? 開発環境構築が簡単で、効果が体感しやすい 公式からSDKが用意されており、実装が簡単 Python、TypeScript、Java、C#、Go 特にPythonは入門時に最初に学ぶ言語としてよく使われる SDKがない言語でも、OSSのフレームワークが開発されていたり、比較的簡単 に実装が可能 MCP対応のIDEを使うことで、その場で検証が可能 作ったMCPサーバーが自分の開発の役に立つ!(アイデア次第) MCPサーバー開発はプログラミング入門にうってつけ! 13
なぜMCPを学ぶべきなのか? 応用範囲の広さからくる需要の高さ 開発支援 プロダクトの活用 先ほど例にあげたように、既存製品にMCPを組み込める 社内ツールとしての活用 複雑なワークフローをLLMに任せる事ができる 専用の画面を減らす事ができる MCPサーバー開発はプログラミング入門にうってつけ! 14
内製開発の需要が高まりそう 野良MCPサーバーのリスク Prompt Injection Tool Poisoning Supply chain attack 悪意のあるサーバー etc... 公式から出ている信頼のおけるもの、あるいは内製のMCPに限った運用になるのでは ないか? MCPサーバー開発はプログラミング入門にうってつけ! 15
学ぶなら今がチャンス! MCPは発展途上の領域 シニアなエンジニアでも1年触っている人はいない MCPの提唱は2024年11月 MCPエンジニアという言葉はまだ存在しない エンジニア歴の長さの差をプロトコルへの理解度の高さで埋められるかも 適用範囲の広さ 開発の支援 ChatBotなどの顧客向け機能 プロダクト自体の対応 MCPサーバー開発はプログラミング入門にうってつけ! 16
それでは、MCPの技術的な仕組みを理解していきまし ょう 3章 MCPの基礎 MCPクライアントとMCPサーバー JSON-RPCとは 2つの接続方法 サーバーの提供する3種の機能 MCPサーバー開発はプログラミング入門にうってつけ! 17
MCPクライアントとMCPサーバー MCPクライアント MCPサーバーに接続し、機能を利用する側 対応ツール:Claude Code、Cursor、VSCode、Windsurf など 機能一覧を取得し、エージェントが利用可能にする MCPサーバー 実際の機能を提供する側 ツールやリソースを定義し、実行結果を返す → JSON-RPC 2.0で通信 MCPサーバー開発はプログラミング入門にうってつけ! 18
JSON-RPC 2.0
JSONでメソッドを呼び出す仕組み
Request
{"jsonrpc": "2.0", "method": "subtract", "params": [42, 23], "id": 1}
Response
{"jsonrpc": "2.0", "result": 19, "id": 1}
MCPではサーバーとクライアント間の通信にJSON-RPC 2.0を使用する
MCPサーバー開発はプログラミング入門にうってつけ!
19
クライアント LLM サーバー MCP MCP tools/list 一覧 tool 使えるtool一覧、プロンプト,) toolの使用要求(ツール名パラメーター) stream( tools/call( ツール名,パラメーター) レスポンス レスポンス LLM MCPサーバー開発はプログラミング入門にうってつけ! クライアント MCP サーバー MCP 20
2つの接続方法 stdio(標準入出力) ユーザーのPC内で動く ファイル操作ができる 開発が簡単 Streamable HTTP HTTP通信でリモートで動作する 認証にはOAuth2.1を使用する MCPサーバー開発はプログラミング入門にうってつけ! 21
提供可能な3種の機能 Resource URIでリソースを提供 Prompt 静的・動的に生成したプロンプト文自体を提供 Tool 与えられたパラメーターをもとにCRUD操作など Tool以外は対応していないMCPクライアントも多い MCPサーバー開発はプログラミング入門にうってつけ! 22
MCP開発入門、最初の第一歩 公式のSDKでMCPサーバー(stdio)から始めよう! MCPサーバー開発はプログラミング入門にうってつけ! 23
SDKを使用したツール定義の例
server.registerTool(
// ツール名
"add_number",
// ツールの説明・パラメーターなど
{
title: "足し算ツール",
description: "a + bを足して返します",
inputSchema: { a: z.number(), b: z.number() }
},
// ツールの実装
async ({ a, b }) => {
return {
content: [{ type: "text", text: String(a + b) }]
};
}
);
MCPサーバー開発はプログラミング入門にうってつけ!
24
最初にTryしてみる課題候補 現在時刻の取得 エージェントは現在の日付を知らない 四則演算 エージェントは正確な数値計算が苦手(推測しているだけ) ランダムな文字列の生成 エージェントはサイコロを振れない UUID生成 MCPサーバー開発はプログラミング入門にうってつけ! 25
プログラミング初学者に四則演算がおすすめ Step1(入門) 2値の四則演算 Step2(アルゴリズムの勉強) 逆ポーランド記法などを経由した、配列やスタック Step3(より実用性を高める工夫) ユニットテスト decimal等をつかったより正確な演算 プロンプト最適化 MCPサーバー開発はプログラミング入門にうってつけ! 26
慣れたら自主的に課題を探そう! 普段使っているツールをヒントにする 研究室で秘伝のタレと化しているツール 社内ツール 普段よく使うアプリケーション MCPサーバー開発はプログラミング入門にうってつけ! 27
CLIは比較的簡単にMCP化できる 起動時のオプションをパラメーターに対応させる 危険な処理、パラメーターをバリデーションしたり、カプセル化する セットアップを補助させる 実行時間が長い(分単位)ならジョブIDを割り振るなど 説明にこそ、MCPの価値があるのかも…? MCPサーバー開発はプログラミング入門にうってつけ! 28
GUIのMCP化 エージェントが画面の代わりになる時代? 内部で呼び出しているAPIをMCPでラップする WebであればPlaywrightなど利用した自動操作なども考える PlaywrightMCPを利用する前提で、ヒントのプロンプトを与える方法もあり グラフ等のグラフィカルなデータであれば、アウトプット方法も考える必要あり MCPサーバー開発はプログラミング入門にうってつけ! 29
ここで少し、実践的な話を 実際に自社プロダクトの一部をMCP対応してみた 理論だけでなく、実際の開発で何が起きるかをお話しします MCPサーバー開発はプログラミング入門にうってつけ! 30
自社プロダクトについて MCPサーバー開発はプログラミング入門にうってつけ! 31
多様化する用途 最初は報道向けのサービスとしてリリースされた 自治体、公的機関や多様な民間企業 用途が増えるほど、UIが複雑化していく MCPサーバー開発はプログラミング入門にうってつけ! 32
検索を代行してくれるエージェントを作れないだろう か UIの代わりにエージェントが条件を考える 新しい検索オプションが追加されても、MCPの説明文更新だけで済む 取得した情報をエージェントが更に精査をする 情報の本文を精査する、表現方法を個社カスタマイズするなどの用途 現在もAPI単独での提供サービスがあるため、それを利用してみよう! MCPサーバー開発はプログラミング入門にうってつけ! 33
STDIO版の試作は爆速で完成した 作業開始から接続できるまで1時間弱 プロンプトの調整は必要だったが、昨年や一昨年に比べると雑なプロンプトでも十分 に動く MCPサーバー開発はプログラミング入門にうってつけ! 34
MCPサーバー開発はプログラミング入門にうってつけ! 35
リモートMCPサーバーを作ろうとしたが… ServerSentEventバージョンの作成 認証・認可についての仕様が見当たらない? そもそも3/25の改訂でDeprecatedになっていた Streamable HTTP版はそもそも対応クライアントがなかった SDKも当時はまだ対応していない状態 MCPサーバー開発はプログラミング入門にうってつけ! 36
Streamable HTTP 現状の仕様 2025-06-18に更に仕様が改定された OAuth2.1認証フローが詳細に定義された Dynamic Client Registration Protocolが正式採用 Service Account方式が公式に認められている サーバー同士の認証では、事前にクライアント認証情報を設定して配布可能 動的登録が困難な環境では、Service Account方式が推奨される選択肢 MCPサーバー開発はプログラミング入門にうってつけ! 37
4章 MCPの活用 MCPをみんなに活用してもらうには? MCPサーバー開発はプログラミング入門にうってつけ! 38
開発者のみが使う想定であれば楽 nodeで作ったのならnpm 組織内であれば、.npmrcを設定してインストールなども可能 pythonで作ったのならuv プライベートなリポジトリでも基本は対応可能 MCPサーバー開発はプログラミング入門にうってつけ! 39
開発者以外も使う想定の場合 エージェントを活用できる環境が整っているか? MCPサーバー開発はプログラミング入門にうってつけ! 40
社内でCursor + MCPハンズオンを開催してみた 開発者以外の社員もエージェントに触れてほしかった 全員がCursorとMCPを入れるのに3時間かかった 補助なしでは非常に難しい ハンズオン後も定着には至っていないと思われる 体験自体はとても好評。開発者向けのソフトの導入がハードルの高さの要因だ と感じた MCPサーバー開発はプログラミング入門にうってつけ! 41
MCP対応エージェントを開発しよう! MCPを使うChatBotを作る Slack Discord Web MCPサーバー開発はプログラミング入門にうってつけ! 42
Slackからラーメンを注文 エージェント SlackBot ユーザー ラーメン店MCPサーバー ラーメン店APIサーバー 醤油ラーメンの注文お願い 要望「醤油ラーメンの注文お願い」 醤油" }) order({ soup: " 醤油" }) 受付完了 order({ soup: " 注文完了 「ラーメンを注文しました」 「ラーメンを注文しました」 SlackBot ユーザー MCPサーバー開発はプログラミング入門にうってつけ! エージェント ラーメン店MCPサーバー ラーメン店APIサーバー 43
Agent Development Kit(ADK) Googleが2025年4月頃から提供を始めた開発キット(Python Java) Mastra TypeScriptのエージェントフレームワーク MCPサーバー開発はプログラミング入門にうってつけ! 44
ADKのコード例 ramen_agent = Agent( name="ramen_order_agent", model="gemini-2.0-flash", description="ラーメン注文を受け付けるエージェント", instruction="お客様のラーメン注文を受け付け、店舗に送信してください", tools=[ MCPToolset( connection_params=StdioServerParameters( command="uv", args=["tool", "run", "mcp-server-ramen"], ) ), ], ) MCPサーバー開発はプログラミング入門にうってつけ! 45
Mastraのコード例
const agent = new Agent({
name: "ramen_order_agent",
description: "ラーメン注文を受け付けるエージェント",
instructions: "お客様のラーメン注文を受け付け、店舗に送信してください",
model: google("gemini-2.0-flash"),
tools: await mcpClient.getTools() // 省略したがpythonとほぼ同じ
});
MCPサーバー開発はプログラミング入門にうってつけ!
46
MastraとSlackをつなぐ場合のイメージ async function executeAgent(agent: Agent, say: SayFn, content: string) { // ユーザーの要望などをcontentにまとめ、エージェントに渡す const stream = await agent.stream( [{ role: "user", content }], ) for await (const chunk of stream.textStream) { // slackでの発言(本当にchunkごとに書くと細切れになる) await say({ text: chunk }) } } MCPサーバー開発はプログラミング入門にうってつけ! 47
MCPを活用したSlackBotの作成にチャレンジ 動作環境 CloudRun node22 LLM gemini2.5 pro 採用したフレームワーク Node Slack SDK Mastra FASTALERT顧客管理MCP MCPサーバー開発はプログラミング入門にうってつけ! 48
Slackを窓口にすることによるメリット 社員全員がSlackに習熟している 利用内容がチャットの履歴として残る 権限の管理にSlackのユーザー情報が使える エージェントにわたす前に機械的に判断 特定のグループに所属している、特定のチャンネル、etc MCPサーバー開発はプログラミング入門にうってつけ! 49
動作した! Sirosuzume: TechRamenというグループを作成してください Bot: 承知しました!FASTALERTでTechRamenという組織を作成しますね create_group ▼ ツール実行結果▼ ️ TechRamenという組織を作成しました! コンプライアンスの関係で動作画像はカット ※ UI・UXは既存のCursorやClaudeCode等に近いほうが良く感じられた MCPサーバー開発はプログラミング入門にうってつけ! 50
課題多し CursorやClaudeCodeのように、ユーザーがLLMの実行を中断でき る仕組みは欲しい 危険なツール実行の中断をプロンプト以外で保証したい MCPサーバー開発はプログラミング入門にうってつけ! 51
チャレンジ的目標 GUIの完全な置き換えは現実的ではない 作成・更新・削除等の操作の決断をユーザーに委ねる 作成・更新時は下書き状態を用意して、URLを提供する 削除時も、このデータを削除しますが良いですか?というURLを作成し、ユーザ ーに しかし、これで削減できる作業量は…? MCPサーバー開発はプログラミング入門にうってつけ! 52
AIと共生する時代 とりあえず全員MCP開発はやってみたほうがいい MCPサーバー開発はプログラミング入門にうってつけ! 53
MCPとエージェントを活用して競争力のアップ 高い専門性を持ったAI社員を作る ハイコンテキストすぎて自動化できなかった領域を切り崩す 人間は人間にしかできない仕事に費やす時間を増す MCPサーバー開発はプログラミング入門にうってつけ! 54
この発表の真の主張 MCPはプログラミングの入門に使えるよ! 新しい分野であるため、競うチャンスがあるよ! その先にエージェント開発、自動化の未来が存在している MCPサーバー開発はプログラミング入門にうってつけ! 55
ジュニアもベテランもこの沼に引きずり込みたい!! みんなMCPサーバー開発から始めてみよう! 楽しいよ! ご清聴ありがとうございました MCPサーバー開発はプログラミング入門にうってつけ! 56