独学で身につく!入門向けのJavaScript学習サイト20選

JavaScript初心者向けに独学でも学習できるサイトをまとめています。どのサイトも入門向けで無料で始められるので、気軽に始めたい人に最適でしょう。JavaScriptを身につけてWebサイトの表現の幅を広げましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

JavaScriptをこれから学習したいという人におすすめのサイトをまとめて紹介しています。

独学で学習できますし、無料で進められるので手軽に始められるでしょう。HTMLとCSSを学習してみて次のステップに進みたいという方やJavaScriptを身につけてWebサイトの表現方法を増やしたいという方にはおすすめです。

各サイト動画やテキストなど学習タイプも載せているので、ぜひ自分に合ったサイトを見つけてみてください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

1. 初めて学ぶ人のためのJavaScript入門

nm_03_01

学習タイプ:テキスト

JavaScriptを初めて学ぶひとのために作られたサイトです。JavaScriptでできることや基本的な事柄がちょうど良い分量で学べます。

作ったWebページをワンランクグレードアップさせたい方に最適です!

初めて学ぶ人のためのJavaScript入門

 

2. ドットインストール

学習タイプ:動画

プログラミングを学ぶならもはやスタンダードなドットインストールです。

動画で分かりやすく解説してくれており文字を読むのが苦手!!というひとでも入りやすいのが特徴です。とりあえずここから始めれば間違いないでしょう!

ドットインストール

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

3. とほほのWWW入門

nm_03_03

学習タイプ:テキスト

いきなりコードのサンプルを用いて学習していくので全くの初心者向きではないのかもしれませんが、それでもサンプルを実際に動かしながら楽しんで学習できる点は素晴らしいです。

とほほのWWW入門

 

4. WEB+DB PRESS plus

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-18-19-38-08

学習タイプ:テキスト

ノンプログラマのためのJavaScriptはじめの一歩。

プログラミング自体が初めての人から対象にしてくれているのでいきなりJavaScriptという一番重要な言語が学べてこのサイトに出会った人はラッキーです。

その他プログラミング言語を学んでいくにあたって大切なことも語られているのでしっかり肝に銘じて学習しましょう。

WEB+DB PRESS plus

 

5. codecademy

nm_03_05

学習タイプ:ハンズオン(実際にソースコードを書きながら)

海外の有名サイトCodecademyのJavaScript版になります。

言語は英語になってしまいますが、登録なしでレッスンが受けれるのでまずどんな感じか見てみて進めてみるのもいいかもしれません。サイトのデザインもかっこいいです。

codecademy

 

6. JEEK

nm_03_06

学習タイプ:ハンズオン

理系生のインターンシップ・エンジニアのインターンシップ・アプリ開発のインターンシップをうたっているこのアプリですがもちろんプログラミング初心者のために作られたものなので分かりやすく作られています。

ブラウザ上でタイピングしてそのまま動くようになるのでわずらわしい環境設定無用!おすすめです。

JEEK

 

7. Progate

nm_03_07

学習タイプ:ハンズオン

こちらもリッチデザインなプログラミング学習サイトでもちろん無料です。3時間ほどでJavaScriptの基礎、そして重要な部分ががっちり学べるでしょう。

Progate

 

8. CODEPREP

学習タイプ:ハンズオン

9つのチャプターからなっていてゲームみたいに経験値をためながら学習を進めていくことができるので飽き性のあなたにもぴったりでしょう。

基礎的な内容を実際に書きながら習得することができるはずです。

CODEPREP

 

9. UX MILK

nm_03_09

学習タイプ:テキスト

こちらUX MILKでもJavaScript入門編があります。サイトデザインが綺麗でしっかりと見やすいので目移りせず集中して学習が進められそうですね。

UX MILK

 

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

nm_03_10

学習タイプ:マンガ

その名の通り漫画でJavaScriptを説明してくれています。

なんでも絵にするとわかりやすいですよね。さらに漫画なのでスイスイ読めてしまいます。漫画が好きな人はぜひここを訪れてみてください。

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

 

paiza

学習タイプ:ハンズオン
料金:無料(600円~/月の有料コースあり)

動画と練習問題で学習する「paizaラーニング」でJavaScriptを勉強することができます。一部有料ですが、期間によって無料で公開されている場合もあります。

paiza

 

Schoo

学習タイプ:動画
料金:無料(980円~/月の有料コースあり)

動画と生放送で学習するサイトです。JavaScriptに関する動画は無料も有料も多く存在し、ライブラリのひとつjQueryについても解説されています。

Schoo

 

初心者のためのJavaScript入門

学習タイプ:テキスト
料金:無料

変数やif文、繰り返しといった基本の構文について分かりやすくまとめられています。初めてJavaScriptに触れる場合におすすめです。

初心者のためのJavaScript入門

 

code.9leap

学習タイプ:ハンズオン
料金:無料

JavaScriptのフレームワークenchant.jsを使用して、実際に自分で作品を作りながら学ぶことができます。解説入りのサンプルコードから課題に沿って内容を編集し、ブラウザ上でその動作を確認することが可能です。

code.9leap

 

jsdo.it

学習タイプ:ハンズオン
料金:無料

ブラウザ上でJavaScriptを書いてその場で動作確認、共有ができるサイトです。他の人が公開したものについてもコードを見たり、実際に動かしてコメントで質問したりすることができます。

jsdo.it

 

CodeCombat

学習タイプ:ハンズオン
料金:無料(99$のプレミアム版あり)

ゲーム形式で楽しみながらコードに気軽に触れることができるサービスです。使用言語にJavaScriptが選択可能です。遊んでいるような感覚で学べるので、子供の教育に良いかもしれませんね。

CodeCombat

 

JavaScript リファレンス

学習タイプ:テキスト
料金:無料

JavaScript全般に関するリファレンスサイトになります。基本的な書き方を覚えてから、関数などを参照したいときに便利です。

JavaScript リファレンス

 

MOONBlock

学習タイプ:ハンズオン
料金:無料

ビジュアルプログラミング形式で、ブロックを使ってプログラミングを行います。もし○○なら□□を行うというように、全体の構成を考えて組み立てる練習をすることができます。

MOONBlock

 

Web Programming Primer

学習タイプ:テキスト
料金:無料

「JavaScript入門編」ではJavaScriptで何ができるかという知識から始まり、常に使うことになる基本の構文について一通り解説されています。最初から学びたい方におすすめです。

Web Programming Primer

 

W3Schools

学習タイプ:テキスト
料金:無料

Webサイト作成に使用される各言語のリファレンスサイトになります。英語サイトです。

JavaScriptに関してもサンプルコードとその実行結果をブラウザですぐに確認することができます。サンプルコードは内容を変更することもでき、それに応じた結果が表示されます。jQueryのリファレンスも存在します。

W3Schools

 

以上、JavaScriptの入門向け学習サイトをまとめて紹介しました。

これから始める人には最適なサイトばかりで、かつ無料なので気軽に始めてみましょう。

[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。