33-js-concepts - JavaScriptの実力を33の概念で棚卸しする

はじめに

「クロージャって、人に説明できますか？」「イベントループの仕組みを図なしで話せますか？」

普段からJavaScriptを書いていても、いざ基礎を体系的に説明しようとすると言葉に詰まる、という経験はないでしょうか。フレームワークの使い方には詳しくなっても、その土台となる言語仕様の理解が曖昧なまま何年も過ごしてしまうケースは意外と多いものです。

33-js-concepts は、そんな「なんとなく分かっているつもり」を解消するために作られたリソースです。JavaScriptを理解する上で欠かせない33個の概念をリストアップし、それぞれに解説記事や動画へのリンクをまとめてくれています。今回はこのプロジェクトの中身と活用方法を紹介します。

33-js-conceptsとは

33-js-concepts は、Leonardo Maldonado氏が作成したGitHubリポジトリで、JavaScriptエンジニアが押さえておくべき33個のコア概念を一覧化したものです。2018年にGitHubの「注目すべきオープンソースプロジェクト」の一つに選ばれ、現在では6万を超えるスターと40以上の言語への翻訳を集める、学習リソースとして定番の存在になっています。

専用サイト（33jsconcepts.com）では各概念ごとに解説とコード例、参考リンクがまとめられており、リポジトリ自体はその入り口として機能しています。

主な特徴

体系的なチェックリスト - 基礎から応用まで33個の概念がカテゴリ別に整理されており、抜け漏れなく学習を進められる
実行可能なコード例 - 概念ごとに動くサンプルコードが用意されており、手を動かしながら理解を深められる
多言語対応の解説記事 - コミュニティによって40以上の言語に翻訳されており、母語で学べる

インストール

33-js-concepts はライブラリではなく学習用リポジトリのため、npmでインストールするものではありません。リポジトリをクローンして、ローカルでサンプルコードを動かしながら読み進めるのが基本的な使い方です。

# リポジトリをクローン
git clone https://github.com/leonardomso/33-js-concepts.git

# ディレクトリに移動
cd 33-js-concepts

READMEから各概念の解説記事へアクセスできるので、ブラウザで直接閲覧するだけでも十分に活用できます。

基本的な使い方

リポジトリで紹介されている33個の概念は、次のようなカテゴリに分かれています。

1. 基礎編
   - プリミティブ型とオブジェクトの違い
   - 型強制（Type Coercion）
   - スコープとクロージャ

2. 実行の仕組み
   - コールスタック
   - イベントループ
   - IIFE・モジュール・名前空間

3. オブジェクト指向
   - ファクトリ関数とクラス
   - this, call, apply, bind
   - プロトタイプによる継承

4. 非同期処理
   - コールバック
   - Promise
   - async/await
   - ジェネレーターとイテレーター

5. 関数型プログラミング
   - 高階関数
   - 純粋関数
   - map, reduce, filter
   - 再帰、カリー化と関数合成

例えば「クロージャ」の概念を実際のコードで確認すると、次のようになります。

function createCounter() {
  let count = 0;

  return function increment() {
    count += 1;
    return count;
  };
}

const counter = createCounter();

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

increment 関数が外側のスコープにある count を参照し続けている、これがクロージャです。33-js-concepts では、こうした概念一つひとつに対して解説記事とサンプルコードがセットで用意されているため、動作を確認しながら理解を固めていけます。

実践的なユースケース

1. チーム内の学習ロードマップとして使う

新しくJavaScriptを学ぶメンバーがいるチームでは、READMEの33項目をそのままチェックリストとして配布し、週に数個ずつ潰していくという使い方ができます。カテゴリごとに整理されているため、進捗も把握しやすいのが利点です。

2. 面接・技術試験の準備に使う

フロントエンドエンジニアの技術面接では「イベントループを説明してください」「プロトタイプ継承とは何ですか」といった基礎的な質問が定番です。33-js-concepts の各項目を自分の言葉で説明できるかを確認するだけで、実践的な面接対策になります。

3. コードレビューの視点を養う

例えば「高階関数」の理解が曖昧なままだと、次のようなコードのリファクタリングの意図を見逃してしまいます。

// 高階関数を使わない書き方
function double(numbers) {
  const result = [];
  for (const n of numbers) {
    result.push(n * 2);
  }
  return result;
}

// 高階関数を使った書き方
const double = (numbers) => numbers.map((n) => n * 2);