0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

OpenAI・Anthropic互換APIを無料で使おう！「さくらのAI Engine」3,000リクエスト使い切りチャレンジ
@Erga-mion
in

MDN MCP serverの有無で違いは出るのか？VS CodeでMCPサーバを建てて比較してみた

0
Last updated at Posted at 2026-08-17

MDN MCP server とは？

HTML・CSS・JavaScript・Web APIなどのWeb技術に関するリファレンスサイトであるMDNから、MDN MCP serverが登場しました。

背景

近年は、AIコーディングアシスタントやIDE（VS Code、Cursor、Claude Codeなど）が開発現場で広く使われるようになりました。しかし、LLMは学習時点までの知識しか持たないため、

  • 新しく追加されたWeb API
  • 最新のCSS仕様
  • ブラウザごとの対応状況

などについて、古い情報や誤った情報を回答してしまうことがあります。例えば、「このCSS機能はChromeで使えるか」「Firefoxではいつから対応したか」といった情報は頻繁に更新されるため、学習済みの知識だけでは正確に答えられない場合があります。

概要

MDN MCP serverは、MCP（Model Context Protocol）を利用して、AIツールやIDEからMDNの最新ドキュメントやブラウザ互換性データ（Browser Compatibility Data）へ直接アクセスできるようにする仕組みです。AIは必要に応じてMDNへ問い合わせるため、学習データだけに依存せず、常に最新のWebプラットフォーム情報を参照して回答できます。

これにより、AIによる古い情報に基づくコード提案やブラウザ互換性の誤回答を減らし、より正確なWeb開発支援を実現することが期待されます。

主な機能

  • 最新のMDNドキュメント検索
    • HTML、CSS、JavaScript、Web APIなどの最新リファレンスを取得できます
  • ブラウザ互換性情報の取得
    • Chrome、Firefox、Safari、Edgeなどで機能が利用可能かを最新情報に基づいて確認できます
  • AIエージェント・IDEとの連携
    • VS Code、Cursor、Claude Code、Codex CLIなどのMCP対応ツールから利用できます
  • 開発効率の向上
    • ブラウザでMDNを検索し直すことなく、AIとの対話だけで最新情報を取得できます

MDN MCP server × VS Code

今回は私がエディタとして使っているVS Codeで、MDN MCP serverを活用してJavaScriptを使ったWebアプリケーションを作ってみます。

注意点

  • 許容利用ポリシーに同意する必要があります
  • MCPサーバが受信したクエリに関するデータは保存されます。このデータは、ユーザーを特定する情報とは一切関連付けられませんが、LLMに開示した個人情報がこれらのクエリに含まれる可能性はゼロではないので、他人に知られてはいけない情報を送信しないよう注意してください
  • ファーストパーティ分析をオプトアウトするには、MCPへのリクエストにX-Moz-1st-Party-Data-Opt-Out: 1ヘッダーを添付する必要があります

導入

  1. VS Codeで、コマンドパレット (Ctrl+Shift+P または ⌘⇧P) を開く
  2. MCP: Add Server を実行
    スクリーンショット 2026-07-20 14.56.50.png
  3. サーバーの指定方法はHTTPを選択
    スクリーンショット 2026-07-20 14.59.00.png
  4. サーバのURLにhttps://mcp.mdn.mozilla.net/を入力
    スクリーンショット 2026-07-20 14.59.19.png
  5. 任意のサーバIDを入力
    スクリーンショット 2026-07-20 14.59.47.png
  6. （任意）mcp.jsonで、ヘッダーX-Moz-1st-Party-Data-Opt-Out: 1を添付して、分析をオプトアウトする
    • mcp.jsonは、コマンドパレットからMCP: Open User Configurationを実行して開くことができます
mcp.json
{
	"servers": {
		"mdn": {
			"url": "https://mcp.mdn.mozilla.net/",
			"type": "http",
            "headers": {
                "X-Moz-1st-Party-Data-Opt-Out": 1
            }
		}
	},
	"inputs": []
}

MCPサーバの起動・停止

導入後、設定ファイルが保存され、自動的にサーバーを起動して利用可能なツールを読み込まれます。

設定ファイルを更新後、サーバが停止してしまうので、"mdn"の上に表示されるStartボタンをクリックして、サーバを起動してください。

