【初心者〜中上級者向け】JavaScriptの学習サービスと書籍27選

f:id:paiza:20200117183745j:plain
f:id:paiza:20180910132940p:plain こんにちは。倉内です。

WebサイトやWebサービスの開発に欠かせないJavaScriptは、人気も高く習得したいと考えている方も多いのではないでしょうか。エンジニアへの就職活動をしている学生や、未経験からエンジニアになろうという方にとっても、JavaScriptは習得しておきたい言語の1つです。

動的なWebページの作成といったフロントエンドで用いられるのはもちろん、Node.jsに代表されるようにサーバサイドプログラミングでも存在感を増しています。また、jQueryやReact、Vue.jsなどフレームワークも豊富です。

初めて学ぶプログラミング言語としてJavaScriptを選ぶ方も多いと思いますので、今回は基本・基礎を学びたい初心者の方へ向けたコンテンツから、しっかり学びを深めたい中上級者向けのものまで、JavaScriptを学びたいすべての方へ向けて、学習コンテンツと書籍をご紹介します。ぜひご自分の用途に合った学習方法を見つけてみてください。

JavaScriptを基本から学ぶ
JavaScriptを楽しく学ぶ
動的Webページ・アプリを作成する
番外編：競技プログラミング系
まとめ

JavaScriptを基本から学ぶ

【ドットインストール】

プログラミングが動画で学べるドットインストールでは、JavaScriptの基礎から簡単なアプリ開発の学習講座だけでなく、Vue.jsやReact、Angular.jsといった人気のフレームワークを学べる講座が充実しています。

環境設定の手順から解説されているので初心者の方も学びやすい内容となっています。

【 Progate 】

Progateはスライドによるレッスンで基礎を学び、オンラインエディタで実際にプログラミングをしながら身につけることができます。

JavaScriptの基本的な文法から、ES6（ECMAScript バージョン6（ES2015））に準拠した関数やクラスといった機能についての講座が用意されています。

【 paizaラーニング】

paizaラーニングは動画を見て学習を進めていく形式で、Webブラウザ上でプログラミングの演習問題を解くことができるため、初心者の方でも取り組みやすくなっています。

【とほほのJavaScriptリファレンス】

ここまで紹介してきた3つのサービスとは異なり、その名の通りリファレンスとして利用するのに適したサイトとなっています。

基本的な内容から応用までJavaScriptに関する情報がひと通り参照でき、サンプルコードが豊富なので実際に書いたり実行したりしながら学ぶとことができます。

JavaScriptを楽しく学ぶ

【 Code Combat 】

Code CombatはRPGを進めながらプログラミング学習ができるサービスです。グラフィックがかなり凝っており、勉強という感じではなく楽しみながらプログラミングを身につけられます。最初のステージではJavaScriptの基本的な構文から文字列の扱い、ループ文の書き方などを学びます。

ヘルプやガイドも充実しており初心者の方でも無理なく進められるのがうれしいですね。

【コードガールこれくしょん】

paizaが提供しているプログラミング学習ゲーム『コードガールこれくしょん』（通称『ガルこれ』）は、プログラミング言語の基礎を楽しく身につけることができます。初心者の方はもちろん、新しくプログラミング言語を習得したいという方にもおすすめです。

はじめはコードに書かれた間違いを修正するといった簡単な内容から始まり、ゲームを進めていくと徐々に難易度が上がります。

他にもゲームでプログラミングを学べるコンテンツをご用意していますので一度覗いてみてください。

【 Fight Code 】

Fight Codeは、JavaScriptでロボットの動作を記述し、そのロボットで他のユーザーと対戦ができるプログラミング学習サービスです。

実際にロボットを動かしながらプログラミングができるのが楽しいですね。また、他のユーザーのロボットのコードも見たり、他のユーザー同士の対戦を見たりといったこともできます。

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

JavaScriptを漫画を読みながら学ぶことができる初心者向けのサイトです。

