JavaScriptの学び直し、Modern JavaScript Tutorialから始めませんか

はじめに

「JavaScriptはなんとなく書けるけれど、thisの挙動やプロトタイプチェーンを説明しろと言われると自信がない……」そんな心当たりはありませんか？フレームワークから入った方ほど、言語そのものの理解が後回しになりがちです。

そこで頼りになるのが Modern JavaScript Tutorial（javascript.info）です。基礎から高度なトピックまでを体系的にカバーした無料のオンラインチュートリアルで、GitHubでは25,000を超えるスターを獲得しています。書籍を買わなくても、この1サイトでJavaScriptの言語仕様からブラウザAPIまで一気通貫で学べます。しかも日本語版（ja.javascript.info）まで用意されているのです。

Modern JavaScript Tutorialとは

Modern JavaScript Tutorialは、モダンなJavaScriptを「シンプルな言葉で、しかし詳細に」解説することを掲げたオープンソースの学習リソースです。コンテンツ自体がGitHubリポジトリ（javascript-tutorial/en.javascript.info）でMarkdownとして管理されており、世界中のコントリビューターによって継続的に更新・翻訳されています。

主な特徴

3部構成の体系的なカリキュラム - Part 1「JavaScript言語」、Part 2「ブラウザ：ドキュメント、イベント、インターフェース」、Part 3「その他の記事（ネットワーク、バイナリデータ、正規表現など）」と、基礎から応用まで順序立てて学べます
各章に演習問題つき - 読むだけで終わらず、難易度表示つきのタスクを解いて理解度を確認できます。解答と解説も公開されています
常に最新 - 古い書籍にありがちな「ES5時代の書き方」ではなく、最新の言語仕様に合わせて日々更新されています
完全無料・オープンソース - コンテンツはGitHubで公開されており、誤りを見つけたら誰でもプルリクエストで修正を提案できます
多言語対応 - 日本語を含む多くの言語に翻訳されており、日本語版と英語版を見比べながら学ぶこともできます

インストール（利用の始め方）

ライブラリではなく学習リソースなので、基本的にはブラウザでアクセスするだけです。

英語版: https://javascript.info/
日本語版: https://ja.javascript.info/

コンテンツをローカルに置いて読みたい場合や、コントリビュートしたい場合は、リポジトリをクローンします。

# 英語版コンテンツの取得
git clone https://github.com/javascript-tutorial/en.javascript.info.git

# 日本語版コンテンツの取得
git clone https://github.com/javascript-tutorial/ja.javascript.info.git

各記事は article.md、演習問題は task.md としてフォルダ分けされているので、エディタでそのまま読めます。サイトと同じ見た目でローカル表示したい場合は、公式のサーバー実装（javascript-tutorial/server）をREADMEの手順に沿ってセットアップします。

基本的な使い方（学習の進め方）

おすすめは「読む → 手を動かす → タスクを解く」のサイクルです。たとえばPart 1の名物チャプター「クロージャ」を読んだら、ブラウザのコンソールやNode.jsで実際に確かめてみます。

// チュートリアル「変数スコープ、クロージャ」の理解を確かめる例
function makeCounter() {
  let count = 0;

  return function () {
    return count++; // 外側の変数を「記憶」している
  };
}

const counter = makeCounter();

console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

// 別のカウンターは独立したレキシカル環境を持つ
const another = makeCounter();
console.log(another()); // 0

「なぜanother()は0から始まるのか？」に自分の言葉で答えられれば、その章は合格です。各章末のタスクには星の数で難易度がついているので、★5の問題まで解ければ確実に力がついています。

Promiseやasync/awaitのような非同期処理も、チュートリアルの流れに沿って段階的に理解できます。

// 「Promiseチェーン」→「async/await」と読み進めた後に書ける例
async function loadUser(username) {
  const response = await fetch(`https://api.github.com/users/${username}`);

  if (!response.ok) {
    throw new Error(`HTTPエラー: ${response.status}`);
  }

  const user = await response.json();
  return user;
}

loadUser("iliakan") // チュートリアル作者のGitHubアカウント
  .then((user) => console.log(user.name))
  .catch((err) => console.error(err.message));

実践的なユースケース

1. フレームワーク経験者の「土台の補強」

ReactやVueは書けるのに原理があやふや、という方はPart 1の後半（プロトタイプ、クラス、モジュール）とPart 2のイベント章が特効薬です。たとえばイベントデリゲーションの章を読むと、フレームワークが内部でやっていることの輪郭が見えてきます。

<ul id="menu">
  <li data-action="save">保存</li>
  <li data-action="load">読み込み</li>
  <li data-action="search">検索</li>
</ul>

<script>
  // 各liではなく親で1つだけリスナーを持つ（イベントデリゲーション）
  const menu = document.getElementById("menu");

  menu.addEventListener("click", (event) => {
    const action = event.target.dataset.action;
    if (action) {
      console.log(`${action} が選択されました`);
    }
  });
</script>