停止したい場合は、コマンドパレットからMCP: List Serversを実行し、追加したMCPサーバを選択し、Stop Serverを実行してください。

または、Copilot Chatの上部の歯車マーク(Open Customizations)をクリックし、MCP Servers > 追加したMCPサーバを右クリック > Start Server/Stop Server からでも起動・停止できます。

スクリーンショット 2026-08-14 11.36.37.png
スクリーンショット 2026-08-14 11.38.03.png

MCPサーバの有効・無効化

MCPサーバの起動後、Copilot Chatの、Open Customizations > MCP Servers > 追加したMCPサーバを右クリック > Enable/Disable から有効・無効化することができます。

MCPサーバをツールとして指定

Copilot Chatの、チャット画面下部のモデル名の隣のアイコン(Configure Tools)をクリックすると、画面上部にチャットで使用するツールを選択するダイアログが表示されます。

スクリーンショット 2026-08-12 15.52.52.png

追加したMCPサーバにチェックを入れることで、MCPサーバを使うようになります。使いたくない場合はチェックを外してください。
スクリーンショット 2026-08-12 15.53.11.png

最後に、プロンプトの入力時に、Chat入力欄で#を入力して、追加したMCPサーバを選択します。選択しなくても自動的にツールを使用する場合もありますが、そうならない場合は選択するようにしてみてください。

スクリーンショット 2026-08-12 16.36.40.png

Copilot Chat の左下の「+」から、Tools > 追加したMCPサーバを選択することでも可能です。
スクリーンショット 2026-08-12 16.38.09.png

有無で比較

使用するモデル

gpt-oss-120b

さくらのAI Engineのモデルで利用できるgpt-oss-120bを使用します。学習したデータの最終日(cutoff date)が2024年1月1日と比較的古いため選択しました。

その他の利用できるコーディング向けモデルで古いものの中で、cutoff date が分かったものは以下の通りでした。

GPT-5.6 Terra

GitHub Copilot Pro で利用可能になるモデルのうち、gpt-oss-120bと同じくOpenAI社がリリースしているGPT-5.6の「日常業務向けのバランス型モデル」であるTerraを、高性能AIの一例として選択しました。知識量や性能が比較的高いことから、MCPサーバの利用の有無で結果に差が生まれにくいと考えられます。

メソッドに関する質問

ES2026で発表された新機能Map.getOrInsertについて質問して答えてもらいます。

ES2026で実装された機能については、以下の記事を参考にさせていただきました。

以下のプロンプトを投げて質問します。

JavaScriptの`Map.getOrInsert`メソッドの機能について日本語で説明してください。

gpt-oss-120b

MCPを無効にして質問します。ハルシネーションを起こさず、独自実装・サードパーティのライブラリで提供されることがあることを紹介してくれました。

MCPサーバ無効の回答

Map.getOrInsert は、標準の JavaScript Map オブジェクトには存在しないメソッドです。
しかし、「キーがすでにマップに存在すればその値を取得し、存在しなければ指定したデフォルト値を挿入してから取得する」 という操作は、しばしば「get‑or‑insert」(取得または挿入) と呼ばれ、独自に実装したり、サードパーティのユーティリティライブラリが提供したりすることがあります。

典型的な動作イメージ

事前状態 呼び出し 結果 事後状態
map にキー k が 存在 map.getOrInsert(k, defaultValue) 既存の値 v を返す 変更なし
map にキー k が 未存在 map.getOrInsert(k, defaultValue) defaultValue を返す k → defaultValue が map に追加される

手動で実装する例

// Map に getOrInsert を追加する（プロトタイプ拡張例）
Map.prototype.getOrInsert = function (key, defaultValue) {
  if (this.has(key)) {
    // すでにキーがある場合はそのまま取得
    return this.get(key);
  } else {
    // キーが無ければデフォルト値を設定して返す
    this.set(key, defaultValue);
    return defaultValue;
  }
};

// 使用例
const m = new Map();
m.set('a', 1);

console.log(m.getOrInsert('a', 100)); // → 1（既存の値）
console.log(m.getOrInsert('b', 200)); // → 200（新規に挿入された値）
console.log([...m]); // → [ ['a', 1], ['b', 200] ]