漫画だけでなくサンプルコードや解説もありますので、楽しみながら学習ができます。

動的Webページ・アプリを作成する

ここで取り上げる学習サービスは、基本的な内容を学べる入門講座もあるのですが、Webサイトやアプリケーション作成のための講座が充実しているので特にそれらを選んでご紹介します。

【 Udemy 】

Udemyでは100,000以上のオンラインコースがあり、初心者向けから上級者向けまでバラエティに富んだコースが公開されています。価格もさまざまなので自分にあったものを選ぶことができます。

たとえば「JavaScript フレームワーク」といった単語で検索すると、Vue.jsやAngularといったフレームワークでWebサービスを作成するコースがたくさん出てきます。

【 Schoo 】

JavaScriptでのアプリケーション開発はもちろんですが、正規表現やバグ修正の仕方、セキュリティといったさまざまなコースがあります。

Schooの最大の特徴はライブコーディング（生放送）の実施で、参加は無料となっていますのでぜひチェックしてみてください。

【 Codecademy 】

英語にあまり抵抗がない方におすすめなのがCodecademyです。（一部のみ日本語化）

JavaScriptにはゲーム制作、バックエンド、フロントエンドの3つのスキルパスがあり、それぞれに学習コースが用意されています。

【 CODEPREP 】

学習コンテンツのことを「ブック」と呼び、目的別に学習すべきブックと順序が示されるため初心者でも取り組みやすいのが特徴です。

たとえば学習コースで「Webプログラミングを学ぶ」を選択すると、HML入門→HTML基礎→CSS入門→……→JavaScript入門→JavaScript基礎（オブジェクト指向編）→JavaScript基礎（配列操作編）…といったように学ぶべき内容が分かりやすく提示されます。

番外編：競技プログラミング系

競技プログラミングというと、C++など実行速度がはやい言語で解くイメージがありますが、いろいろな言語での挑戦が可能となっています。

今回はJavaScriptに対応しているかつ日本語サイトを集めました。アルゴリズムを考える力を鍛えるのはもちろん、ランキングやスコアを上げることがモチベーションになり継続した学習につながりますので気になる方はぜひチャレンジしてみてください。

【 AtCoder 】

コンテストは週末に開催されることが多く、コンテスト本番の成績でレーティングされます。（詳細スケジュールやルールは公式サイトをご確認ください）

常設の練習コンテストもあり、公式サイトの初心者向けの手引きも充実しています。過去問はいつでも挑戦でき解答・解説も用意されています。

【 paizaスキルチェック】

paizaのスキルチェックでは、プログラミングスキルをS・A・B・C・D・Eの6段階評価（ランクづけ）します。各問題につき10個以上の複数テストケースでチェックし、負荷試験と実行速度の測定、そして解答時間もスコアに影響します。

ランクは就職・転職の求人応募に影響するためスキルチェックの本番問題は1度のみ*1の挑戦となります。代わりに「レベルアップ問題集」という、練習問題（テストケースや一部解答の参照も可能）を公開していますのでご活用ください。

【 yukicoder 】

競技プログラミングは海外サイト（英語）が圧倒的に多いのですが、こちらも数少ない日本語対応のサイトです。

テストケースが公開されており、また、テストケースが通らなかった場合、何が間違っていたのかが見れるというのが特徴です。

まとめ

JavaScriptの基本からWebページやアプリケーション開発まで学べるコンテンツと書籍を紹介してきました。

JavaScriptはWeb開発では欠かせないプログラミング言語ですし、引き続き人気も高く、習得しておいて損はないでしょう。

基礎の学習は大切ではありますが、実際に作りたいものがある場合は「それを実現するためには何を学ぶとよいか？」を考えて取り組んでみるのもいいかもしれません。

自分に合った学習方法・書籍を見つけてみてくださいね！　そしてプログラミングが楽しいなと思った方はエンジニアを目指してみるのもいいでしょう。

「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら