現代の JavaScript チュートリアル

現代の JavaScript チュートリアルの日本語管理者をしています。

本家は Modern JavaScript Tutorial です。このサイトは、JavaScript を学び始めようとしている方、学び始めた方、ある程度実務では JavaScript 使ったことあるかた、どの方にも新しい発見があるサイトと思います（自分がそうでした）。

私は、このサイトに出会うまでに、5年以上（今はもう10年以上） JavaScript には実務開発で携わっていましたが、自分が知っていることはほんの一部であることに気付かされました。JavaScript はメジャーな言語で書籍なども多数ありますが、このサイトで基礎から深い部分まで網羅的に学ぶことができます。

今では React / Vue / Anuglar / Svelte ... などのライブラリ/フレームワークを用いつつ、TypeScript で開発するケースがほとんどですが、それでも JavaScript の言語仕様を知っておくことは、すべての基礎に通じるため、フロントエンドを軸にして生きていく方にとってはしっかり学べるよい場だと思います。

https://ja.javascript.info

ちなみに、2021年で最もアクセス頻度が高かった記事TOP5は以下です。JavaScript の基本的な部分を学習するのに利用いただけており、ありがたい限りです。

1. ループ:whileとfor
2. 配列
3. 配列のメソッド
4. コーディングスタイル
5. 変数

なお、TOP5 ではありませんが、忍者コード や Promise・async / await あたりも人気です。

サイトの概要

改めてですが、このサイトのオリジナルは、Modern JavaScript Tutorial で、これはロシアで最大級のJavaScriptチュートリアルと学習プラットフォーム learn.javascript.ru のフォークとして OSS として生まれたものです。その日本語版になります。

学習プラットフォームから生まれたということもあって、次のような点が特徴です。

• 基礎から最新まで学べる
• 体系だって幅広く学べる
• その場でスクリプトを実行し動作を見ながら進められる
• 各章の末尾に問題があり、理解度の確認に使える
• 単なるリファレンス的なものではなく、実践で使えるようになるために必要な tips や説明がある

なお、筆者が翻訳を開始した 2018年時点では Github スター数は 2000 程度でしたが、2022/7 時点では 18,000 を超えるスター数がついています。

日本語翻訳のサイトも、おかげさまで多数の方に閲覧いただけているようで、嬉しい限りです。

対象読者

基本どなたでも！ですが、特に

• JavaScriptをこれから始めようと思っている/始めたばかり方
• ある程度は知っているけど、その時必要なことだけ調べながらという方
• 以前やっていたけど、最近の JavaScript に触っておらず変化に戸惑っている方
• もう一歩深く理解していきたい方

と言った方には特に良いと思います。

私自身、数年 JavaScript を使った開発に携わってきて、だいたいのことを知っているつもりでしたが、それでも知らないことはまだまだ多いことをこのオリジナルのサイトを通して知りました。

より良い翻訳へのご協力

日本語の表現については、読みづらかったりより良い言い回しやがある箇所も多々あろうかと思います。気づいた際には、より良い翻訳へのフィードバックをいただけると幸いです。

コンテンツ

2020年時点で一旦一通りの翻訳はできました。以降は最新の変更を取り込みつつ、表現の改善を行っています。
また、分量が非常に多いため、必ずしも上からすべて見る必要はないです。自身の知識から、必要だと思う記事を見るとよいと思います。以下に記事の目次を列挙していますので、気になる部分からでもぜひ読むと勉強になると思います。

JavaScript 言語

導入

• Javascript 入門
• コードエディタ
• 開発者コンソール

JavaScript の基礎

• Hello, world!
• コード構造
• モダンなモード, "use strict"
• 変数
• データ型
• 型変換
• 演算子
• 比較
• 対話: alert, prompt, confirm
• 条件演算子: if, '?'
• 論理演算子
• ループ: while と for
• switch文
• 関数
• 関数式とアロー
• JavaScript 特別授業

コード品質

• Chrome でのデバッグ
• コーディングスタイル
• コメント
• 忍者コード
• mocha による自動テスト
• Polyfills

オブジェクト: 基本

• オブジェクト
• ガベージコレクション
• シンボル型
• オブジェクトメソッド, "this"
• オブジェクトからプリミティブへの変換
• コンストラクタ 演算子 new

データ型

• プリミティブのメソッド
• 数値
• 文字列
• 配列
• 配列のメソッド
• 反復可能なオブジェクト
• Map, Set, WeakMap と WeakSet
• Object.keys, values, entries
• 分割代入
• 日付 と 時刻
• JSON メソッド, toJSON

