非効率に終止符！DevDocsで爆速開発を手に入れろ（ドンのお墨付き）
おい、お前ら、よく聞け！
最近、お前らが仕事で「あれ、この関数の使い方なんだっけ？」「このAPI、どうやって叩くんだ？」なんて、いちいちブラウザ開いて検索してねぇか？ まったく、非効率極まりねぇな！
今日はな、お前らがもっとスマートに、もっと効率的に仕事を進めるための、とっておきの道具を教えてやる。それが、この「freeCodeCamp/devdocs」だ！
一言で言えばな、こいつは「APIドキュメントの総合デパート」だ。
普通、お前らが何か新しい技術を使おうと思ったら、その技術の公式サイトに行って、ドキュメントを探して、読んで、ってやるだろ？ それも悪くねぇが、色んな技術を渡り歩いてると、あっちこっちのサイトを行ったり来たりで、時間の無駄ってもんだ。
この DevDocs はな、JavaScript、Python、Ruby、HTML、CSS、Node.js、React、Vue.js、Angular... とにかく、お前らが使うであろうありとあらゆるプログラミング言語やフレームワーク、ライブラリのドキュメントを、全部まとめて、一つの場所で見れるようにしてくれんだ。
まるで、世界中の高級食材が全部揃ってる、最高の市場みたいなもんだな。必要なもんが、すぐそこにある。これ以上便利で効率的なもんはねぇだろ？
お前ら、ソフトウェアエンジニアとして稼いでるんだから、この道具がどれだけ価値があるか、ピンとくるはずだ。具体的にどんなメリットがあるか、教えてやる。
時間の節約、これに尽きる！
さっきも言ったが、複数のドキュメントサイトを行き来する手間がなくなる。一つの画面で全部完結するんだ。検索も一箇所で済む。これだけで、一日に何回も「あれ？これはどこのサイトだっけ？」ってなる時間を省ける。
オフラインでもドキュメントが見れる！
これがデカいんだ。一度ダウンロードしておけば、インターネットが繋がってない場所でもドキュメントが見放題だ。飛行機の中でも、電波の悪いカフェでも、いつでも学習やリファレンス確認ができる。まるで、お前のポケットに、図書館をぶち込んだようなもんだ。
高速な検索とインデックス化
DevDocsは、ドキュメントの内容を高速に検索できるんだ。キーワードを入力するだけで、瞬時に該当箇所が表示される。さらに、左側のサイドバーを見れば、その技術の全体像や主要な機能がすぐに把握できる。これは、いちいち公式サイトのインデックスを辿るよりも、はるかに効率的だ。
複数のドキュメントを並行して参照できる
例えば、JavaScriptのコードを書きながら、同時にReactのドキュメントも参照したい、なんてことあるだろ？ DevDocsなら、タブで簡単に切り替えられるし、なんなら複数のドキュメントを同時に開いて参照することもできる。これは、複雑なシステムを構築する時に、絶大な威力を発揮するぜ。
集中力の維持
ブラウザで検索すると、ついつい別のタブを開いたり、SNSを見たりしちまうだろ？ DevDocsはドキュメントの閲覧に特化してるから、余計な誘惑がない。これなら、お前らの集中力を途切れさせることなく、必要な情報に没頭できるってもんだ。
どうだ？ これで DevDocs が、お前らの日々の仕事の効率をどれだけブーストさせるか、わかったか？
さて、この最高の道具をどうやって手に入れるか、だが、これも至ってシンプルだ。
基本的には、ウェブブラウザからアクセスするのが一番手軽だ。
ウェブサイトにアクセスする
ブラウザを開いて、devdocs.io と入力してくれ。これだけでDevDocsのサイトに飛べる。
ドキュメントを選ぶ
サイトにアクセスしたら、左下の歯車アイコン（Settings）をクリックするんだ。
そこに、たくさんのドキュメントのリストが表示されるから、お前が必要なドキュメントにチェックを入れるんだ。例えば、「JavaScript」「HTML」「CSS」「React」とか、よく使うものを選んでダウンロードするんだ。
ダウンロードが終われば、すぐに使えるようになる。
もっと深く使いこなしたいお前には、こんな方法もある。
PWA（Progressive Web App）としてインストールする
多くのブラウザ（Chrome、Edgeなど）では、DevDocsを普通のアプリのようにインストールできる機能がある。ブラウザのアドレスバーの右端あたりに、インストールアイコンが表示されるはずだ。これをクリックすれば、デスクトップアプリのように使えるようになる。よりスムーズに起動できるし、アプリとしての独立感が増すぜ。
オフラインで利用する
これは先ほども言ったが、ダウンロードしたドキュメントはオフラインで利用できる。一度ダウンロードしておけば、インターネットがなくてもいつでも参照可能だ。
おいおい、勘違いすんなよ。DevDocsは「APIドキュメントブラウザ」だ。だから、お前が期待してるような「コード」はねぇ。DevDocs自体がコードを生成するわけじゃない。
DevDocsが提供するのは、お前が書くコードに必要な情報なんだ。
例えば、お前がJavaScriptで配列を操作したいとするだろ？ DevDocsを開いて、「Array」って検索してみろ。 そうすりゃ、「Array.prototype.map()」とか「Array.prototype.filter()」とか、いろんなメソッドの使い方がバッチリ書いてある。引数は何を渡すのか、戻り値は何になるのか、そしてちゃんと「サンプルコード」も載ってるぜ。
DevDocsでの検索例
DevDocsを開く（devdocs.io）
左上の検索バーに「Array.prototype.map」と入力する。
すると、JavaScriptのArrayオブジェクトの map メソッドに関するドキュメントが瞬時に表示される。
そこには、以下のような情報が書かれているはずだ。
構文（Syntax）
arr.map(callback(currentValue[, index[, array]])[, thisArg])
引数（Parameters）
各引数の説明
戻り値（Return value）
map メソッドが何を返すのか
説明（Description）
map メソッドの挙動についての詳細な説明
例（Examples）
実際のコード例
こんな感じだ。
// DevDocsに載っているような、Array.prototype.map() のサンプルコード（例）
const numbers = [1, 4, 9];
const roots = numbers.map(num => Math.sqrt(num));
console.log(roots); // [1, 2, 3]
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
];
const userNames = users.map(user => user.name);
console.log(userNames); // ['Alice', 'Bob', 'Charlie']
このサンプルコードは、お前がDevDocsで「Array.prototype.map」と検索したときに、そのドキュメントの中に載っているものだ。DevDocs自体がコードを生成するわけじゃないが、お前が効率的にコードを書くための、最高の情報源になるってことだ。
どうだ？ freeCodeCamp/devdocs、これがお前らの仕事にどれだけ役立つか、肌で感じ取れたか？
面倒な検索は DevDocs に任せて、お前らはもっとクリエイティブな仕事に集中しろ。 時間は金だ、そして DevDocs はその時間を生み出すんだ。
