はじめに
開発中に「あのメソッドの引数なんだっけ」「この関数の戻り値は？」と思って公式ドキュメントを開くこと、よくありますよね。
正直なところ、言語やフレームワークごとにドキュメントサイトが違って、毎回検索し直すのが地味に面倒なんですよ。ReactのドキュメントからNode.jsのドキュメント、そしてTypeScriptのドキュメント...タブが増えていく一方。
そこで今回紹介するのがDevDocsというオープンソースのAPIドキュメントブラウザです。複数のドキュメントを一箇所に集約して、爆速で検索できるツールになっています。freeCodeCampが運営していて、信頼性も十分です。
DevDocsとは
DevDocsは、複数の開発者向けドキュメントを統合して検索できるWebアプリケーションです。ブラウザからアクセスするだけで使えて、インストール不要。しかもオフラインでも使えます。
公式サイト: https://devdocs.io GitHub: https://github.com/freeCodeCamp/devdocs
元々はThibaut Couroubleさんが作成したプロジェクトで、現在はfreeCodeCampが運営しています。
特徴・メリット
1. インスタント検索が爆速
これ、意外と重要なポイントなんですよ。
/ キーまたは Ctrl + K を押すだけで検索バーにフォーカス。入力すると即座に結果が表示されます。タイピングが終わる前に候補が出てくるレベル。
# 検索の流れ
1. `/` を押す
2. 検索ワードを入力
3. 即座に候補が表示（ページ遷移なし）
4. Enter で詳細表示
従来のドキュメントサイトだと、検索→結果ページ→クリック→表示、という流れがありますが、DevDocsはそのステップを大幅に省略しています。
2. オフライン対応
個人的にはこれが一番の推しポイントです。
ドキュメントをローカルにダウンロードしておけば、ネット環境がなくても使えます。飛行機の中でコーディングしたい時とか、カフェのWi-Fiが不安定な時とか、意外と助かる場面があるんですよね。
Service Workerを使ったキャッシュ機能で、一度読み込んだドキュメントは高速に表示されます。
3. キーボードナビゲーション
マウスを使わずにキーボードだけで操作できます。
/またはCtrl + K: 検索にフォーカス↑↓: 結果の移動Enter: 選択したドキュメントを開くEscape: 検索をクリア
30代になって思うのは、キーボードショートカットを覚えると作業効率が段違いということ。DevDocsはその恩恵を最大限受けられるツールです。
4. ダークテーマ対応
目に優しいダークテーマが用意されています。夜遅くまでコーディングする時とか、QOL上がりますね。設定から簡単に切り替えられます。
5. 対応ドキュメントが豊富
主要な言語・フレームワークのドキュメントがほぼ網羅されています。
- 言語: JavaScript, TypeScript, Python, Ruby, Go, Rust, PHP, など
- フレームワーク: React, Vue, Angular, Next.js, Express, Django, Rails, など
- ツール: Node.js, npm, Webpack, Docker, Git, など
- その他: HTML, CSS, HTTP, SQL, などなど
自分が使うドキュメントだけを選んで有効化できるので、検索結果がノイズだらけになることもありません。
インストール方法
Webで使う（推奨）
一番手軽なのは公式サイトにアクセスするだけ。
https://devdocs.io
アカウント登録も不要です。ブックマークしておけばOK。
ローカルで立ち上げる（Docker）
自分のサーバーやローカル環境で動かしたい場合はDockerが便利です。
docker run --name devdocs -d -p 9292:9292 ghcr.io/freecodecamp/devdocs:latest
これだけで http://localhost:9292 でアクセスできます。
ローカルで立ち上げる（手動）
Rubyの環境がある場合は、手動でセットアップすることも可能です。
# リポジトリをクローン
git clone https://github.com/freeCodeCamp/devdocs.git
cd devdocs
# 依存関係のインストール
bundle install
# ドキュメントのダウンロード（例: JavaScript）
thor docs:download javascript
# サーバー起動
rackup
Ruby 3.4.1、libcurl、JavaScriptランタイムが必要です。
基本的な使い方
1. 使いたいドキュメントを有効化
初回アクセス時、または設定画面から使いたいドキュメントを選択します。
- 左下の「Preferences」をクリック（または設定アイコン）
- 使用するドキュメントにチェックを入れる
- 「Save」で保存
コスパ的に、普段使うものだけ有効にしておくのがおすすめです。検索結果がスッキリします。
2. ドキュメントを検索
# 検索例
array map → Array.prototype.map() の説明
useState → React Hooks の useState
docker run → Docker の run コマンド
スペース区切りでAND検索になります。絞り込みも簡単。
3. オフライン用にダウンロード
- 「Offline Data」メニューを開く
- オフラインで使いたいドキュメントの「Install」をクリック
- ダウンロード完了後、ネット接続なしでも閲覧可能
実践的なユースケース
ケース1: フレームワーク乗り換え時の学習
新しいフレームワークを学ぶ時、DevDocsでサッと検索できると学習効率が上がります。React から Vue に乗り換える時とか、両方のドキュメントを有効にしておけば比較しながら学べます。
ケース2: コードレビュー中の確認
「このメソッドの挙動ってどうだっけ？」と思った時、ブラウザでDevDocsを開いておけば、タブを切り替えて即確認。コードレビューのスピードが上がります。
ケース3: オフライン環境での開発
出張中の新幹線とか、ネット環境が不安定な場所でも、事前にダウンロードしておけば困りません。時短になりますね。
ケース4: 新人教育
「このメソッドの使い方は DevDocs で調べてみて」と言えば、新人さんも自分で調べる習慣がつきます。ドキュメントへのアクセスを統一できるのも地味にありがたい。
技術スタック
興味がある方向けに、DevDocsの技術構成も紹介しておきます。
- バックエンド: Ruby（Sinatra）
- HTMLパース: Nokogiri
- フロントエンド: クライアントサイドJavaScript
- アセット管理: Sprockets
- ドキュメント取得: Rubyスクレーパー
オープンソースなので、コントリビュートも可能です。新しいドキュメントの追加とか、バグ修正とか、興味があれば参加してみてください。
まとめ
DevDocsは、複数のAPIドキュメントを一箇所で爆速検索できる開発者必携のツールです。
個人的には以下の点が特に気に入っています。
- インスタント検索で時間を節約
- オフライン対応で場所を選ばない
- キーボード操作で効率的
- 必要なドキュメントだけ選べる
- freeCodeCamp運営で信頼性あり
正直、一度使うと手放せなくなるタイプのツールですね。まだ使ったことない方は、とりあえずdevdocs.ioにアクセスして試してみてください。アカウント登録も不要で、すぐに使い始められます。
開発効率を上げたい方には一択ですね。