ライブラリでの提供例

  • lodash や immutable.js など、一部のユーティリティライブラリは同様の機能を持つメソッド（例: getOrElse, setDefault）を提供しています。
  • TypeScript の型安全を重視した拡張として、Map<K, V> に対してジェネリックな getOrInsert を実装することもあります。

まとめ

  • 標準 API には Map.getOrInsert は無い が、上記のように自前で実装すれば「取得または挿入」の便利な操作が可能になる。
  • 既存のライブラリを利用すれば、同等の機能を追加のコードなしで使えることが多い。

このように、Map.getOrInsert は「キーが無ければデフォルト値を入れて取得、あればそのまま取得」するユーティリティ的なメソッドとして利用されます。

続いて、MCPサーバを有効にして同じ質問をします。MCPサーバがMDNドキュメントを検索し、最新の情報を引っ張ってきました。

スクリーンショット 2026-08-12 16.43.23.png

MCPサーバ有効の回答 Ran Search Completed with input: { "query": "Map.getOrInsert" }

Ran Get browser compatibility data
Completed with input: {
"key": "javascript.builtins.Map.getOrInsert"
}

Map.prototype.getOrInsert の概要（日本語）

Map.getOrInsert(key, defaultValue) は、Map インスタンスに対して次のように動作します。

動作 説明
キーが既に存在する場合 そのキーに対応する現在の値を返します。
キーが存在しない場合 defaultValue を新しいエントリとして key に追加し、その defaultValue を返します。

主な特徴

  • 1 回の呼び出しで取得または挿入が完了
    従来は if (!map.has(key)) { map.set(key, defaultValue); } と書く必要がありましたが、getOrInsert で 1 行にまとめられます。
  • 戻り値は必ず値
    キーが存在しなかった場合でも、挿入した defaultValue が返るため、undefined が返るケースを意識せずに済みます（ただし defaultValue が undefined の場合は例外です）。
  • 副作用がある
    キーが無いときは Map が変更されます。読み取りだけを意図する場合は has + get を使う方が安全です。

シグネチャ

map.getOrInsert(key: K, defaultValue: V): V
  • key : 取得または挿入したいキー（任意の型 K）。
  • defaultValue : キーが無いときに挿入する値（型 V）。

使用例

const cache = new Map();

// まだキーが無いので defaultValue が挿入され、返される
let value = cache.getOrInsert('user:1', { name: 'Alice' });
console.log(value); // { name: 'Alice' }

// 既にキーがあるので、既存のオブジェクトが返る
value = cache.getOrInsert('user:1', { name: 'Bob' });
console.log(value); // { name: 'Alice' }  ← 挿入は行われない

ブラウザ・ランタイムの対応状況

環境 対応バージョン
Chrome 145 以降
Edge 145 以降
Firefox 144 以降
Safari (macOS/iOS) 26.2 以降
Node.js 26.0.0 以降
Deno 2.6.7 以降
Bun 1.2.20 以降
その他（IE, Samsung Internet 等） 未対応

※上記は MDN のブラウザ互換情報（javascript.builtins.Map.getOrInsert）に基づくものです。

参考リンク

このメソッドは、マップから値を取得しつつ、存在しなければデフォルト値で自動的に登録したいケースで便利です。特にキャッシュやレジストリ的な用途でコードを簡潔に保ちたいときに活用できます。

GPT-5.6 Terra

MCPサーバの有無に関わらず、標準メソッドMap.prototype.getOrInsertについて説明をしています。

比較すると、

  • MCP無効→ APIそのものの仕様・エッジケースを丁寧に説明している
  • MCP有効→ 仕様の正確性は維持しつつ、「従来コードから何が改善されるか」「Computedをいつ選ぶべきか」という実践的な情報が増えている

と、MCPサーバによって正確性が上がったというより、説明の実用性と背景情報が増えたと言えるでしょう。

MCPサーバ無効の回答

Map.prototype.getOrInsert(key, defaultValue) は、指定したキーの値を取得し、キーが存在しない場合だけ既定値を Map に挿入して返すメソッドです。

const counts = new Map();

counts.getOrInsert("apple", 0); // 0（"apple" => 0 を追加）
counts.getOrInsert("apple", 99); // 0（既存値を返す。99 には置き換えない）

counts.get("apple"); // 0

map.get(key) ?? defaultValue と異なり、既定値を返すだけでなく、実際に Map へ保存する点が重要です。また、値が undefined でもキーが存在する限り既存値として扱われます。

