次回から当サイト「えんじにゃーブログ」でご検索ください

【2021年】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.js, AngularJS, Riot.js…)
  • スマホアプリフレームワーク(ReactNative)
  • Node.js
  • タスクランナー(gulp, webpack)
  • トランスパイラ(babel)
  • パッケージマネージャ(npm, yarn)
  • サーバレスアーキテクチャ

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

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

キャプション
  • DOMの知識
  • jQuery
  • Ajax (XMLHttpRequest)
  • webフレームワーク(Vue.js, React.js, AngularJS, Riot.js…)
  • スマホアプリフレームワーク(ReactNative)
  • Node.js
  • タスクランナー(gulp, webpack)
  • トランスパイラ(babel)
  • パッケージマネージャ(npm, yarn)
  • サーバレスアーキテクチャ

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

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

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

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

フロントエンドエンジニア

  • コードを書くことが主な仕事
  • デザイナーがデザインしたものをシステムに組み込む
  • バックエンドエンジニアともコミュニケーションを取る
  • 企業によってはアプリ開発を行う場合もある

Webデザイナー

  • デザインをすることが主な仕事
  • お客さんの要望に合わせてデザインをする
  • システムの内部に関わるプログラミングはしない

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

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

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

たかひろ

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

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

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

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

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

本章のポイント

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

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

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

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

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

STEP 1: ProgateでHTMLとCSSを学ぶ

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

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

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

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

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

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

STEP 2: ProgateでJavaScriptの文法を学ぶ

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

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

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

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

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

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

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

STEP 3: ProgateでjQueryを学ぶ

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

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

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

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

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

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

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

たかひろ

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

STEP 4: webサイトを自作してみる

ここまで勉強が進んだのであれば、webサイトを作るだけのスキルは十分身についています。

したがって、簡単なwebページでいいのでwebサイトをコーディングするといいでしょう。

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

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

例えば、Uberのサイトなどのデザインを写経してみてはいかがでしょうか。

画像
出典: Uber

このサイトのデザインのみをHTML+CSS (+jQuery) でコーディングしていきます。

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

  • 完璧を求めない
  • 画像やアイコンなどはダミーでOK

まずは、全体像をなんとなく作ってみることが大切です。もし、いきなり写経で作るのは難しいと感じる人は以下の書籍やUdemyなどでwebサイトを組むのもいいですね!

Udemyは月に1回ほど1,200~1,400円で講座の購入ができるのでセールをしているかチェックしましょう

画像
出典: フロントエンドエンジニアになりたい人の Webプログラミング入門

フロントエンドエンジニアになりたい人の Webプログラミング入門

書籍で学習したいと思われる方には少し古い部分もありますが、以下の書籍がおすすめです。

本で学習するときは1ページ目からするのではなく、必要な部分をつまんで学習するスタイルがおすすめです。

完璧に作るのではなく、あくまでも今までに身につけた知識を取り入れて作ることを意識するといいですね。

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

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

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

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

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

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

出典: Vue School

また、公式のドキュメントでもVue.jsを使ったTODOアプリケーションの作成講座もあるので、こちらを進めるのもいいですね。

ToDoリストを作りながら学習しよう!

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

たかひろ

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

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

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

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

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

・ sample.php
・ sample_2.php
・ sample_最新.php
・ sample_最新_2.php

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

学習方法についてですが、dotinstallでの学習がおすすめです。

dotinstall

また、以下の記事で仕事で使うGitコマンドを10個だけまとめているので、参考にしていただけたらと思います。

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

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

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

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

その中でもTechAcademyのフロントエンドコースであれば、159,000円とスクールの中では、かなり低価格で学習が可能です。

各スクールの比較記事に関しては「【13社比較】安いのに質が高いプログラミングスクール厳選3社を紹介」をご覧ください。

費用174,900円(税込)
学習期間4週間
学習内容フロントエンド全般
学習形態オンライン
受講対象制限なし

受講内容を見るとわかりますが、Vue.jsが入っていることがわかります。

さらに後ほど「サーバレスアーキテクチャを作ってみる」で紹介するFirebaseなども学習できます。

ここまでの事前学習をしておけば4週間という短期集中の授業でも追いつくことは十分可能です。

TechAcademyはプログラミングスクールではめずらしく、無料体験を実施しており、一度体験してみる価値はあるでしょう。

プログラミングスクールに通えば、

  • 不明なエラーを解決してくれるメンター
  • 新しいことも体系的に学べるカリキュラム
  • IT業界未経験からの転職サポート

といった特典があります。今後の生活を大きく変えることを考えると決して高すぎる価格ではないのかなと思います。

JavaScriptのおすすめプログラミングスクールは、以下の記事でも解説しているので合わせてご覧ください。

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

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

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

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

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

超Vue JS 2 入門 完全パック

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

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

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

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

たかひろ

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

STEP 8: package managerを理解する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

出典: Firebase

具体的な学習方法としては「JavaScriptフレームワークで中規模アプリケーションを作ってみる」の講座をするのが手っ取り早いでしょう。

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

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

ここまでの記事の学習ステップをまとめます。

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

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

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

よかったらシェアしてね!

コメント

コメントする

目次
閉じる