JavaScript入門: 基礎知識をGIFアニメで分かりやすく解説 -総まとめ

JavaScript QuestionsのLydia Hallie氏の「JavaScript Visualized」シリーズすべての翻訳を完了したので、まとめて紹介します。

JavaScriptエンジンの仕組みをはじめ、イベントループ、スコープチェーン、プロトタイプ継承、非同期処理、ジェネレータ関数、Hoisting（巻き上げ）など、GIFアニメを使用して詳しく解説しています。

シリーズ7本すべてと、プラス1として楽しく学べるクイズもあります。

• JavaScript イベントループの仕組み
• JavaScriptでエラーの原因となるHoisting（巻き上げ）の仕組み
• JavaScriptのスコープチェーン・変数参照の仕組み
• JavaScriptエンジンの仕組み
• JavaScript プロトタイプ継承の仕組み
• JavaScriptのジェネレータ関数とイテレータの仕組み
• JavaScriptの非同期処理Promise、AsyncとAwaitの仕組み
• JavaScriptの基礎を楽しく学べるクイズ

JavaScript イベントループの仕組みをGIFアニメで分かりやすく解説

イベントループは、JavaScriptデベロッパーが避けては通れない関門の1つです。JavaScript イベントループの仕組みについてGIFアニメーションで分かりやすく解説。

JavaScriptでエラーの原因となるHoisting（巻き上げ）、その仕組みをGIFアニメで分かりやすく解説

JavaScriptでエラーの原因となるHoisting（巻き上げ）はなぜ起こるのか、その仕組みについてGIFアニメーションで分かりやすく解説。

JavaScriptのスコープチェーン・変数参照の仕組みをGIFアニメで分かりやすく解説

JavaScriptのスコープチェーン・変数参照の仕組み、グローバルスコープ、ローカルスコープ、ブロックスコープについてGIFアニメーションで分かりやすく解説。

JavaScriptエンジンの仕組みをGIFアニメで分かりやすく解説

Node.jsおよびChromiumベースのブラウザで使用されるJavaScriptエンジンの仕組みについてGIFアニメーションで分かりやすく解説。

JavaScript プロトタイプ継承の仕組みをGIFアニメで分かりやすく解説

JavaScriptにはどのオブジェクトにもプロトタイプと呼ばれる便利な隠しプロパティがあります。プロトタイプ継承の仕組みについてGIFアニメーションで分かりやすく解説。

JavaScriptのジェネレータ関数とイテレータの仕組みをGIFアニメで解説

ES6ではジェネレータ関数と呼ばれるクールなものが導入されました。JavaScriptのジェネレータ関数とイテレータの仕組みをGIFアニメで解説。

JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説

JavaScriptのコードが期待通りに実行されないことに悩まされたことはないですか？ ES6で導入された新機能Promiseが原因かもしれません。JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説。

JavaScriptの基礎を楽しく学べるクイズ -Interactive JavaScript Quiz

最後は、JavaScriptの初心者向けに、楽しく学べるクイズ。問題は3つ、解説はGIFアニメーションで分かりやすいと思います。