使って学ぼう MCP (と GitHub Codespaces)

「【福岡開催】MCP入門＋実践！LINE APIで作るAI連携ハンズオン」での発表資料です
https://linedevelopercommunity.connpass.com/event/381513/

Transcript

1. 使って学ぼう MCP (と GitHub Codespaces) 2026/02/19 MCP入門＋実践！LINE APIで作る AI連携ハンズオン Yuta Matsumura © 2026 Yuta Matsumura. #fukuoka_mcp 1
2. 松村 優大 (MLBお兄さん) © 2026 Yuta Matsumura. #fukuoka_mcp 株式会社オルターブース (Chief Technical Architect) Microsoft MVP for Developer Technologies Microsoft Top Partner Engineer Award 2025 GitHub 公認トレーナー C#, PHP, Azure, GitHub #fukuten #devblogradio #phpconfuk https://linktr.ee/tsubakimoto 2
3. MCP (Model Context Protocol) をテーマにした勉強会です。 MCP に興味ある方や使っている方、MCP はまだわからないけど AI を使った開発に興味ある方などなど、ご参加ください。 https://fukuoka-mcp.connpass.com/ © 2026 Yuta Matsumura. #fukuoka_mcp 3
4. MCP とは？ © 2026 Yuta Matsumura. #fukuoka_mcp 4
5. Model Context Protocol (MCP) • AI アシスタントツールが外部のシステムやサービスと通信するための技術 • GitHub Copilot, Claude, ChatGPT, Cursor などで利用可能 © 2026 Yuta Matsumura. #fukuoka_mcp 5 https://modelcontextprotocol.io/docs/getting-started/intro
6. 構成 © 2026 Yuta Matsumura. #fukuoka_mcp 6 MCP クライアント サーバー … IDE、エディタ、アプリケーション、etc … ローカル、リモート 標準入出力(stdio) or Streamable HTTP
7. ツール • MCP サーバーはツールを提供する • 例 (VS Code)：search/*, edit/*, execute/*, etc • MCP クライアントは LLM を通じて、MCP サーバーのツールを実行する © 2026 Yuta Matsumura. #fukuoka_mcp 7
8. MCP の利点 • LLM に無い知識を補完できる • 例：ドキュメント検索を提供する MCP サーバー • LLM 自体の性能向上、Web 検索の仕組みなども活用しよう • LLM を通じて外部のシステムやサービスを操作することができる • 「Web API を使う場面」と似ているイメージ • 注意：不用意なデータの更新権限を与えないこと © 2026 Yuta Matsumura. #fukuoka_mcp 8
9. MCP SDK • https://modelcontextprotocol.io/docs/develop/build-server • TS, Python, Go, Kotlin, Swift, Java, C#, Ruby, Rust, PHP • SDK を使って MCP クライアントや MCP サーバーを作れる © 2026 Yuta Matsumura. #fukuoka_mcp 9
10. コーディングアシスタントで MCP を使う © 2026 Yuta Matsumura. #fukuoka_mcp 10
11. コーディングアシスタントの MCP サポート • 様々なコーディングアシスタントが MCP をサポートしています • GitHub Copilot • Cursor • Claude Code • など © 2026 Yuta Matsumura. #fukuoka_mcp 11 https://modelcontextprotocol.info/docs/clients/
12. コーディングアシスタントの MCP サポート • 様々なコーディングアシスタントが MCP をサポートしています • GitHub Copilot • Cursor • Claude Code • など © 2026 Yuta Matsumura. #fukuoka_mcp 12 https://modelcontextprotocol.info/docs/clients/ ┬ Agent … 自律的なコーディング ├ Ask … Copilot との Q&A ├ Edit … 複数ファイルをまたぐ変更 └ Plan … 実行計画の生成
13. Copilot で MCP を使う • MCP サーバーのインストール • 拡張機能 or mcp.json © 2026 Yuta Matsumura. #fukuoka_mcp 13 ▼MCPサーバー { " servers " : { " github - mcp" : { " type " : " http " , " url " : " https://... " }
14. MCP レジストリ (github.com/mcp) © 2026 Yuta Matsumura. #fukuoka_mcp 14 https://github.com/mcp
15. MCP ツールの選択 © 2026 Yuta Matsumura. #fukuoka_mcp 15
16. MCP サーバーの作り方 © 2026 Yuta Matsumura. #fukuoka_mcp 16
17. MCP サーバーの作り方 1. MCP SDK をインストールする 2. MCP サーバーの構成を設定する 3. ツールを定義する → ここで外部のシステムやサービスと連携した処理を実装 ※必要に応じてセキュリティを構成しましょう © 2026 Yuta Matsumura. #fukuoka_mcp 17 https://modelcontextprotocol.io/docs/develop/build-server
18. MCP クライアントの作り方 1. MCP SDK をインストールする 2. MCP サーバーへの通信を構成する 3. ツールを呼び出す 4. ツールの結果からユーザーへの応答を作る © 2026 Yuta Matsumura. #fukuoka_mcp 18 https://modelcontextprotocol.io/docs/develop/build-client
19. LINE ボットでの MCP 活用 © 2026 Yuta Matsumura. #fukuoka_mcp 19
20. 従来の LINE ボット © 2026 Yuta Matsumura. #fukuoka_mcp 20 LINE ボットサーバー 外部サービス Messaging API Web API LINE ボットサーバー (MCP Client) 外部サービス (MCP Server) Messaging API ツール呼び出し MCP をアプリケーションに組み込む
21. コンテナーを使った開発環境 Dev Containers & GitHub Codespaces © 2026 Yuta Matsumura. #fukuoka_mcp 21
22. こんな経験ありませんか？ © 2026 Yuta Matsumura. #fukuoka_mcp 22 これ作ったので 動かしてみて 動かない・・・
23. こんな経験ありませんか？ 開発環境 • Windows • Node.js 18 • VS Code • 手動インストール • … 開発環境 • macOS • Node.js 24 • IDE • homebrew • … 開発環境の作り方が バラバラ © 2026 Yuta Matsumura. #fukuoka_mcp 23
24. 開発環境の揃え方 • 同じ PC の支給 • 環境構築のマニュアル化 • セットアップスクリプトの配布 • 共通の仮想イメージの配布 • 共通のコンテナーイメージの配布 © 2026 Yuta Matsumura. #fukuoka_mcp 24
25. Dev Containers • 開発環境を「リモート」にもつ仕組み [Windows Subsystem for Linux] or [Containers] ▼ • 開発環境としてコンテナーを準備する (Dev Containers) • https://code.visualstudio.com/docs/devcontainers/containers • Visual Studio Code + 拡張機能パック • Docker © 2026 Yuta Matsumura. #fukuoka_mcp 25
26. devcontainer.json • コンテナーの構成ファイル • コンテナーイメージ、拡張機能、ポートフォワード等が設定可能 • リポジトリにコミットして共有可能 © 2026 Yuta Matsumura. #fukuoka_mcp 26 { " name" : " Sample " , " image " : " mcr.microsoft.com/ devcontainers /... " , " features " : { ... }, " forwardPorts " : [ ... ], " postCreateCommand " : " ... " , " customizations " : { ... }, " remoteUser " : " ... " }
27. GitHub Codespaces © 2026 Yuta Matsumura. #fukuoka_mcp 27
28. GitHub Codespaces © 2026 Yuta Matsumura. #fukuoka_mcp GitHub 上にホストされる仮想マシンを使用して、 オンライン上に開発環境を構築することができる。 devcontainer.json をリポジトリに保管している場合、 devcontainer.json の構成がセットアップされる。 28
29. GitHub Codespaces のコスト 個人アカウントには一定の無料枠があります © 2026 Yuta Matsumura. #fukuoka_mcp 29 プラン ストレージ コンピューティング時間 GitHub Free 15 GB/月 120 時間/月 GitHub Pro 20 GB/月 180 時間/月
30. GitHub Codespaces の起動 GitHub リポジトリから 仮想環境を直接起動できる。 同じリポジトリから複数人が 起動しても、個別の仮想環境が 利用できる。 © 2026 Yuta Matsumura. #fukuoka_mcp 30
31. ご清聴ありがとうございました © 2026 Yuta Matsumura. #fukuoka_mcp 31