名探偵の技術解析:巨大リポジトリ「mdn/content」を解析してWeb標準のプロになる
おっと、失礼。名探偵の助手くん、君もこの『mdn/content』という謎に包まれたリポジトリの正体が気になりますか?
世界中のエンジニアが毎日お世話になっている「MDN Web Docs」の心臓部。これをエンジニアが「読み物」としてではなく「ツール」として使いこなすとどうなるか……。私の推理を聞いていただけますか?
多くの人はブラウザで MDN を検索して読みますが、エンジニアはこのリポジトリを 「生データ(Markdown)」 として扱います。
オフラインで爆速検索
14,000ページ以上のドキュメントをローカルに落とせば、grepやエディタの検索機能で、ネット環境がなくても一瞬で仕様を探り当てられます。
ドキュメントの「型」を学べる
世界最高峰の技術ドキュメントがどう構成されているか、その「書き方」や「構造」を盗むことができます。
コントリビューション
「誤字を見つけた!」という時、ここがソースコードですから、あなたが直接世界中のエンジニアを救うヒーローになれるのです。
導入は非常にシンプルです。まずは、この巨大な知恵の結晶を手元に持ってきましょう。
git clone https://github.com/mdn/content.git
cd content
ドキュメントをレンダリング(表示)して確認したい場合は、彼らが提供している yari というビルダーを使います。
npm install
npm start
これで、あなたのPCの中に 「自分専用のMDN」 が立ち上がります。
「特定のAPIがどのページで解説されているか、一覧を作りたい」という依頼があったとしましょう。わざわざブラウザで1ページずつ開くのは素人のやり方です。名探偵なら、こうやって解決します。
Markdownファイルを走査して、フロントエンドの知識を抽出するスクリプトです。
const fs = require('fs');
const path = require('path');
const glob = require('glob'); // ファイル検索用ライブラリ
// JavaScriptの「演算子」に関するドキュメントだけを抽出
const files = glob.sync('files/en-us/web/javascript/reference/operators/**/*.md');
files.forEach(file => {
const content = fs.readFileSync(file, 'utf8');
const titleMatch = content.match(/title: (.*)/);
if (titleMatch) {
console.log(`発見した手がかり: ${titleMatch[1]}`);
// ここで内容をパースして、自作のチートシートを作ったりできるわけです
}
});
「mdn/content」は、ただ読むためのものではありません。
自社専用の技術Wikiの参考にする
LLM(AI)の学習用コンテキストとして食わせる(※規約の範囲内で!)
ドキュメントの修正をプルリクエストで送る
これらができるようになれば、君も立派な「Webの探偵」です。
「……さて、謎はすべて解けました。犯人は、『もっと良いドキュメントを作りたい』という、君自身の探究心だったようですね」