関数の高度な機能

• 再帰とスタック
• 残りのパラメータ(Rest parameters)とスプレッド演算子(Spread operator)
• クロージャ
• 古い "var"
• グローバルオブジェクト
• 関数オブジェクト, NFE
• "new Function" 構文
• スケジューリング: setTimeout と setInterval
• デコレータと転送, call/apply
• 関数バインディング
• カリー化と部分適用
• アロー関数ふたたび

オブジェクトプロパティの設定

• プロパティフラグとディスクリプタ
• プロパティ getters と setters

プロトタイプ, 継承

• プロトタイプ継承
• F.prototype
• ネイティブのプロトタイプ
• プロトタイプのためのメソッド
• すべてのプロパティを取得する

クラス

• Class パターン
• クラス
• クラスの継承, super
• 静的プロパティとメソッド
• Private / protected プロパティとメソッド
• 組み込みのクラスを拡張する
• クラスのチェック: "instanceof"
• ミックスイン

エラーハンドリング

• エラーハンドリング, "try..catch"
• カスタムエラー, Error の拡張

Promises, async/await

• 導入: callbacks
• Promise
• Promises チェーン
• Promise API
• Async/await

ジェネレータ, 高度なイテレーション

• ジェネレータ
• 非同期イテレーションとジェネレータ

モジュール

• モジュール, 導入
• エクスポートとインポート
• Dynamic imports(ダイナミックインポート)

ブラウザ: ドキュメント, イベント, インタフェース

ドキュメント

• ブラウザ環境, 仕様
• DOM ツリー
• DOM を歩く
• 検索: getElement* と querySelector*
• ノードのプロパティ: タイプ、タグとコンテンツ
• 属性とプロパティ
• ドキュメントの変更
• スタイルとクラス
• 要素サイズとスクローリング
• ウィンドウサイズとスクローリング
• 座標

イベント概論

• ブラウザイベントの紹介
• バブリング と キャプチャリング
• イベント移譲(Event delegation)
• ブラウザのデフォルト動作
• カスタムイベントのディスパッチ

イベントの詳細

• マウスイベントの基本
• 移動: mouseover/out, mouseenter/leave
• マウスイベントでのドラッグ&ドロップ
• キーボード: keydown と keyup
• スクロール

フォーム/コントロール

• フォームプロパティとメソッド
• フォーカス: focus/blur
• イベント: change, input, cut, copy, paste
• フォームの送信: submit のイベントとメソッド

ドキュメントとリソースの読み込み

• ページのライフサイクル: DOMContentLoaded, load, beforeunload, unload
• Scripts: async, defer
• リソース読み込み: onload と onerror

その他の記事

アニメーション

• ベジェ曲線
• CSS アニメーション
• JavaScript アニメーション

フレームとウィンドウ

• ポップアップとウィンドウメソッド
• ウィンドウを跨いだやり取り
• クリックジャッキング

正規表現

• パターンとフラグ
• RegExp と文字列のメソッド
• 文字クラス
• エスケープ, 特殊文字
• セットと範囲 [...]
• 量指定子 +, *, ? と {n}
• 貪欲と怠惰な量指定子
• キャプチャグループ
• 後方参照: \n と $n
• 論理和指定子(Alternation) (OR) |
• 文字列の先頭 ^ と末尾 $
• 複数行モード, フラグ "m"
• Lookahead and lookbehind
• Infinite backtracking problem
• ユニコードフラグ
• Unicode character properies \p
• Sticky flag "y", searching at position

ブラウザへのデータの保存

1. Cookies, document.cookie
2. LocalStorage, sessionStorage
3. IndexedDB

アニメーション

1. ベジェ曲線
2. CSS アニメーション
3. JavaScript アニメーション

Web component

1. 導入
2. Custom Elements
3. Shadow DOM
4. Template 要素
5. Shadow DOM スロット、コンポジション
6. Shadow DOM スタイリング
7. Shadow DOM とイベント

正規表現

1. パターンとフラグ
2. RegExp と文字列のメソッド
3. 文字クラス
4. エスケープ, 特殊文字
5. セットと範囲 […]
6. 量指定子 +, *, ? と {n}
7. 貪欲と怠惰な量指定子
8. キャプチャグループ
9. 後方参照: \n と $n
10. 論理和指定子(Alternation) (OR) |
11. 文字列の先頭 ^ と末尾 $
12. 複数行モード, フラグ "m"
13. Lookahead and lookbehind
14. Infinite backtracking problem
15. ユニコードフラグ
16. Unicode character properies \p
17. Sticky flag "y", searching at position