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

プログラミング勉強方法

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, Riot.js…)
  • スマホアプリフレームワーク(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はなんの役にも立たないのです。

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

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の意味などを調べて理解しながら進める

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

 

もし、いきなり写経で作るのは難しいと感じる人は、UdemyでWebサイトを組むのもいいですね!おすすめの動画は「フロントエンドエンジニアになりたい人の Webプログラミング入門」です。

この動画では、HTML/CSSとJavaScriptだけでなく、

  • レスポンシブWebデザイン(スマホ/PCデザイン)
  • jQueryの使い方
  • 非同期通信(画面を更新せずにデータを取得する方法)

といったWeb制作関連のことが一通り学習できるので、非常にコスパがいいですよ。

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を使ってきちんと古いバージョンも新しいバージョンも管理できることが重要というわけなのです。

 

学習方法についてですが、Udemyの「もう怖くないGit!チーム開発で必要なGitを完全マスター」という動画がおすすめです。

Gitの仕組みについて分かりやすく解説されているだけでなく、実際にGitをインストールして手を動かしながら学習できます。

Gitを使った開発手順の流れも学習できるので、チーム開発に必要な知識も習得できます。

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

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

とはいえプログラミングスクールは価格が数十万円もするものが多く、少し手が出せない…と感じますよね。

しかも、Vue.jsやReactのような新しいフレームワークを採用しているコースはほとんどありません。

しかし、TechAcademyのフロントエンドコースであれば、Vue.jsもカリキュラムにしっかりと入っています。

価格もスクールの中ではかなり低価格なのが嬉しいところです。TechAcademyについて簡単にまとめると以下の通りです。

受講料社会人:174,900円(税込)~
学生:163,900円(税込)~
学習期間4週間~
学習内容フロントエンド全般
学習形態オンライン
受講対象制限なし

先行で申し込みすると受講料がさらに5%割引になるキャンペーンもやっているので、早めに申し込んだほうがお得です。

 

TechAcademyはプログラミングスクールの中では珍しく無料体験を実施しているので、どうしても不安な方は受けてみるといいでしょう。

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

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

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

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

少しボリュームは大きいですが、学習には「超Vue.js 2 完全パック」の動画がおすすめです。

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

この動画で学べること
  • コンポーネント指向
  • Vue Routerによるルーティング
  • Vuexによるstore処理
  • axiosを使った非同期通信処理
  • Firebaseを使ったサーバレスアーキテクチャ構築

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

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

たかひろ
たかひろ

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

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をコピーしました