MDN web docs100本ノック~WEB開発のプロへの道~

## この記事を書いた理由

MDN web docsを普及させることで、プログラミングの学習環境は飛躍的に良くなると思うからです。
私自身、もっと早くMDNの存在を知りたかったと心の底から思います。

MDNは世界で最高品質のドキュメントであり、教材です。
完全無料なので、必要なのは本人の意欲とPC一台のみ。

これらの一部に手をつけておくだけでも、相当実力がつきます。是非一度サイトを開いてみてください。


## [Web 入門](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web)
まずはここから。WEB開発の体系的な知識が最短で習得できます。
HTML・CSS、そして JavaScriptの基本をしっかりと理解できるだけでなく、ファイルの扱い方やWEBサイトの公開方法まで丁寧に解説してくれているのが素晴らしい。「プログラミング以前の知識じゃん」と侮るなかれ、実は多くの初学者ここでつまずきがちです。基本ですが重要ですし、ここの理解がおざなりだとエンジニアとして一歩も前へ進めません。
また、エンジニアの方でも知らない知識も実は多いんじゃないかなと。アクセシビリティとか。
まず一度通して読んで、二週目で手を動かすのがおすすめ。コードを書くのは大前提ですが、知識をテキストでまとめながらでも良いかも。
 
[基本的なソフトウェアのインストール](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software)
[Web サイトをどんな外見にするか](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
[ファイルの扱い](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
[HTML の基本](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics)
[CSS の基本](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/CSS_basics)
[JavaScript の基本](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
[Web サイトの公開](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website)
[https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works)


## [HTML の学習: ガイドとチュートリアル](https://developer.mozilla.org/ja/docs/Learn/HTML)
[HTML 概論](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML)
[マルチメディアと埋め込み](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding)
[HTML 表](https://developer.mozilla.org/docs/Learn/HTML/Tables)
[HTMLフォーム](https://developer.mozilla.org/docs/Learn/HTML/Forms)
[共通の問題解決に HTML を使う](https://developer.mozilla.org/docs/Learn/HTML/Howto


## [JavaScript](https://developer.mozilla.org/ja/docs/Learn/JavaScript)
一番重要度が高いです。とにかくJSを頑張って欲しいです。JSは何でも出来るし、一番アウトプットとの距離が近いです。実は機械学習との相性も悪くないです。むしろアプリの中での実運用という観点なら最も優れた選択肢の一つです。

### [JavaScript の第一歩](https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps)
[JavaScript とは](https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript)
[JavaScriptへの最初のダイブ](https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash)
[何が間違っている? JavaScript のトラブルシューティング](https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong)
[必要な情報を保存する — 変数](https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables)
[JavaScript での数学入門 — 数値と演算子について](https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math)
[テキストを扱う — JavaScript での文字列](https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings)
[便利な文字列メソッド](https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods)
[配列](https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays)
[評価: バカ話ジェネレーター](https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator)

### [JavaScript の構成要素](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks)
[コード内で決定を下す — 条件](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/conditionals)
[ループコード](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Looping_code)
[関数 — 再利用可なコードブロック](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Functions)
[独自の関数を構築する
](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function)
[関数の戻り値](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Return_values)
cf.[デフォルト引数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters)
[アロー関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
[イベントのイントロダクション](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events)

[イメージギャラリー](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery)

### [JavaScript オブジェクト入門](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects)
[オブジェクトの基本
](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics)
[初心者のためのオブジェクト指向 JavaScript
](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS)
[オブジェクトプロトタイプ](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Object_prototypes)
[JavaScript の継承](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Inheritance)
[JSON データの操作](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/JSON)
[オブジェクト構築の実践](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Object_building_practice)
[バウンスボールのデモへの機能の追加
](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features)

### [クライアントサイド Web API](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs)
[Web API の紹介](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction)
[文章の操作](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
[サーバからのデータ取得](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
[サードパーティ API](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs)
[絵を描く
](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics)
[動画と音声の API](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs)
[クライアント側でのデータ保存](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage)
[JavaScriptのコードのよくある問題を解決する](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Howto)

中級者向け
### [JavaScript 「再」入門](https://developer.mozilla.org/ja/docs/Web/JavaScript/A_re-introduction_to_JavaScript)

### [JavaScript のデータ構造](https://developer.mozilla.org/ja/docs/Web/JavaScript/Data_structures)
###[等価性の比較と同一性](https://developer.mozilla.org/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness)
###[クロージャ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures)

### [継承とプロトタイプチェーン](https://developer.mozilla.org/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)

### [Strict モード](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode)

### [JavaScript 型付き配列](https://developer.mozilla.org/ja/docs/Web/JavaScript/Typed_arrays)

### [メモリ管理](https://developer.mozilla.org/ja/docs/Web/JavaScript/Memory_Management)

### [同時実行モデルとイベントループ
](https://developer.mozilla.org/ja/docs/Web/JavaScript/EventLoop)


## [HTTP](https://developer.mozilla.org/ja/docs/Web/HTTP)

[HTTP の概要](https://developer.mozilla.org/ja/docs/Web/HTTP/Overview)
[プロトコル](https://developer.mozilla.org/ja/docs/Glossary/protocol)
[TCP](https://developer.mozilla.org/ja/docs/Glossary/TCP)
[Cache(キャッシュ)](https://developer.mozilla.org/ja/docs/Glossary/Cache)
[Proxy server (プロキシサーバー)](https://developer.mozilla.org/ja/docs/Glossary/Proxy_server)
[Port (ポート)](https://developer.mozilla.org/ja/docs/Glossary/port)
[Host](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Host)
[HTTP ヘッダー](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers)
[Connection](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Connection)
[QUIC](https://ja.wikipedia.org/wiki/QUIC)※MDN外
[WWW-Authenticate](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/WWW-Authenticate)
[プロキシサーバーとトンネリング](https://developer.mozilla.org/ja/docs/Web/HTTP/Proxy_servers_and_tunneling)
[HTTPリクエストメソッド](https://developer.mozilla.org/ja/docs/Web/HTTP/Methods)
[Domain (ドメイン)](https://developer.mozilla.org/ja/docs/Glossary/domain)
[Internet Assigned Numbers Authority](https://ja.wikipedia.org/wiki/Internet_Assigned_Numbers_Authority)
[レジストラ](https://ja.wikipedia.org/wiki/%E3%83%AC%E3%82%B8%E3%82%B9%E3%83%88%E3%83%A9)※MDN外
[トップレベルドメイン](https://ja.wikipedia.org/wiki/%E3%83%88%E3%83%83%E3%83%97%E3%83%AC%E3%83%99%E3%83%AB%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3)

[HTTP キャッシュ](https://developer.mozilla.org/ja/docs/Web/HTTP/Caching)
[200 OK](https://developer.mozilla.org/ja/docs/Web/HTTP/Status/200)
[301 Moved Permanently](https://developer.mozilla.org/ja/docs/Web/HTTP/Status/301)
[GET](https://developer.mozilla.org/ja/docs/Web/HTTP/Methods/GET)
[POST](https://developer.mozilla.org/ja/docs/Web/HTTP/Methods/POST)
[404 Not Found](https://developer.mozilla.org/ja/docs/Web/HTTP/Status/404)
[206 Partial Content](https://developer.mozilla.org/ja/docs/Web/HTTP/Status/206)
[Expires](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Expires)
[Cache-Control](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control)
[クローキング](https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%AD%E3%83%BC%E3%82%AD%E3%83%B3%E3%82%B0) MDN外
[User-Agent](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/User-Agent)
[HTTP Cookie](https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies)
[オリジン間リソース共有 (CORS)
](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)
[HTTP の進化](https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP)
[Mozilla ウェブセキュリティガイドライン](https://wiki.mozilla.org/Security/Guidelines/Web_Security)
[HTTP メッセージ](https://developer.mozilla.org/ja/docs/Web/HTTP/Messages)
[HTTP セッションの典型例](https://developer.mozilla.org/ja/docs/Web/HTTP/Session)
[HTTP/1.x のコネクション制御](https://developer.mozilla.org/ja/docs/Web/HTTP/Connection_management_in_HTTP_1.x)

## [アクセシビリティ](https://developer.mozilla.org/ja/docs/Learn/Accessibility)

アクセシビリティはエンジニアにとっての教養のようなものです。また、エンジニアとして付加価値をつける上でかなり良い切り口です。

[アクセシビリティとは？
](https://developer.mozilla.org/ja/docs/Learn/Accessibility/What_is_accessibility)
[HTML: アクセシビリティの基礎](https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML)
[CSS と JavaScript のアクセシビリティ成功事例](https://developer.mozilla.org/ja/docs/Learn/Accessibility/CSS_and_JavaScript)
[WAI-ARIA の基本](https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics)
[アクセシブルなマルチメディア](https://developer.mozilla.org/ja/docs/Learn/Accessibility/Multimedia)
[モバイルアクセシビリティ](https://developer.mozilla.org/ja/docs/Learn/Accessibility/Mobile)
[アクセシビリティのトラブルシューティング](https://developer.mozilla.org/ja/docs/Learn/Accessibility/Accessibility_troubleshooting)

## おまけ　さらに知識を深めたい人のための書籍

<a href="//af.moshimo.com/af/c/click?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB08QVCSY1D" rel="nofollow" referrerpolicy="no-referrer-when-downgrade">JavaScriptモダンプログラミング完全ガイド</a><img src="//i.moshimo.com/af/i/impression?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" width="1" height="1" style="border: 0px;" />
<a href="//af.moshimo.com/af/c/click?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4873117836" rel="nofollow" referrerpolicy="no-referrer-when-downgrade">初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発</a><img src="//i.moshimo.com/af/i/impression?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" width="1" height="1" style="border: 0px;" />

<a href="//af.moshimo.com/af/c/click?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB08QVCSY1D" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img src="https://images-fe.ssl-images-amazon.com/images/I/51wyH+xfTIL._SL160_.jpg" alt="" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" width="1" height="1" style="border: 0px;" /><a href="//af.moshimo.com/af/c/click?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4873117836" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img src="https://images-fe.ssl-images-amazon.com/images/I/51U44SJi3jL._SL160_.jpg" alt="" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" width="1" height="1" style="border: 0px;" />


<a href="//af.moshimo.com/af/c/click?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB08S2T8HZV" rel="nofollow" referrerpolicy="no-referrer-when-downgrade">ほんの一手間で劇的に変わるHTML ＆ CSSとWebデザイン実践講座</a><img src="//i.moshimo.com/af/i/impression?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" width="1" height="1" style="border: 0px;" />
<a href="//af.moshimo.com/af/c/click?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB00M0ESXUI" rel="nofollow" referrerpolicy="no-referrer-when-downgrade">Web制作者のためのCSS設計の教科書</a><img src="//i.moshimo.com/af/i/impression?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" width="1" height="1" style="border: 0px;" />
<a href="//af.moshimo.com/af/c/click?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB08S2T8HZV" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img src="https://images-fe.ssl-images-amazon.com/images/I/51wICc6HSeL._SL160_.jpg" alt="" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" width="1" height="1" style="border: 0px;" /><a href="//af.moshimo.com/af/c/click?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB00M0ESXUI" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img src="https://images-fe.ssl-images-amazon.com/images/I/51nSEOKWSrL._SL160_.jpg" alt="" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" width="1" height="1" style="border: 0px;" />

<a href="//af.moshimo.com/af/c/click?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB07X6F1C2P" rel="nofollow" referrerpolicy="no-referrer-when-downgrade">Vue.js&amp;Nuxt.js超入門</a><img src="//i.moshimo.com/af/i/impression?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" width="1" height="1" style="border: 0px;" />
<a href="//af.moshimo.com/af/c/click?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB08NSZJZ4Q" rel="nofollow" referrerpolicy="no-referrer-when-downgrade">Nuxt.jsとFirebaseを使って爆速で何か作る前に読む本 (技術の泉シリーズ（NextPublishing）)</a><img src="//i.moshimo.com/af/i/impression?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" width="1" height="1" style="border: 0px;" />

<a href="//af.moshimo.com/af/c/click?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB07X6F1C2P" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img src="https://images-fe.ssl-images-amazon.com/images/I/51eFKoSgx5L._SL160_.jpg" alt="" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" width="1" height="1" style="border: 0px;" /><a href="//af.moshimo.com/af/c/click?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB08NSZJZ4Q" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img src="https://images-fe.ssl-images-amazon.com/images/I/5179fOXQzFL._SL160_.jpg" alt="" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1875799&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" width="1" height="1" style="border: 0px;" />