JavaScriptの10ステップ勉強法!学習ロードマップを解説

プログラミング勉強方法
※このページの内容に広告・PRが含まれます。

JavaScriptの勉強法について調べてみると「意外と具体的な勉強法が出てこない」と悩む方も多いかと思います。

なぜなら、最近のJavaScriptは変化が非常に激しいため、そもそもきちんとJavaScriptを扱えるエンジニアが多くないためです。

そこで、今回は現役でReact、Vue.jsのエンジニアであり、プロジェクトリーダーも務める僕が

  • JavaScriptの具体的な勉強の仕方と順番
  • 初心者がJavaScriptに対するありがちな勘違い

について解説していきます。

この記事を読み終えるころには以下のような理解ができています。

  • JavaScriptを学習すべき手順が明確化する
  • フロントエンジニアになるロードマップが見える

それでは見ていきましょう。

JavaScriptを勉強するための基礎知識とよくある勘違い

一般的にJavaScriptは初心者向けの言語だと言われます。

その理由は様々ですが、一言でいうと以下のように学習コストが低いことが挙げられています。

  • ブラウザで動作可能のため環境構築が不要
  • バックエンド言語と比較して覚えることが少ない

しかし、ここ数年はJavaScriptを取り巻く環境が大きく変化しています。

JavaScriptの勉強を進めるにあたって以下のポイントは押さえておきましょう。

JavaScriptの基礎知識
  • 知識1:JavaScriptの学習コストは増加し続けている
  • 知識2:就職をゴールにするために必要な知識
  • 知識3:就職をゴールにするなら学習時間は200時間

知識1:JavaScriptの学習コストは増加し続けている

まず始めに、これを伝えるために記事を書いたと言っても過言ではありませんが、JavaScriptの学習コストは増加し続けています。

具体的に以前までのJavaScriptと現在のJavaScriptを取り巻く環境を比較してみると以下のようになります。

以前までのJavaScript環境の主要技術
  • DOMの知識
  • jQuery
  • Ajax (XMLHttpRequest)

  ↓↓↓

現在のJavaScript環境の主要技術
  • DOMの知識
  • jQuery
  • Ajax (XMLHttpRequest)
  • Webフレームワーク(Vue.js, React, Angular…)
  • スマホアプリフレームワーク(ReactNative)
  • Node.js
  • タスクランナー(gulp, webpack)
  • トランスパイラ(babel)
  • パッケージマネージャ(npm, yarn)
  • サーバレスアーキテクチャ

など、比べるまでもなく圧倒的に学習することが増えていることがわかります。

上記全ての知識を知っておく必要はありませんが、フロントエンドエンジニアを目指すなら以下の赤文字項目は必須になります。

現在のJavaScript環境の主要技術
  • DOMの知識
  • jQuery
  • Ajax (XMLHttpRequest)
  • Webフレームワーク(Vue.js, React, Angular, Riot.js…)
  • スマホアプリフレームワーク(ReactNative)
  • Node.js
  • タスクランナー(gulp, webpack)
  • トランスパイラ(babel)
  • パッケージマネージャ(npm, yarn)
  • サーバレスアーキテクチャ

したがって、なんとなく「JavaScriptが簡単そうだから学ぼうかな」と考えている人は、少し気を引き締める必要があるかと思います。

知識2:就職をゴールにするために必要な知識

では、どれくらいの知識を身につければ就職は可能になるか疑問を持たれるかと思います。

この答えに関しては「フロントエンドエンジニア」を目指すか「Webデザイナー」を目指すかで変わってきます。

フロントエンドエンジニアとは
  • コードを書くことが主な仕事
  • デザイナーがデザインしたものをシステムに組み込む
  • バックエンドエンジニアともコミュニケーションを取る
  • 企業によってはアプリ開発を行う場合もある
Webデザイナーとは
  • デザインをすることが主な仕事
  • お客さんの要望に合わせてデザインをする
  • システムの内部に関わるプログラミングはしない

 

それぞれにおいて目標としては以下のスキル感を身につけておきたいところです。

フロントエンドエンジニアを目指す場合
  • jQueryで自由にDOM操作ができる
  • Ajaxを理解している
  • Vue.js, React どちらかで簡単なアプリケーションを作れる
  • babel, webpack が何をするか簡単に説明できる
  • npm, yarn が何をするか簡単に説明できる
  • 作ったアプリケーションを公開できる
Webデザイナーを目指す場合
  • jQueryで自由にDOM操作ができる
  • Ajaxを理解している

あくまでもJavaScriptに限定すれば、上記のようなスキルを持っておけばOKです。

Webデザイナーは上記以外にも、PhotoshopやIllustratorなどを使ったWebデザインのスキルが当然求められます。

たかひろ
たかひろ