const map = new Map([["x", undefined]]);

map.getOrInsert("x", 10); // undefined
map.has("x");             // true

用途は、初回アクセス時の初期化です。

const groups = new Map();

for (const user of users) {
  groups.getOrInsert(user.team, []).push(user);
}

ただし、この例のような可変の既定値を毎回式として生成したくない場合や、既定値をキーに応じて作りたい場合は、Map.prototype.getOrInsertComputed(key, callback) が適しています。

groups.getOrInsertComputed(user.team, () => []).push(user);

getOrInsertComputed のコールバックは、キーが未登録の場合だけ実行されます。getOrInsert は新しめの標準 API なので、対象のブラウザや Node.js が対応しているか確認してください。

MCPサーバ有効の回答

Map.prototype.getOrInsert(key, defaultValue) は、指定したキーに値があればその値を返し、なければ defaultValue を Map に登録して返すメソッドです。

const counts = new Map();

counts.getOrInsert("apple", 0); // 0 を登録して返す
counts.set("apple", counts.getOrInsert("apple", 0) + 1);

console.log(counts.get("apple")); // 1

従来は次のように has / get / set を組み合わせる必要がありました。

if (!counts.has("apple")) {
  counts.set("apple", 0);
}
const value = counts.get("apple");

getOrInsert ではこれを一度に表せます。なお、キーが存在し、その値が undefined であっても、その既存値を返します。存在確認は値ではなくキーの有無で行われる点が重要です。

また、初期値をその場で生成したい場合は、コールバックを受け取る getOrInsertComputed(key, callback) が適しています。getOrInsert の defaultValue は呼び出す前に評価されるため、作成コストが高い初期値にはこちらが向きます。

const groups = new Map();

const users = groups.getOrInsertComputed("admin", () => []);
users.push("Ada");

比較的新しい API のため、実行環境によっては未対応の場合があります。利用前に対象ブラウザや Node.js の対応状況を確認してください。

実装

Agentモードで、ES2026やES2025で追加されたメソッドを使うことで簡潔に実装できる機能を実装してもらいます。条件を変えてから同じWorkspaceで連続して実装してもらうと、前に実装したものを参照して影響を与えることがあるため、Workspaceを変えて実装を行います。

入力した文字列またはファイルをバイト列として扱い、

- Base64へ変換
- Base64から復元
- Hexへ変換
- Hexから復元

できるWebツールを実装する。

変換処理が同期・非同期かどうか意識せずに、同じエラー処理を行えるようにする。

期待と実際の比較

以下の表のメソッドを使って実装することを期待していました。

メソッド 機能
ES2026 Uint8Array Base64/Hex バイナリ・Base64を相互変換
ES2025 Promise.try() 関数の同期・非同期に関わらずPromiseで結果を返す

しかし、上記の比較的新しいメソッドは使用されませんでした。MDNドキュメントを検索した上で、よく使用される実装手法を用いたと考えられます。

期待したメソッド 実際に使用されたメソッド
Uint8Array Base64/Hex atob(),btoa()
Promise.try() try/catch, Promise.resolve().then(...).catch(...)

gpt-oss-120bでは、MCP有効時にHTMLとJavaScript、CSSの分離と、READMEの追加が行われ、構造化が行われました。

GPT-5.6 Terraでは、MCP有効時に見た目やUXに力が入った一方、MCP無効時にはNode.js前提の実装が行われ、JavaScriptのテストコードが追加されたり、ロジックが分離されたりしました。MCP有効時には、最低限の道具で実装をしてくれたような気がしました。

まとめ

今回は、MDN MCP server の概要や使用する際の注意点を踏まえ、VS Codeの拡張機能であるGitHub Copilot Chatで、実際にMDN MCP serverを使ってきました。

学習データが古かったり、性能が比較的低いモデルに対しては、知識の補完を行い、性能や可読性、保守性の向上が期待できます。

一方、最新の高性能なモデルに対しては、元から知識やよく使用される実装手法を学習していたり、Web検索機能があったりするためか、今回のような機能の質問や、1からの実装では恩恵を感じにくかったです。

モデルが既に熟知する時はそっと横に置き、知識・性能の壁を超える時には頼もしい道具となる、MCPサーバは辞書のようなものだと感じました。

参照

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?