こんにちは。倉内です。
JavaScriptは、人気の高いプログラミング言語のひとつで、Web開発をおこなうエンジニアはもちろん、デザイナーでも習得したいと考えている方は多いと思います。
実践的に学びながら身につける方法もよいですが、基本的な文法はある程度分かっていたほうが効率よく学ぶことができます。特にプログラミングは、インプットだけで「分かったつもり」になっても、いざコードを書こうとしても手が動かないことがあります。
そこで今回は、ドリル形式で問題をたくさん解いてJavaScriptのコードを書くことに慣れるための学習サービスや書籍をご紹介します。
おすすめ学習サービス
基礎的な内容は変わらない部分もありますが、説明や出題問題のバージョンが古い場合がありますので、利用の際はご確認をお願いします。
Paiza Programming Game
paizaでは、さまざまな内容・難易度のプログラミングゲームを公開しており、その中でもコードの誤りを訂正したり不足を補ったりして正しいコードを書く初学者向けのゲームが基礎文法の習得におすすめです。「プログラミング筋トレ」とも言っています。
現在3つの異なる世界観のゲームを公開しており、いずれもブラウザ上でコードを書いて実行ができます。
たとえば、ファンタジーRPGのような舞台でのストーリーも楽しめる『コードクロニクル』の実際の出題画面を見てみます。
このように序盤はプログラミング自体をはじめて学習する方でも思いつくような問題になっています。
ステージが進むに連れて少し難しい問題も出題されますので、どこまでできるか試すつもりでどんどん進めていくと自然とコードを書くことに慣れてくると思います。
なかなか進めるのが難しいと感じたら、動画講座「JavaScript体験編」（全編無料）、「JavaScript入門編」（一部無料）で学んでから挑戦してみてもよいでしょう。
CODEPREP
さまざまな言語の学習ができますが、JavaScriptに関する学習内容も豊富で、基本的な文法だけでなくVue.jsやReact、Canvasなどのブック（学習講座）も公開されています。
はじめてJavaScriptを学ぶ方は、「JavaScript入門 基本操作編」から取り掛かってみましょう。
穴埋め形式で問題が出され、コードを正しく書いたあと、実行までブラウザ上でできます。ヒントやTipsなどの情報が同一の画面上で参照でき、初学者の方も独学できる工夫がされています。
CodeGrid
CodeGridは、フロントエンド技術向上をサポートするオンラインメディアとして、JavaScriptだけでなくフロントエンドに関するさまざまな学習コンテンツが公開されています。
JavaScriptの基本を学ぶには、「JavaScriptドリル」から始めるとよいでしょう。第1回は無料で公開されています。
サンプルコードとていねいな解説が特徴で、書かれたコードの悪いところを挙げて、どう解決するとよいかを考えることができるので実践に近い内容とも言えます。
月額で購読する有料コンテンツではありますが、フロントエンドを本気で学びたい！という方は一度覗いてみてはいかがでしょうか。
w3schools「JavaScript Tutorial」
英語のサイトですが、JavaScriptの基本の基から応用的な内容まで一通りそろっており非常に充実しています。
サンプルコードが豊富で、「Try it Yourself 」のボタンを押すと別ウィンドウでコードを書いて実行できるエリアが表示されるため便利です。
サンプルコードは自分で書き換えて試すことができるため、どのようなコードを書くとどのような実行結果になるのかを理解するのに向いています。
Elevator Saga
これまで紹介した学習サイトとはひと味違うのが、この「Elevator Saga」です。こちらも英語のサイトですが、JavaScriptのコードを書き換えたり追加したりして、エレベーターで人を運ぶミッションをクリアするという内容になっています。
ブラウザ上で実行でき、エレベーターで人を運ぶ動きがビジュアルで見れるのも面白い点です。最初は簡単ですが、だんだん難しくなるため、気づくと夢中になっているので飽きっぽい方にもおすすめです。
コードを書くよりも、「どうやったら指定された時間内（ステップ数）で人を運びきれるか？」というロジックを考えるのが楽しいかもしれません。
paizaラーニング「レベルアップ問題集」
穴埋め問題でJavaScriptのコードを書くのに慣れてきたなと思った方は、プログラミング練習問題を多数公開している「レベルアップ問題集」を活用してみてください。
ブラウザ上で問題を解いて実行、正誤判定もできるためインターネット環境さえあればすぐに取り組めます。
すべての問題のテストケースの入力値が参照でき、一部問題は解答例・解説も公開しています。テストケース、解答・解説の参照は学習チケットの消費が必要となることがあります。詳しくはこちら
ループや条件文、配列といった基本文法をおさらいできる問題から、ソート、線形探索、木やグラフなどアルゴリズムに関する問題など多様な練習問題があり、難易度もさまざまです。
また、「もっと腕試しをしてみたい！」「実力を測りたい！」という方は、決められた制限時間内にプログラミング問題を解く「スキルチェック」もおすすめです。
スキルチェックについて詳しくはこちら
おすすめ書籍
JavaScript基礎ドリル 穴埋め式
JavaScriptでドリルといえばこちらの1冊。穴埋め形式で出題される問題を自分の力で解くことでコーディング力が鍛えられます。
なお、実行環境を整えるのが大変そうと感じた方は、オンラインで実行できるpaiza.IOを利用してみてください。
JavaScript Primer 迷わないための入門書
Web版はなんと全編無料で読むことができます。
これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。
この書籍の目的は、JavaScriptというプログラミング言語を学ぶことです。 先頭から順番に読んでいけば、JavaScriptの文法や機能を一から学べるように書かれています。
上記のとおり、はじめてJavaScriptを学ぶ人が道に迷わないよう、しっかり順序を示してくれる1冊となっています。Web版では、解説のあいだにコード実行エリアがあるため読むだけでなく、アウトプットも同時におこなえます。
まとめ
JavaScriptのコードをドリル形式でたくさん書いたり問題を解いたりできる学習サービスと書籍をご紹介しました。
プログラミング学習は、どれだけインプットをしても自分の手を動かしてコードを書かなければ身につきません。自分に合ったサービスや書籍を選んで、インプットとアウトプットをこなしていきましょう。
ある程度コードが書けるようになったら、フレームワークの学習や実際に作ってみたいものに取り掛かってみるとよいと思います。
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
詳しくはこちら