この記事ではフロントエンドエンジニアを目指す想定で話をするよ!

知識3:就職をゴールにするなら学習時間は200時間

JavaScriptを学習するにあたって就職をゴールにするなら200時間程度の学習時間は確保しましょう。

200時間というのは完全初心者の場合なので、HTMLとCSSの学習を終えている方は短縮することも可能です。

ただ、なんとなく時間をかけて勉強をするだけでは意味がないので、具体的な学習ステップについて解説していきます。

本章のポイント
  • JavaScriptの学習コストは以前より増加
  • 学習時間は200時間は確保しよう

 

JavaScriptのおすすめ勉強法10ステップ

では、具体的にJavaScriptを勉強する順番について解説していきます。

勉強の順番は一覧で見ると以下の通りです。

それでは見ていきましょう。

Step1:ProgateでHTMLとCSSを学ぶ

まずJavaScriptを学ぶにあたって、HTMLとCSSの知識を身につける必要があります。

なぜなら、最近のJavaScriptフレームワークでも、最後に表示されるのはHTMLやCSSに変換されたコードのためです。

つまり、HTMLやCSSの知識をつけていなければ、JavaScriptはなんの役にも立たないのです。

具体的なコースは以下のコースを学習しましょう。以下のコースを全て学習しようと考えると月額1,078円(税込)かかりますが、それだけの価値は十分にあります。

HTML&CSSの上級コースやその他のコースについて学習しなくてもいいのか?と思われるかもしれませんが、Progateだけで完全にその言語を理解をすることはできません。

そのため、概要を理解できたら早めに次のステップに進むようにしましょう。

Step2:ProgateでJavaScriptの文法を学ぶ

続いてProgateでJavaScriptの基本文法について勉強していきましょう。

一例を挙げるとJavaScriptでは以下のような処理を行うことができます。

  • 特定の値を保持することができる変数
  • 「1〜100を表示する」のような繰り返しの処理
  • 「変数が2のときだけ実行」のような特定の条件のときだけ実行する処理

正直、あまりおもしろい勉強ではないですが、これらを使うとWebアプリケーションの幅が広がります。

JavaScriptを活用した処理例
  • ログインをしているときだけ「〇〇さん」とユーザー名を表示する
  • お知らせ一覧を一括で表示する
  • ユーザーがスクロールしたときにアニメーションをする

 

以下の講座をすることでアプリケーション開発の基礎を固めましょう。

もし、「どうしてもJavaScriptがわからない!」となった場合は、次のjQueryを学習すると理解が深まるので、先にjQueryを学習するのもいいでしょう。

Step3:ProgateでjQueryを学ぶ

引き続きProgateでjQueryについて学習していきましょう。

jQueryとは、簡単に言うとJavaScriptでアニメーションを作りやすくしてくれるライブラリです。

ライブラリ・・・プログラムの塊。

よくわからない方は、あまり深く考えず「jQueryはより簡単にアニメーションが作れる」くらいの理解でOKです。

よりリッチな見た目のWebサイトを制作するために、コースは以下のレッスンを進めていきましょう。

ちなみにProgateにはJavaScriptやjQueryの他の講座も数多くありますが、現時点では不要です。

もし、時間的に余裕がある!と思われる方は、これまでの勉強をしっかり理解するように時間を使いましょう。

たかひろ
たかひろ

応用に手を出すよりも基礎をコツコツ積み重ねるほうが大切!

Step4:Webサイトを自作してみる

ここまで勉強が進んだのであれば、Webサイトを作るだけのスキルは十分身についています。簡単なWebページでいいので、自分でコーディングしてみるといいでしょう。

Webサイトを作る学習として最も効果的な方法は、実際に公開されているWebサイトの写経です。

写経・・・Webサイトを真似して自分でコーディングを組むこと

例えば、この架空の建設会社のサイトは写経に最適です。

写経をする際のポイントは以下の2つです。

  • HTMLと同時にCSSも書いていく
  • CSSの意味などを調べて理解しながら進める

写経の詳しいやり方は以下の記事で詳しく解説しているので、合わせてご覧ください。

Step5:JavaScriptフレームワークを触ってみる

ここまでの学習が終えれば、いよいよJavaScriptのフレームワークを学習していきましょう。

現在、JavaScriptには以下の3大フレームワークがありますが、まずはVue.jsから学ぶことをおすすめします。

JavaScript3大フレームワーク
  • Vue.js(初学者におすすめ)
  • React
  • Angular

理由としては、ReactやAngularはコーディングルールがしっかりしているため、初学者には少しハードルが高いためです(個人的にはReactが好きですが)。

学習内容としては、英語になりますがVue Schoolという動画サイトがおすすめです。

