JavaScriptを無料で勉強するなら、まずpaizaラーニングの「JavaScript入門編」（全4レッスン無料）で手を動かし、わからない書き方はMDN Web DocsやJavaScript Primerといった無料のテキストで調べる、という使い方が始めやすい方法です。基本がわかったら、paizaのスキルチェックやAtCoder、W3Schoolsの練習問題など、ブラウザ上で解ける練習サイトで実力を確かめましょう。この記事では、2026年9月29日に各公式ページで存在と無料・有料の区分を確認できた15のサイトだけを紹介します。
サイトの選び方と、ブラウザだけで今すぐできる練習問題、学習サイトを使うときの注意点もあわせて解説します。料金や無料の範囲は変わることがあるため、利用前に各公式サイトでも確認してください。
JavaScript学習サイトおすすめ15選の比較表
| サイト名 | 形式 | 料金の区分（2026年9月時点） | レベル |
|---|---|---|---|
| paizaラーニング（JavaScript入門編） | 動画＋演習 | 無料（全4レッスン） | 入門 |
| Progate | スライド＋演習 | JavaScriptは有料のプラスプラン（無料プランは初歩的なレッスンの一部） | 入門〜初級 |
| ドットインストール | 3分以内の動画 | 一部無料（プレミアム会員は月1,080円〜1,480円・税込） | 入門〜初級 |
| Udemy | 講座ごとの動画 | 有料講座が中心（無料のレッスン・講座もあり） | 入門〜上級 |
| MDN Web Docs | テキスト＋確認テスト | 無料 | 入門〜上級 |
| JavaScript Primer | テキスト（書籍の全文） | 無料（紙の本は有料） | 入門〜中級 |
| 現代の JavaScript チュートリアル | テキスト＋タスク | 無料 | 入門〜上級 |
| とほほのJavaScript入門 | テキスト（リファレンス） | 無料 | 初級〜中級 |
| Let’s プログラミング（JavaScript入門） | テキスト＋サンプル | 無料 | 入門〜初級 |
| paiza スキルチェック | 練習問題（ランク判定） | 会員登録で受験できる | 初級〜上級 |
| AtCoder | 練習問題・コンテスト | 無料（ユーザー登録が必要） | 初級〜上級 |
| W3Schools（JavaScript Exercises） | 練習問題（英語） | 無料 | 入門〜初級 |
| Exercism（JavaScript） | 練習問題（英語） | 無料 | 初級〜中級 |
| CodinGame | ゲーム形式の練習（英語） | 無料 | 初級〜上級 |
| Elevator Saga | ゲーム形式の練習（英語） | 無料 | 中級 |
はじめてJavaScriptに触れる方は、日本語で、自分のパソコンに何も準備しなくても手を動かせるpaizaラーニングかProgateから始めるのがおすすめです。
JavaScriptの学習サイトを選ぶ3つのポイント
1. 環境構築せずにコードを書けるか
自分のパソコンでJavaScriptを動かすには、テキストエディタとブラウザを用意してファイルを作る必要があります。はじめのうちは、ブラウザ上でコードを書いてすぐ結果を確かめられるサイト（paizaラーニング、Progate、W3Schoolsなど）の方が、文法を覚えることに集中できます。
2. 手本や解説をしっかり見られるか
「なぜこの書き方になるのか」を理解したい方は、動画でコードを書く様子を見られるサイト（ドットインストール、Udemy）や、解説が詳しいテキストのサイト（MDN、JavaScript Primer）が向いています。
3. 自分のレベルがわかるか
独学では、自分がどこまでできるようになったのかがわかりにくくなりがちです。ランクで判定されるpaizaのスキルチェックや、正解・不正解がすぐにわかるAtCoder・W3Schoolsの練習問題を使うと、次に何を学べばいいかが見えてきます。
無料から始められる日本語のJavaScript学習サイト（スライド・動画）
1. paizaラーニング「JavaScript入門編」
動画で学んだあと、ブラウザ上の演習問題でコードを書いて確かめる学習サイトです。JavaScript入門編は「JavaScriptをはじめよう」「条件によって処理を変えてみよう」「ループ処理を学ぶ」「配列の基礎」の4レッスンで、サイコロやおみくじなど、簡単なプログラムを作りながら学べます。
- 料金の区分：JavaScript入門編の4レッスンは、2026年9月時点ですべて「完全無料」です
- こんな人におすすめ：お金をかけずに、手を動かしながら基本を学びたい人
公式サイト：paizaラーニング JavaScript入門編
2. Progate（プロゲート）
イラスト中心のスライドで学び、そのままブラウザ上でコードを書いて結果を確かめられる学習サイトです。JavaScriptのコースは、基礎文法・繰り返し処理・関数・クラス・配列メソッド・コールバック関数など7つのレッスンに分かれています。
- 料金の区分：JavaScriptのレッスンは有料のプラスプランの対象です。無料プランで学べるのは初歩的なレッスンの一部です
- こんな人におすすめ：図解で理解しながら、順番どおりに学び進めたい人
公式サイト：Progate JavaScript
3. ドットインストール
1本3分以内の短い動画で、プログラミングを学べるサイトです。最新版の「はじめてのJavaScript」（全7回）では、クリックで動くフォームやカウンター、タブメニューなど、Webページでよく使う動きを作りながら学べます。
- 料金の区分：無料レッスンの動画は無料で見られます。「はじめてのJavaScript」はプレミアム会員向けで、料金は月々払い1,480円、6ヶ月一括で月1,280円、12ヶ月一括で月1,080円（いずれも税込）です
- 注意：旧版の「JavaScript入門」（全25回）は一部の動画が無料で公開されていますが、更新が終了しています
- こんな人におすすめ：すき間時間に動画で学びたい人
公式サイト：ドットインストール はじめてのJavaScript
4. Udemy（ユーデミー）
講師ごとの講座を買って、動画で学ぶサービスです。JavaScriptの講座は日本語のものも多く、入門から実践的なアプリ開発まで、レベルに合わせて選べます。無料のJavaScriptレッスンや無料の講座もあります。
- 料金の区分：有料講座が中心です（講座ごとの購入のほか、プランの案内もあります）
- こんな人におすすめ：作りたいもの（ゲーム、Webアプリなど）に合った講座で、じっくり学びたい人
公式サイト：Udemy JavaScript講座
無料で読めるJavaScriptのテキスト・リファレンスサイト
5. MDN Web Docs
Mozillaが提供する、Web技術の解説サイトです。「JavaScript による動的スクリプティング」は初心者向けのコースで、JavaScriptとは何かから順番に学べます。学んだ内容を確かめる「確認テスト」（変数、ループ、イベントなど）もあります。
- 料金の区分：無料
- こんな人におすすめ：正確な情報で調べたい人。学習を進めるほど、調べものに使う機会が増えるサイトです
公式サイト：MDN JavaScript による動的スクリプティング
6. JavaScript Primer
ECMAScript 2015以降の今の書き方で、JavaScriptをゼロから学ぶための本です。本の全文をWebサイトで無料で読めます（紙の本は有料）。第一部で基本文法を、第二部の応用編でAjax通信やNode.jsのコマンドラインアプリなどを作りながら実践的な使い方を学べます。
- 料金の区分：Web版は無料
- こんな人におすすめ：古い書き方ではなく、今の書き方で体系的に学びたい人
公式サイト：JavaScript Primer
7. 現代の JavaScript チュートリアル
JavaScriptの基本から、ブラウザでの使い方（DOM、イベント）、応用的な内容までを扱うチュートリアルです。各章の最後に「タスク」（練習問題）と解答があり、読んだあとすぐに手を動かせます。2026年9月23日にも更新されています。
- 料金の区分：無料
- こんな人におすすめ：テキストを読みながら、問題でも理解を確かめたい人
公式サイト：現代の JavaScript チュートリアル
8. とほほのJavaScript入門
構文、演算子、文字列、配列、DOM、イベントなど、JavaScriptの機能がテーマごとにまとめられた、長く続いている解説サイトです。ES2015以降の新しい機能の説明もあります（最終更新：2026年8月30日）。
- 料金の区分：無料
- こんな人におすすめ：基本を学んだあとに、書き方を調べるリファレンスとして使いたい人
公式サイト：とほほのJavaScript入門
9. Let’s プログラミング「JavaScript入門」
JavaScriptの基本から、画面サイズの取得やCookieの読み書きなど実践的な使い方までを、サンプルコードとあわせて解説しているサイトです。コードを自分で試しながら読み進められます。
- 料金の区分：無料
- こんな人におすすめ：やりたいことの書き方を、サンプルで確かめたい人
公式サイト：Let’s プログラミング JavaScript入門
JavaScriptの練習サイト（無料で問題を解ける）
10. paiza スキルチェック
出題された問題を解いて、プログラミングの実力をS・A・B・C・Dのランクで判定するサービスです。2026年9月29日時点で全855問が公開されており、毎週木曜日に問題が追加されています。JavaScriptで受験できます。
- 料金の区分：受験には会員登録が必要です
- こんな人におすすめ：入門を終えて、今の実力を確かめたい人
公式サイト：paiza スキルチェック
11. AtCoder
競技プログラミングのコンテストを開催するサイトです。毎週土曜日21時からAtCoder Beginner Contest（ABC）が開かれ、5,000問以上の過去問にもいつでも挑戦できます。提出する言語にJavaScript（Node.js）を選べます。はじめての方は、過去問から選ばれた10問の「AtCoder Beginners Selection」から始めましょう。
- 料金の区分：ユーザー登録・コンテストへの参加とも無料です
- こんな人におすすめ：アルゴリズムの力を伸ばしたい中級者
公式サイト：AtCoder Beginners Selection
12. W3Schools「JavaScript Exercises」
英語のWeb技術の学習サイトです。JavaScriptの練習問題は、選択式と穴埋め式の問題がテーマごとに用意されていて（2026年9月時点で83セット、1セット3〜9問）、わからないときは答えを表示できます。コードの例をブラウザ上で書き換えて試せる「JavaScript Examples」もあります。
- 料金の区分：無料（アカウントがなくても使えます。登録すると進み具合を記録できます）
- こんな人におすすめ：基本の文法を短い問題でたくさん確かめたい人
公式サイト：W3Schools JavaScript Exercises
13. Exercism（JavaScript）
英語の練習問題サイトです。JavaScriptのコースには37の概念（コンセプト）に分けられた159の課題があり、提出したコードにボランティアのメンターからヒントやフィードバックをもらうこともできます。
- 料金の区分：無料
- こんな人におすすめ：自分のコードをより良い書き方に直していきたい人
公式サイト：Exercism JavaScript Track
14. CodinGame
ゲームやパズルを解きながらプログラミングを練習できる英語のサイトです。25以上の言語に対応していて、JavaScriptでほかのプレイヤーと速さを競う「Clash of Code」なども楽しめます。
- 料金の区分：無料
- こんな人におすすめ：ゲーム感覚で楽しく練習を続けたい人
公式サイト：CodinGame
15. Elevator Saga
エレベーターを動かすプログラムをJavaScriptで書くゲームです。「制限時間内に何人運ぶ」といったステージごとの条件をクリアするために、コードを書き足していきます。ブラウザだけで遊べます。
- 料金の区分：無料
- こんな人におすすめ：関数やイベントの基本がわかり、考える力を試したい人
公式サイト：Elevator Saga
ブラウザだけでできるJavaScript練習問題3問
JavaScriptは、ブラウザの「開発者ツール」のコンソールでもすぐに試せます。Google Chromeなら、WindowsはCtrl + Shift + J、MacはCmd + Option + Jでコンソールが開きます。コードを貼り付けると、はじめのうちは警告が表示されることがあります。自分で書いたコードや、このページのように内容を確かめたコードだけを使う場合に限り、表示に従ってallow pastingと入力すると貼り付けられるようになります。
まずは次の1行を入力して、Enterキーを押してみましょう。
const name = "Kredo";
console.log(`こんにちは、${name}さん！`);こんにちは、Kredoさん！と表示されれば準備完了です。次の3問に挑戦してみてください。解答例は、2026年9月にNode.js 22とChromium 141で実行して結果を確認しています。
問題1：買い物の合計金額を出す
配列[1200, 580, 3400, 980]の合計を「合計: ○○円」と表示してください。
const prices = [1200, 580, 3400, 980];
let total = 0;
for (const price of prices) {
total += price;
}
console.log(`合計: ${total}円`);結果：合計: 6160円
問題2：FizzBuzzを関数で書く
1から15までの数を表示し、3の倍数は「Fizz」、5の倍数は「Buzz」、両方の倍数は「FizzBuzz」と表示してください。
function fizzBuzz(n) {
if (n % 15 === 0) return "FizzBuzz";
if (n % 3 === 0) return "Fizz";
if (n % 5 === 0) return "Buzz";
return String(n);
}
for (let i = 1; i <= 15; i++) {
console.log(fizzBuzz(i));
}結果：1、2、Fizz、4、Buzz……と続き、最後にFizzBuzzと表示されます。
問題3：20歳以上の人の名前だけを取り出す
ユーザーの配列から、20歳以上の人の名前だけを配列で取り出してください。
const users = [
{ name: "Aoi", age: 24 },
{ name: "Ken", age: 31 },
{ name: "Mio", age: 19 },
];
const names = users.filter((user) => user.age >= 20).map((user) => user.name);
console.log(names);結果：['Aoi', 'Ken']（Chromeのコンソールでは、先頭に要素の数の(2)が付いた配列として表示されます）
ボタンやメニューなど、Webページを動かすコードを試したい方は「JavaScriptサンプルコード集24選」も参考にしてください。自分のパソコンでファイルを作って動かす方法は「JavaScriptのインストールは不要？動かすために知るべきこと」で解説しています。
JavaScript学習サイトを使うときの3つの注意点
1. HTMLとCSSの基礎を先に押さえる
JavaScriptは、HTMLで作ったWebページに動きをつけるために使われることが多い言語です。HTMLとCSSがわからないままだと、学んだことを自分のページで使えません。まだの方は「HTML勉強サイト8選」を参考に、先に基本を学んでおきましょう。
2. 学習サイトを終えたら、自分で何か作る
学習サイトで身につくのは、主に文法や書き方の基礎です。レッスンを終えたら、ToDoリストや計算ツールなど、小さくても自分で考えて作る練習をしましょう。作る中でつまずいたところを調べることで、使える知識になっていきます。
3. 英語の情報も調べられるようにする
MDNやJavaScript Primerのように日本語で読める資料も増えていますが、エラーメッセージや新しいライブラリの説明、海外のQ&Aサイトの回答は英語のものが中心です。W3SchoolsやExercismのような英語のサイトに少しずつ慣れておくと、調べられる範囲が大きく広がります。
英語とJavaScriptを一緒に身につける選択肢
JavaScriptのエラーメッセージや公式ドキュメントは英語が原文で、filter（絞り込む）やaddEventListener（イベントの受け取り役を追加する）のように、命令の名前も英語の意味そのままです。英語がわかると、コードの意味もエラーの原因もつかみやすくなります。
Kredo IT留学は、フィリピン・セブ島でITレッスンをすべて英語で受ける留学です。1日8時間（英語のマンツーマンレッスン4時間＋ITのグループレッスン4時間）で英語とITを同時に学びます。公式サイトによると、受講生の92%が英語もITも未経験です（2026年9月時点の掲載）。卒業生の作品には、JavaScriptやjQueryでアニメーションを取り入れたWebサイトも紹介されています。「独学で始めたけれど、英語と一緒に本格的に学びたい」と感じたら、Kredo IT留学の無料カウンセリングで、自分に合う期間やコースを相談してみてください。IT留学の全体像は「IT留学とは？費用・国別比較・1日の流れと選び方」にまとめています。
あわせて読みたい記事
JavaScriptの学習サイトについてよくある質問
JavaScriptは無料のサイトだけで勉強できますか？
基本の文法は、無料のサイトでも十分に学べます。paizaラーニングのJavaScript入門編（全4レッスン）、MDN、JavaScript Primer、現代の JavaScript チュートリアルは無料で使え、練習問題もAtCoderやW3Schoolsで無料で解けます（2026年9月時点）。
JavaScriptの練習はブラウザだけでできますか？
できます。Chromeなどのブラウザの開発者ツールのコンソールに入力すれば、その場で実行できます。paizaラーニング、Progate、W3Schools、AtCoderなども、ブラウザ上でコードを書いて確かめられます。
初心者はどのサイトから始めればいいですか？
日本語で手を動かしながら学べる、paizaラーニングのJavaScript入門編（無料）かProgateから1つ選びましょう。動画で学びたい方はドットインストールが向いています。入門を終えたら、paizaのスキルチェックやAtCoderで練習問題に挑戦するのがおすすめです。
JavaScriptとJavaは同じものですか？
名前は似ていますが、別のプログラミング言語です。JavaScriptは主にWebページに動きをつけるために使われ、ブラウザの中で動きます。学習サイトを選ぶときは、「Java」ではなく「JavaScript」の講座かどうかを確認しましょう。
まとめ：無料サイトで基本を学び、練習サイトで力を確かめよう
JavaScriptは、無料の学習サイトでも基本を学べます。はじめての方はpaizaラーニングかProgateで手を動かし、わからない書き方はMDNやJavaScript Primerで調べながら進めてみてください。基本がわかったら、ブラウザのコンソールで小さなコードを書いたり、paizaやAtCoder、W3Schoolsの練習問題を解いたりして、自分で書ける力を育てていきましょう。
英語でIT・AIを学べるKredo
英語×IT・AIのスキルを身につけてグローバルに活躍しませんか？
当メディアを運営しているKredoは、英語×ITをオンラインで学ぶ「Kredoオンラインキャンプ」と、フィリピンのセブ島で英語とIT・AIを学ぶ「KredoIT留学」「KredoAI留学」を提供しています。これまでの卒業生は3,000名以上。卒業生の多くが、国内外のIT企業への転職、フリーランスなどへのキャリアチェンジを実現しています。これからの時代に必要な英語×IT・AIのスキルを身につけてグローバルに活躍しませんか？
