フロントエンドエンジニア御用達の MDN web docs を網羅した #JavaScript

このリストは何？

MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。

なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。

MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。

ですので、初学者でも学習しやすいように MDN web docs 全体の各記事を確認したうえで、ある程度は取捨選択しつつ網羅してみました。これは全ての記事を掲載しているわけではなく、最初のうちはスルーしても良さそうとか、内容がやや古いと思われるものは除外してあります。

余談

MDN web docs の深部まで覗いていくと、意外と日本語翻訳されていない記事があることに気が付きます。どうせだからということで、勢い余って恐れ多くもいくつかの記事を翻訳してきました。

（2019/09/24 追記）

2019年10月19日開催の翻訳コミュニティに参加してきました。

Mozilla Japan コミュニティや Mozilla 関連の翻訳＆ローカライズコミュニティといったところで、翻訳を活発におこなっているようです。直近ですと【第16回！】みんなで MDN を翻訳しよう！翻訳コミュニティ定例ミートアップ！ 2019年10月19日開催というのもあるようなので、私もオンラインで ~~参加する予定です~~ 参加してきました。

では、以下が今回つくった MDN web docs 網羅リストです。

ご覧になっていただき、更に不要と思われるものや、逆に必要なのに足りていないなどあればご指摘お願いいたします。もしくはまったく別のアイデアがあればぜひお声がけください。

テクノロジー

HTML

初心者向けチュートリアル

HTML 概論
- ガイド
- 評価
  - 手紙をマークアップする
  - コンテンツページを構造化する
マルチメディアとその埋め込み方
- ガイド
- 評価試験
  - Mozillaのスプラッシュページ
HTML テーブル
- ガイド
  - HTML テーブルの基本
  - HTML テーブルの高度な機能とアクセシビリティ
- 評価
  - 惑星データの構造化
HTML フォーム
- 基本ガイド
  - 最初の HTML フォーム
  - HTML フォームを構造化する方法
- どんなフォームウィジェットが利用できますか？
  - ネイティブフォームウィジェット
- フォームデータを検証して送信する
  - フォームデータを送信する
- 高度なガイド
  - JavaScript でフォームを送信する
- フォームのスタイルガイド
  - HTML フォームをスタイリングする
  - HTML フォームの高度なスタイリング

リファレンス

CSS

チュートリアル

CSS の第一歩
- ガイド
- 関連情報
  - 新しい知識を使う
テキストの装飾
- ガイド
- 評価
  - コミュニティスクールのホームページの組版
CSS の構成要素
CSS レイアウト
- ガイド
- 評価
  - 基礎的なレイアウトの理解
- 関連情報
  - 実用的な位置指定の例

リファレンス

料理帳

CSS レイアウト料理帳
- レシピ

HTTP

チュートリアル

リファレンス

HTTP ヘッダー
- （めちゃくちゃいっぱいあるけど、ある程度拾っておきたい）
HTTP リクエストメソッド
- GET
- HEAD
- POST
- PUT
- DELETE
- CONNECT
- OPTIONS
- TRACE
- PATCH
HTTP ステータスレスポンスコード
- （めちゃくちゃいっぱいあるけど、ある程度拾っておきたい）

JavaScript

チュートリアル（完全な初心者向け）

チュートリアル（JavaScript ガイド）

JavaScript ガイド

チュートリアル（中級者向け）

チュートリアル（上級者向け）

リファレンス

標準オブジェクト
- 値プロパティ
  - NaN、undefined、null
- 関数プロパティ
  - eval() 必要以上に eval を使用しないで！、isNaN()、parseFloat()、parseInt()、decodeURIComponent()、encodeURIComponent()、
- 基本オブジェクト
  - Object、Function、Boolean、Error、RangeError、ReferenceError、SyntaxError、TypeError、URIError
- 数と日付
  - Number、Math、Date
- テキスト処理
  - String、RegExp
- 索引付きコレクション
  - Array
- キー付きコレクション
  - Map、Set
- 構造化データ
  - JSON
- 制御抽象化オブジェクト
  - Promise、Generator、GeneratorFunction
式と演算子
- 基本式
  - this、function、class、function*、yield、async function、await、[]、{}、/ab+c/i、( )
- 左辺式
  - プロパティアクセス演算子、new、super、...obj
- インクリメントとデクリメント
  - A++、A--、++A、--A
- 単項演算子
  - delete、void、typeof、!
- 算術演算子
  - +、-、/、*、%
- 関係演算子
  - instanceof、<、>、<=、>=
- 等値演算子
  - ==、!=、===、!==
- バイナリ論理演算子
  - &&、||
- 条件 (三項) 演算子
  - (condition ? ifTrue : ifFalse)
- カンマ演算子
  - ,
文と宣言
- 制御フロー
  - ブロック、break、continue、空文、if...else、switch、throw、try...catch
- 宣言
  - var、let、const
- 関数とクラス
  - function、function*、async function、return、class
- 反復処理
  - for、for...in、for...of、while
- その他
  - debugger、export、import
関数

HTML チュートリアル（入門レベル）

MDN HTML 要素リファレンス
- （めちゃくちゃいっぱいあるけど、ある程度拾っておきたい）

CSS チュートリアル（入門レベル）

CSS に関する一般的な質問

フロントエンドエンジニア御用達の MDN web docs を網羅した

このリストは何？

余談

（2019/09/24 追記）

テクノロジー

HTML

初心者向けチュートリアル

リファレンス

CSS

チュートリアル

リファレンス

料理帳

HTTP

チュートリアル

リファレンス

JavaScript

チュートリアル（完全な初心者向け）

チュートリアル（JavaScript ガイド）

チュートリアル（中級者向け）

チュートリアル（上級者向け）

リファレンス

DOM 入門

イベントリファレンス

リファレンスとガイド

ウェブ開発について学ぶ

ウェブ入門

チュートリアル

HTML チュートリアル（入門レベル）

CSS チュートリアル（入門レベル）

CSS チュートリアル（上級レベル）

リファレンス

HTML — Web を構造化する

CSS — Web の外観を指定

JavaScript — Dynamic client-side scripting

開発者ガイド

イベント開発者ガイド

AJAX

FormData オブジェクトの使用