公式のドキュメントでもVue.jsを使ったTODOアプリケーションの作成講座もあるので、こちらを進めるのもいいですね。
» ToDoリストを作りながら学習しよう!|基礎から学ぶ Vue.js

まずは写しながらアプリケーションを作っていき、同時並行でなぜこれで動作するのか?は考えながら進めましょう!

たかひろ
たかひろ

どのフレームワークも思想は似ているから、1つマスターすると他も勉強しやすいよ!

Step6:バージョン管理について学ぶ

続いて、必須ではありませんが、JavaScriptを独学するにあたってGitというツールの使い方について知っておきたいところです。

Gitとは、ソースコードにバージョンをつけることで、以前のバージョンのソースコードに簡単に戻れるバージョン管理ツールのことです。

例えば、Gitを使用していないと以下のように編集したファイルが乱立します。

  • sample.js
  • sample_2.js
  • sample_最新.js
  • sample_最新_2.js

こうした状況を避けるためにも、Gitを使ってきちんと古いバージョンも新しいバージョンも管理できることが重要というわけなのです。

 

学習方法についてですが、YouTubeの動画でも十分です。無料ですし。

学習後は、実際に自分でコードを書くときにGitを使いながら慣れていきましょう。

備考:これより先の項目はスクールが効率的

余談ですが、ここから先の学習は独学でも可能ですが、より本質的な理解が必要なためプログラミングスクールが効率的です。

今では価格が安めのプログラミングスクールも充実してきているので、目的に合わせたスクールを選ぶことで費用も抑えることができます。

おすすめのプログラミングスクールも選んでおいたので、紹介します(見たい人は↓をクリックして開いてください)。

スクール名おすすめな人受講料年齢制限転職保証対応言語受講形態受講期間
TechAcademy
(フロント
エンドコース)
本格的なJavaScript
のプログラミングを
学習したい人
163,900円
(税込)~
なしなし・JavaScript
(jQuery、Vue.js
を含む)
・Bootstrap
オンライン1~4ヶ月
侍テラコヤある程度自分で学習
でき、分からない
ところを質問したい人
月額2,980円
(税込)~
無料プラン
あり
なしなし・JavaScript
(jQuery)
・Webデザイン
など
オンライン1ヶ月~
Web食い
オンライン
Webデザインの
スキルも
身に着けたい人
59,800円 +
月額10,800円
(税込)~
なしなし・Webデザイン
・JavaScript
など
オンライン自由
(目安は
3ヶ月程)
DIVE INTO
CODE
ハイレベルな
エンジニアを
目指したい人
647,800円
(税込)

給付金で
197,800円
(実質、税込)
なしなし・JavaScript
(Vue.jsを含む)
・Ruby
・AWS、など
オンライン
or
通学(渋谷)
4,10ヶ月

TechAcademy(フロントエンドコース)

TechAcademyは、受講者数No.1!最短4週間から受講可能で、自分に合った受講期間を選択することで、他のプログラミングスクールよりも料金を抑えることができます。

通過率10%を突破した現役エンジニアのメンタリングを週2回受けることができます。

また、毎日15時〜23時はメンターが常駐しているので、質問すればすぐに疑問を解決できます。

フロントエンドコースではVue.jsもカリキュラムにしっかりと入っているので、本格的なJavaScriptのプログラミングが学べます。

 

TechAcademyは無料体験も可能なので、どうしても不安な方はまずは体験してみるといいでしょう。

侍テラコヤ

