Share
Embed
Slide 1
Slide 1 text
DenoとJSRで実現する
最速MCPサーバー開発記
2025-06-18 toranoana.deno #21
大山奥人 / yamanoku
Slide 2
Slide 2 text
● 株式会社Schoo
○ 技術戦略部門ユニット
● PodCast
○ お元気ですか.fm
● @yamanoku
○ X
○ GitHub
○ BlueSky
大山奥人 - yamanoku
おおやま おくと
Slide 3
Slide 3 text
個人でも会社でも
生成AIを使うことは
当たり前になってきた
Slide 4
Slide 4 text
世はまさに
生成AI戦国時代
Slide 5
Slide 5 text
突然ですが、質問です
Slide 6
Slide 6 text
皆さんの推し
生成AIサービスは
何ですか？
Slide 7
Slide 7 text
私の推しは …
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Claudeの個人的推しポイント
● LLMモデル（Claude Sonnet / Opus）
● Claude Code
● Claude Code GitHub Actions
● Web、DesktopやClaude CodeでのMCP連携
💰個人で6月からMAX $200 Planにて課金しています💰
Slide 10
Slide 10 text
MCP
( Model Context Protocol )
Slide 11
Slide 11 text
引用元: What is Model Context Protocol (MCP)? How it simplifies AI integrations compared
to APIs | AI Agents That Work
Slide 12
Slide 12 text
いくつかMCPを試してみた
● Figma Context MCPを試してみて感動
○ Figma APIと疎通したやり取りでUIを構築
○ 1人日はかかりそうなUI実装が30分足らずで完成
● Playwright MCPでブラウザ操作して感動
○ テストケースをAI側が生成してくれる
○ 自然言語でブラウザが操作できる！
○ 新たな支援技術のようなもの？（アクセシビリティ観点）
Slide 13
Slide 13 text
これは、楽しい！
Slide 14
Slide 14 text
いくつかの言語でMCPのSDKが扱える
※スクリーンショットは2025年6月時点のもの
Slide 15
Slide 15 text
自分も
MCPサーバー
作ってみよう！
Slide 16
Slide 16 text
mizchiさんの記事ほかでDenoでMCPサーバー作ってみた話を見かける
Slide 17
Slide 17 text
Denoで
MCPサーバーを
作ってみる
Slide 18
Slide 18 text
Denoの開発体験が最高
● TypeScriptファースト
○ 現在のNode.jsもオプションなしでTS実行できるが
○ tsconfig.jsonの設定がたいへん…🥲
● Linterやtestなど機構が標準搭載
● npm packageとも互換がある
サクッと作ってみるには自分にとって最適だった！
Slide 19
Slide 19 text
Denoの特徴とMCPサーバーでの利点
● サンドボックス実行・パーミッション制御ができる
○ 疎通・通信するときに確認が入る
○ 実行前の確認はセキュリティ観点で有効
○ 場合によっては --deny-net で外界と遮断することもできる
○ 学習データ汚染を減らせる期待がある
ちなみにNode.jsでもv24からパーミッション機能が安定版でリリース
https://nodejs.org/api/permissions.html
Slide 20
Slide 20 text
npmとDenoでのMCPサーバー起動の違い
Slide 21
Slide 21 text
Denoで作った
MCPサーバーの紹介
Slide 22
Slide 22 text
Baseline
MCP Server
特定のHTML、CSS、JavaScript、Web
APIに関するBaselineの情報を教えてく
れるMCPサーバー
AIエージェントが情報を参照してWidely
なものを選んだり、一部制限があるもの
を使わないようにする
https://github.com/yamanoku/baseline-mcp-server
Slide 23
Slide 23 text
Connpass User
MCP Server
Connpassのユーザー情報ほか
参加イベント・発表イベントや
所属するグループ情報を取得する
MCPサーバー
※Connpass APIキーが必要
https://github.com/yamanoku/connpass-user-mcp-server
Slide 24
Slide 24 text
ALT Decision Tree
MCP Server
画像の代替テキスト（ALT属性）をALT決
定木に基づいて自動生成するMCPサー
バー
画像とそれにまつわる文脈をLLMに
渡すことで、より適切な
代替テキストを提示してくれる
https://github.com/yamanoku/alt-decision-tree-mcp-server
Slide 25
Slide 25 text
作ったMCPサーバーを
使ってもらいたい！
Slide 26
Slide 26 text
Deno packageの
配布先といえば …
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
JSRへのアップロード体験が最高！
npm publishとの比較として…（個人的感想）
● CLI操作＋ブラウザ操作でサクサクとpublish
● publishするまでの前準備がそこまでかからない
● npmパッケージとしても配布できる
○ npm i jsr:@organization/some-mcp-server
Slide 29
Slide 29 text
JSR Scoreを埋めていくのが楽しい
Slide 30
Slide 30 text
Deno Land Inc. への
個人的要望
Slide 31
Slide 31 text
Deno Deployで
リモートMCPサーバーを
ホスティングしたい！
Slide 32
Slide 32 text
リモートMCPサーバーのホスティング候補
● Cloudflare
● Vercel
● Azure Container Apps
（他もご存じの方がいたら教えてください）
この中にDeno Deployも入れてほしい！
Slide 33
Slide 33 text
まとめ
● MCPサーバーをDenoで作ってみた
● Node.js環境で作るよりも簡単に作れるのが良い
● パーミッションの制約でよりセキュアで高品質なMCPサーバーへ
● JSRの体験が良すぎる。ありがとうございます
● Deno DeployでリモートMCPサーバー建てたい！お願いします！
みんなもDenoでMCPサーバー作ってみよう！
Slide 34
Slide 34 text
Thank you for listening !
2025-06-18 toranoana.deno #21
大山奥人 / yamanoku