フロントエンドエンジニアにとって、JavaScriptは必須のスキルです。JavaScriptの仕様は年々進化しており、新しい機能が追加されています。そのためJavaScriptの基礎を学ぶのはもちろんのこと、最新の機能についても学ぶ必要があります。

今回はJavaScriptを学習できるWebサイトを紹介します。これらのサイトを使って、フロントエンドエンジニアとしての基礎知識を身につけましょう。

CS50 for Japanese

CS50 for Japaneseはハーバード大学のコンピュータサイエンス入門講座「CS50」の日本語版翻訳プロジェクトになります。JavaScriptに限らず、コンピュータサイエンスの基礎を学ぶのに最適な教材です。

そして、第8週目のトピックがJavaScriptになります。2時間半くらいの動画になりますが、日本語字幕も付いていますので、ぜひご覧ください。

Week8 – CS50 for Japanese: コンピュータサイエンスの入門

MDN

MDNはMozillaの提供するドキュメントサイトです。JavaScriptのドキュメントが充実していますので、ぜひご覧ください。JavaScriptの基礎から構成要素（基礎構文）、オブジェクト入門、非同期処理などのモジュールに分かれています。

さらに深くJavaScriptについて学ぶ際にも、MDNは非常に役立つでしょう。MDNの使い方を含めて学べるのでお勧めです。

JavaScript – ウェブ開発を学ぶ | MDN

Progate

ProgateのJavaScript学習レッスンIです。最初のレッスンなので、ごく基礎について書かれています。全部で2時間程度と、学習時間も短いのが特徴です。

全部で3章あり、「文字列と数値」「変数・定数」「条件分岐」となっています。ES6を用いているので、モダンな書き方のJavaScriptで学べます。

JavaScript 学習レッスン I | プログラミングの入門なら基礎から学べるProgate[プロゲート]

paizaラーニング

paizaの提供するJavaScript入門編です。全4レッスンで、短いものとなっています。こちらも初学者を対象としているので、まず基礎を学ぶのに役立つでしょう。

JavaScriptの基礎、演算子、データの型、ループ処理などが学べます。簡単なゲーム開発も行うようです。

JavaScript入門編 | プログラミング学習サイト【paizaラーニング】

株式会社リクルート

リクルートのメンバーズブログにて公開されているのは、エンジニア向け新人研修資料になります。JavaScriptのみならず、TypeScriptやNext.jsについても資料が公開されています。

資料は基本的にスライドなので（あくまでも研修資料）、細かい説明がない点に注意してください。独学ではなく、講師用の資料として使うと良さそうです。

株式会社リクルート　エンジニアコース新人研修の内容を公開します！（2022年度版） | リクルート　メンバーズブログ

マンガで分かる JavaScriptプログラミング講座

このサイトではマンガを通じてJavaScriptを学べます。全部で28話まであり、最終的にNode.jsを使ったローカルアプリケーションなどを学習できます。

第1部ではJavaScriptの基本を網羅しているので、まず1部について学ぶのが良いでしょう。第2部では日付や正規表現、第3部ではブラウザでのJavaScriptなど徐々に高度になっていきます。

マンガで分かる JavaScriptプログラミング講座

Let’sプログラミング

JavaDriveというサイトのJavaScript入門コンテンツです。ブラウザのコンソールでJavaScriptを書きながら学べます。変数やループ処理、正規表現、非同期処理など幅広いJavaScriptについて学べます。

他にもPythonやJava、PHP、Perlなどさまざまなプログラミング言語についても学べるので、ぜひご覧ください。

JavaScript入門 | Let’sプログラミング

とほほのJavaScriptリファレンス

とほほさんのサイトではJavaScriptだけでなく、さまざまな情報について学べます。JavaScriptでは「まずは始めてみよう」からスタートし、手を動かしながら学べます。

他、ES5からES2023までの機能が紹介されており、JavaScriptの歴史について順を追って学べます。コンテンツ量はとても多いので、ゆっくりチャレンジしてみると良いでしょう。

とほほのJavaScriptリファレンス – とほほのWWW入門

CodeCombat

CodeCombatはJavaScriptまたはPythonを使ってゲーム開発を行うサイトです。そのゲーム開発を通じて、プログラミング言語を学びます。動くものがあるので、より直感的に学べるでしょう。

ゲームコンテンツはとても多いので、JavaScriptの基礎から複雑なテクニックまで学べるでしょう。登録する際には、無料の教師アカウントを作る必要があるようです。

CodeCombat – PythonとJavaScriptを学ぶコーディングゲーム | CodeCombat

CODEPREP

CODEPREPでは穴埋め式の問題に答える形でプログラミングを学習します。コンセプトとして、毎日10分のプログラミング学習を挙げています。毎日コツコツと続けていくことで、徐々に実力が備わっていくでしょう。

ブラウザの中でコーディングして、その上で動かすので、開発環境を用意する必要がありません。

CODEPREP | プログラムを書いて動かしながら学ぶ実践型のプログラミング学習サービス

JavaScript Tutorial

JavaScript Tutorialは英語のサイトですが、幅広いJavaScript学習が可能なサイトです。エディタの話からJavaScriptの構文、データ型、制御文、関数など幅広い内容が学べます。

ページ数がとても多いので、じっくりと腰を据えて取り組むのが良さそうです。

JavaScript Tutorial

Grasshopper

GrasshopperはGoogle製のJavaScript学習アプリです。Web版もあったのですが、現在はアクセスできなくなっています。このAndroidアプリ版のみ公開されています。

スマートフォンで使えるのがメリットです。空き時間に学習できるので、効率的に学べるでしょう。

Grasshopper: Learn to Code – Google Play のアプリ

まとめ

今回はJavaScriptを学べるWebサイトを紹介しました。それぞれに特徴がありますので、自分に合ったものを選択して学習してみてください。基礎を押さえたら、徐々に深く学んでいきましょう。

実践で使えるJavaScriptとなると、フレームワークやライブラリを使うことになります。ReactやVue.js、Next.jsなどのフレームワークを使うのが一般的です。そうしたフレームワークに関する学習も、ぜひ行ってみてください。