侍テラコヤは、サブスクリプション型のプログラミング学習サービスです。

  • 質問し放題、回答率100%のQ&A掲示板が利用できる(しかも平均30分で回答が来る!
  • 月に1回、現役エンジニアのレッスンが受けられる
  • プログラミングやWebアプリ開発、機械学習などの50種類以上の教材が学習し放題

といったサービスが受けられます。

これだけの内容にも関わらず、料金も入学金は無料、月額料金も無料のフリープランがあります(ただし、フリープランだと一部の教材やQ&A、現役エンジニアのレッスンは利用不可)。

すべての教材が利用できる有料プランでも月額2,980円(税込)~という格安で利用できます。

この料金にも関わらず、未経験からエンジニアに転職・就職するための面接対策や職務経歴書の作成サポートも付いています。

 

いつでも退会可能で1ヶ月だけの利用もOK!(有料プランの場合は、途中解約で解約手数料が発生する場合あり)

まずは無料で始められるので、とりあえず登録してみましょう。

Web食いオンライン

Web食いオンラインは、現役フリーランスの添削をガッツリ受けられる高コスパのプログラミングスクールです。

他のスクールと違い、プログラミング・デザイン・マーケティングを全て学ぶことができます。

加えてチャットで質問し放題にも関わらず、料金は入学金59,800円+月額10,800円(どちらも税込)と格安です。

学習期間の定めがなく、稼げるスキルが身につけばいつでも退会可能です(目安は3ヶ月ぐらい)。

ただし受講できる人数に限りがあり、毎回満員になっているので、早目に申し込むことをおすすめします。

DIVE INTO CODE

DIVE INTO CODEは、実務レベルのプログラミングが学べます。卒業生の中には、実務経験が2~3年必要とされる求人票で内定を得ている人もいます。

就職活動時に評価されるオリジナルアプリケーションの作成や就職サポートはもちろん、とにかく実践に出れるレベルを意識しながら学べます。

受講料が最大70%キャッシュバックされる給付金の制度もありますが、人数制限があるので早めに無料の相談会に参加してみましょう。

 

他にもおすすめのスクールは以下の記事で紹介しているので、ぜひ読んでみてください。

また、これから紹介する学習方法については、本当に独学にできそうか?を考えながら読み進めてください。

Step7:JavaScriptフレームワークで中規模アプリケーションを作ってみる

続いて、JavaScriptのフレームワークで中規模のアプリケーションを作ってみましょう。

とはいえ、いきなりゼロから作るのはハードルが高いので、Udemyを活用して勉強するのがいいでしょう。

少しボリュームは大きいですが、学習には以下の動画がおすすめです。

この動画では、Vue.jsやフロントエンドエンジニアとして必要な以下の知識を網羅してくれています。

この動画で学べること
  • コンポーネント指向
  • Vue Routerによるルーティング
  • Vuexによるstore処理
  • Ajaxを使った非同期通信処理

動画は16時間と少し長いですが、それだけ学習できることも非常に多いです。

もし、自分でアプリケーションを作りたい!と考える人は、この動画の内容を写経した上でオリジナルで作るのが最短コースと言えるでしょう。

たかひろ
たかひろ

最初から自分で作るのではなくまずは写経して学習を進めよう!

» Udemyの動画で学習する

Step8:package managerを理解する

フロントエンドエンジニアになることを考えるならnpmやyarnといったパッケージマネージャーについての理解が必須です。

パッケージマネージャーとは、簡単に言うと「外部の人が公開したプログラムを管理するシステム」のことです。

イメージしにくいかもしれませんが、1つのシステムには様々な機能がついています。

その中で、わざわざ自分で実装する必要のない機能は、他の人が作ったシステムを活用させてもらうことがよくあります。

例えば、「メール送信」「決済」は他のプログラムを使うことにしましょう。

本来はこれくらい大きなシステムがパッケージマネージャで管理されることはありませんが、理解のためにあえて説明しています

これをすることによって、「どの機能がどのシステムで作られているか?」が見えにくくなってしまいます。

それを管理してくれるのが、パッケージマネージャーの役割なのです。package.jsonを見て、どんなライブラリがあるのか?見てみると理解が深まるでしょう。

Step9:タスクランナーを理解する

続いて、gulpやwebpackといったタスクランナーについて理解を深める必要があります。

タスクランナーとは、「自動でプログラムを実行してくれる便利屋」と思ってもらえれば大丈夫です。

先程のVue.jsにおいても、Google Chromeなどのブラウザで実行できる状態にするためにはいくつかのステップが必要です。

Vue.jsのコードをブラウザで見れるようになるまで
  1. Vue.jsを通常のJavaScriptにビルドする
  2. 最新のJavaScriptをブラウザが読み取れるバージョンまでトランスパイルする

コードを変更する度に上記のことを手動で実行するのは大変なので、プログラムで自動的に実行するのがタスクランナーの役割になります。

こちらもwebpack.config.jsなどを見ることによって、何をしているのか理解を深めていきましょう。

Step10:サーバレスアーキテクチャを作ってみる

ここまで学習できれば、サーバレスアーキテクチャの構築を進めていきましょう。

サーバレスアーキテクチャは以下の記事のようにいくつかサービスがあります。

その中でも、個人的にはFirebaseをおすすめしています。

具体的な学習方法としては「JavaScriptフレームワークで中規模アプリケーションを作ってみる」で紹介した「超Vue.js 2 完全パック」の動画で学ぶのが手っ取り早いでしょう。

まずは、サーバレスアーキテクチャとはなにか?手を動かす中でイメージを掴んでいただければと思います。

 

まとめ|JavaScriptの勉強は最初は大変だが未来はある

この記事で紹介してきた学習ステップをまとめます。

ステップが非常に多いですが、実際、最近のフロントエンド事情は昔から大きく変わっています。

とはいえ、JavaScriptは今や最も注目される言語の1つなので習得できれば、将来的にも非常に希望がある言語です。

難しいと思われるかもしれませんが、スクールなども上手く活用しながらスキルアップしていただければと思います。

まずは、TechAcademyの無料体験を受けてみるのをおすすめします。

タイトルとURLをコピーしました