JavaScriptを独学で習得したい！
けどどうやって勉強すればいいかわからない・・・
JavaScriptは人気のプログラミング言語であり、これから習得したい方も多いのではないでしょうか。
しかしいざ独学で勉強しようと思っても何から始めたらいいのか、どんな方法が適しているのか最初はきっとわからないはずです。
この記事ではJavaScriptを独学で習得したい方に向けて、効果的な勉強やおすすめの教材、挫折しないコツをご紹介します。JavaScriptを独学で習得した経験がある筆者が初心者向けに詳しく解説しますので、最後まで読んで、最適な勉強法を掴んでください。
また、次の記事ではそもそもJavaScriptとはどんなプログラミング言語なのか、その特徴やできることを将来性も交えて紹介しているので良ければ参考にしてください。
→ JavaScriptとは？初心者向けに特徴・できること・将来性を簡単解説
この記事の目次
JavaScriptは独学でも習得できる
JavaScriptとは、画像をスライドさせる、ポップアップ表示させるといった風にWebサイトに動きをつけられるプログラミング言語です。動的なWebサイトを作れるJavaScritは今非常に人気が高く、勉強したい人も多いでしょう。
JavaScriptは、初心者でも独学で習得することは可能です。
その理由として、JavaScriptは「Webブラウザ」「エディタ」を準備するだけで始められるので学習をスタートしやすいことが挙げられます。また、書いたコードのエラー内容をWebブラウザで確認できるので、コードミスをしてしまったときに間違えているポイントが見つけやすく、初心者でも学習がスムーズです。
以上の理由から、JavaScriptは初学者でも独学で習得しやすい言語だと言えます。
JavaScriptがどんな言語であるのか、特徴や学習前の準備について、以下の記事で詳しく解説していますので、ぜひ参考にしてください。
JavaScript独学勉強方法・学習ロードマップ
STEP1:HTML・CSSを勉強する
特にJavaScriptでWebサイトの開発に携わりたいのであれば、最初にHTML・CSSを勉強しましょう。
Webサイトを作成するときは、骨組みとなるHTML、装飾を施すCSSのスキルが必要です。
HTMLとはHyperText Markup Languageの略であり、Webページ内の文字など要素の意味を定義するマークアップ言語のことです。文字をHTMLのタグで囲えば見出しにしたり、段落分けしたりできます。
HTMLでは文字や画像などを使え、CSSでは文字など背景などのデザインを整えることができます。
STEP2:JavaScriptの文法・構文を勉強する
次に、Progateなどの学習サイトでJavaScriptの文法・構文を勉強しましょう。
例えば変数や定数、データ型、関数を定義する際に、JavaScriptではどのようなコードを書くのか、基礎文法・構文を身につけてください。
JavaScriptの基礎文法についてこちらの記事で詳しく解説していますので、あわせてご覧ください。
STEP3:ライブラリを勉強する
次は、JavaScritのライブラリを勉強します。ライブラリとは、汎用性が高いプログラムのひな形のことです。
JavaScritにはjQueryやNode.jsなど、便利なライブラリがたくさんあります。
どのように便利なのかというと、例えばjQueryを使えば、本来5行必要なプログラムを約3行に短縮できます。
JavaScriptの場合
function add_element() {
var element_a =document.createElement(‘p’);
element_a.innerHTML = ‘侍エンジニア塾で学ぶJavaScriptの独学手順’;
var box = document.getElementById(‘box’);
box.appentChild(element_a);}
jQueryの場合
function add_element(){
$(‘box’).append(‘侍エンジニア塾で学ぶJavaScriptの独学手順’);}
JavaScritでおすすめのライブラリについて、以下の記事で詳しく解説していますのであわせてご覧ください。
STEP4:JavaScriptの環境構築を行う
次に、JavaScriptの環境構築を整えていきましょう。
JavaScriptの環境構築とは、JavaScripを実行できるようセッティングすることです。環境構築の第一歩として、実行環境を確保する必要があります。
JavaScriptで環境構築する方法は次の2種類です。
- Webサービスを利用する
- パソコンのエディタを使用する
Webサービスを利用すれば、環境構築不要でスムーズにJavaScriptを実行できます。ただWebサービスなどの場合、セキュリティの観点では注意が必要です。
一方自分のパソコンに環境を構築する際には、Webブラウザとテキストエディタを準備する必要があります。Webサービスを利用するときより環境構築の難度が上がるのがデメリットといえるでしょう。
ご自身がどの環境に合っているかは、以下の記事を参考にしてください。
STEP5:JavaScriptフレームワークを勉強する
JavaScript独学の手順5は、JavaScriptフレームワークに触ってみることです。
フレームワークとは枠組みを意味しており、効率よく開発するために必要な機能が予め用意されたものです。VueやAngular、Riotなど、JavaScriptには有名なフレームワークがあります。
JavaScriptでおすすめのフレームワークについて、以下の記事で紹介していますのであわせてご覧ください。
STEP6:アニメーションを作ってみる
フレームワークまで学習したら、JavaScriptで簡単なアニメーションを作ってみましょう。
JavaScriptでアニメーションを作成する手順は下記のとおりです。
- アニメーションが起きるタイミングを決める
- HTMLとCSSで要素を作る
- functionを定義する
- アニメーションの開始条件を定義する
まずはローディング中、クリック時など、アニメーションが起きるタイミングを決めましょう。その次に、アニメーションの起点となる場所のHTMLとCSSに仕掛けを作ります。
その後JavaScriptでアニメーションの関数を作成し、最後にアニメーションの開始条件を定義して完了です。
JavaScriptのアニメーションについて詳しく知りたい方は下記の記事を参考にしてください。
JavaScriptを独学するときにおすすめの学習サイト5選
JavaScriptを独学するときは、初心者でも気楽に勉強できる学習サイトを活用しましょう。
JavaScriptの勉強におすすめの学習サイトは以下の5つです。
- Progate
- ドットインストール
- Schoo
- Paiza 動画ラーニング
- CodeCademy
すべて無料で利用できる学習サイトですが、どう違うのかそれぞれの特徴を見ていきましょう。
Progate
Progateは「初心者から、作れる人を生み出す」というテーマのもとに運営される学習サイトです。初心者でもスムーズに学習を進められるように設計されています。
なお、有料プラン（税込1078円/月）であればJavaScriptの全ての講座を受けられます。
おすすめの人
- 初めてプログラミング学習する方
- プログラミング学習で一度挫折している方
初学者や一度挫折を経験している方でも挫折がしにくい仕組みになっていますので、安心して進めていくことが可能です。
ドットインストール
ドットインストールは、基礎アプリを作ることに特化している学習サイトです。
3分動画を見ながら学べるのが特徴で、開発環境を整えるところからスタートして実践で活かせる開発ツールの知識やテクニックが身につきます。
ドットインストールではJavaScriptを使っておみくじ、ビンゴ、カレンダー、ストップウォッチ、タイピングゲーム、三択クイズ、スライドショー、スロットマシン、数字タッチゲームなどが作れます。
ドットインストールは書籍だけだと息が詰まってしまう、という方におすすめです。
Schoo
Schooは、無料のオンライン生放送授業を提供している学習サイトです。プログラミング専門ではなく、お金、健康、テクノロジーなどあらゆるジャンルの授業があります。
Schooでは生放送の講義を見ながら学習できます。また、見逃してしまった方はプレミアムプランに加入することで視聴が可能です。
Schooは、専門家のリアルな講義を受けてIT全般の知識を得たい方におすすめです。
Paizaラーニング
Paizaラーニングは1回3分の分かりやすい動画と演習課題で、JavaScriptを基礎からしっかり理解できる学習サイトです。スキルチェックテストが設けられているので、プログラミングを学びながら理解度を確かめられます。
自分がどの分野が強いのか、どの分野が苦手なのかを把握して効率的に学習できるのがPaizaラーニングの魅力でしょう。
無料版だけでも282本の動画を視聴できるのもうれしいポイントです。
Codecademy
Codecademyは世界最大級のプログラミング学習サイトです。
入力したコードが画面右で即時に再現されるので、エラーの原因がすぐわかります。
また、学習の進捗や、何時間かかるかなど、全体像を把握しながら学習できるので初心者でも計画的に学習を進められます。
登録ユーザーはエラーの解決策を教えてもらえるのも初心者におすすめのポイントです。
JavaScriptを独学するときにおすすめの本3選
続いて、JavaScriptを独学する際におすすめの本を厳選してご紹介します。
初心者におすすめのJavaScriptの本は下記の3つです。
- スラスラわかるJavaScript
- ノンプログラマのためのJavaSciptはじめの一歩
- いちばんやさしいJavaScriptの教本
どんな内容の本なのか、ひとつずつ解説しましょう。
以下の記事で初心者におすすめのJavaScriptの本を厳選して紹介していますので、あわせてご覧ください。
スラスラわかるJavaScript
| 出版元 | 翔泳社 |
| 価格 | 2530円（税込） |
「スラスラわかるJavaScript」は、JavaScriptとは何なのか、基本的な知識を全14章で詳しく解説しています。
また、JavaScriptだけでなくHTMLやCSSの知識も習得できるので、プログラミングの初心者におすすめの一冊です。
ノンプログラマのためのJavaSciptはじめの一歩
| 出版元 | 技術評論社 |
| 価格 | 2618円（税込） |
「ノンプログラマのためのJavaSciptはじめの一歩」は、JavaScriptでつまづきそうな点やわかりにくい所を重点的に解説する本です。
文法や機能などがどのような役割を果たしているのか、初心者でもスムーズに理解できるでしょう。
書籍では、スライドショーのサンプルプログラムを実際に動かしていきます。
いちばんやさしいJavaScriptの教本
| 出版元 | 技術評論社 |
| 価格 | 2618円（税込） |
「いちばんやさしいJavaScriptの教本」は、はじめてでも挫折しないと評判のJavaScript入門書です。
講義と実習のワークショップ形式で、小さなプログラムを作りながら基本を学べる一冊です。
豊富なサンプルプログラムのコードをサポートページからダウンロードできるので、本を読みながらワークショップ感覚でJavaScriptを学べます。
JavaScript独学で挫折しないためのコツ
JavaScriptの独学で挫折しないためには、コツを押さえることが重要です。
当社が独自に実施したプログラミング学習の挫折についてのアンケート（298名を対象）では、プログラミング学習を行った人の87.5%は挫折していました。
■挫折を感じた理由1位は「気軽に聞ける環境になかった」
独学で勉強する人ほど「気軽に聞ける環境になかった」ことが挫折に要因に！
■調査概要
掲載元：PR TIMES
調査期間：2019年8月13日~8月20日
調査方法：インターネット調査
サンプル数：n=298
調査対象：10代〜80代の男女
同アンケートで挫折の原因について調査したところ、モチベーションを維持できなかった、不明点を聞ける環境になかった、学習時間がとれなかったといった回答が得られました。
こういったアンケート結果をふまえ、JavaScriptを挫折せずに習得するにはいくつかのコツを押さえる必要があります。
JavaScriptで挫折しないためのコツは、下記の5つです。
- 目的を決める
- すぐに質問できる環境を作る
- 毎日勉強する
- 実際にコードを書いて勉強する
- Youtubeなどの動画を使う
続いて、これからJavaScriptの学習をスタートする方に、挫折しないコツをご紹介します。
目的を決める
JavaScriptに限らず、プログラミング言語を習得するにはしっかりとした目的を設定することが大切です。
- フリーランスとして収入を得たい
- アプリ開発を行いたい
- 転職でスキルを活かしたい
目的にあわせ最適なカリキュラムを組むことが習得への近道です。
すぐに質問できる環境を作る
JavaScriptの独学で、不明点があったらすぐに質問しましょう。自分でエラーを解決できないとき、考えすぎると時間が無駄になってしまう場合があります。
プログラミングに関するQ&Aサイト「テラテイル」などを利用して、すぐに質問できる環境を整えておきましょう。
毎日勉強する
JavaScriptを独学で習得する際には、毎日欠かさず勉強しましょう。
- 1週間に1日7時間
- 毎日1時間
上記の場合は、後者の方が学習効率が良いです。そのため、独学でJavaScriptを習得したい方は毎日少しでも良いので学習するようにしましょう。
平日にお仕事がある方などは難しいと思います。そのような方は平日は30分、土日は3時間など、臨機応変に対応するようにしてみてください。
実際にコードを書いて勉強する
JavaScriptを独学で習得する際には、インプットだけでなく実際にコードを書くアウトプットが大切です。学習サイトで簡単なコードを書いて出力できると、モチベーションがアップします。
プログラミング学習ではアウトプットを意識的に取り組んでみてください。
Youtubeなど動画を使う
YouTubeであれば動画を見ながらJavaScriptを習得できます。なかにはアニメでPythonを解説する講座もあり、力を抜いて学習できるのが魅力です。
YouTubeで学習するときは、動画を見ながらコードを書くと効果的です。
YouTubeのアニメでJavaScriptを学習できる、初心者におすすめの講座をぜひ一度、ご覧ください。
本格的に学ぶならプログラミングスクールがおすすめ
弊社が運営している「侍エンジニア」の無料カウンセリングでは、JavaScript学習に関する悩みだけでなく、キャリアビジョンや、人生を今よりよくするためにはどうすれば良いかなど、相談していただきます。
当塾には28,000名の指導実績があり、多くの未経験者を正社員やフリーランスのエンジニアとして輩出してきました。これは経験豊富なアドバイザーが、受講生の希望や不安・悩みによりそい、最適な学習プランを提示してきた結果といえるでしょう。
完全オンラインで、ご自宅やコワーキングスペースなどリラックスできる環境で受講していただけますので、お気軽にご相談ください。
まとめ
JavaScript.は独学で習得できますが、間違った方法で勉強すると学習期間が長くなってしまったり挫折したりする可能性があります。
ご紹介した勉強法や適切な教材で、無理なく学習を継続してください。注意点を踏まえ勉強を続ければ、独学でもきっとJavaScritを習得できるはずです。
この記事のおさらい
JavaScriptの独学は可能です。独学を可能にするためには本記事で紹介するJavaScript独学ロードマップ、おすすめのサービス、おすすめの書籍、挫折しないためのコツなどを参考にしてください。
JavaScript独学勉強方法・ロードマップは、HTML・CSSを勉強する、JavaScriptの文法・構文を勉強する、jQueryを勉強する、JavaScriptの環境構築を行う、JavaScriptフレームワークに触ってみる、webサイトを作ってみるの6つです。
JavaScriptで挫折しないためのコツは、学習期間を設定しておく、目的を決める、すぐに質問できる環境を作る、毎日勉強する、実際にコードを書いて勉強する、Youtubeなど動画を使う、などが効果的です。
