初心者にJavaScriptは難しい!【挫折しにくい学習方法を解説】

プログラミング勉強方法

高速でWebアプリケーションを作ることができることもあり、JavaScriptの人気が急上昇しています。

RedMonkが発表したGitHubのデータを解析して行われた人気ランキングでもJavaScriptがトップとなっており、注目度の高さが伺えます。

RedMonkが発表した、GitHubのデータを解析して行われた人気ランキングでもJavaScriptがトップとなっており、注目度の高さが伺えます。

  1. JavaScript
  2. Python
  3. Java
  4. PHP
  5. CSS

そんな人気の高いJavaScriptは初心者向きの言語ということもあり、学習している方も多いですよね。

しかし、JavaScriptを学習してみると「思っていたよりも難しい…」と悩む方も多いのではないでしょうか。

今回は、普段からフロント・バックエンド両方の開発をする僕が、

  • JavaScriptを難しいと感じる理由
  • 現実的にJavaScriptを独学で身につけられる範囲
  • 挫折しにくいJavaScriptの学習方法

についてお話していきます。

JavaScriptを難しいと感じる理由

JavaScriptは比較的昔からある言語で、情報量も多く初心者向けの言語と言われています。

しかし、ここ数年JavaScriptは進化が激しく、今や初心者向けの言語とは言えなくなってきました。

初心者がJavaScriptが難しいと感じる理由は大きく以下の4つです。

  1. DOMの理解が必要
  2. 検索で調べると古い情報が出てくる
  3. ブラウザ環境に依存する
  4. JavaScriptの人気フレームワーク・ライブラリにクセがある

DOMの理解が必要

JavaScriptはHTMLとCSSで作られたページに美しいアニメーションをつけるためには必須の知識です。

以下のページのように、スクロールしてふわっと画像が出てくるのもJavaScriptで実現しています。

しかし、このようなアニメーションを作成するためにはDOMの知識をつけておく必要があります。

DOM・・・HTML構造をJavaScriptなどから扱えるようにする仕組み

つまり簡単に言えば、

  • 自分の扱いたい要素(画像)を
  • 正しくJavaScriptで指定して
  • 期待する操作をさせる(スクロールするとふわっと表示)

ことに慣れないうちは、「思うように進められない!」とJavaScriptを難しいと感じる人も多いのです。

検索で調べると古い情報が出てくる

JavaScriptの学習を進めていると、調べるサイトによって書き方の違うことも多く、初心者は難しいと感じます。

一例を挙げてみると、JavaScriptの関数は以下の書式で表されます。

function hoge() { ... }
const hoge = function() { ... }
const hoge = () => { ... }

上記、3つの書き方は、ほとんどのケースで同じ扱いをすることができます(厳密には3つ目だけthisの扱いが違います)。

これらは、JavaScriptの言語仕様やバージョンの違いによりますが、初心者はその判断をすることができません。

したがって、ネットで調べた情報をそのまま使っているのに動かない!という状況にもなりやすいのです。

たかひろ
たかひろ

JavaScriptの変化の速さは現役エンジニアでも追いつくのが大変!

ブラウザ環境に依存する

最近は環境が改善されつつありますが、ブラウザによって動く・動かないということも起こります。

もはや使っている人は少なくなってきましたが、WindowsのInternetExplorerで開発を進めていた人は、かなりつらい思いをしたはずです。Google Chromeなら動くコードもInternetExplorerでは動かないことがあるというのはフロントエンド界隈では有名な話です。

また、Google ChromeとSafariでもJavaScriptの動きが違うことがあります。

開発者ツールもGoogle Chromeが一番使いやすいと感じますし、開発環境はChrome一択でいいかと思います。

人気のフレームワーク・ライブラリにクセがある

JavaScriptは以下の3つのフレームワーク・ライブラリが人気と言われています。

  • React
  • Vue.js
  • Angular

それぞれフレームワークに特徴はありますが、どのフレームワークにも共通してライフサイクルというものがあります。

しかし、このライフサイクルを完全初心者が独学で勉強するのは正直かなり難しいです。

独学のうちは、これらのフレームワークに手を出さないことをおすすめします。

たかひろ
たかひろ

公式ページに沿って勉強すればできなくはないけど難しいのでおすすめしないよ!

 

JavaScriptを独学で習得できる範囲【全て独学は難しいです】

フロントエンドエンジニアを目指してJavaScriptの学習を始めた!という人には言いづらいですが、独学でフレームワークまで習得するのはかなり難しいです。

では、現実的にどのレベルまでなら、独学で可能なのか?と思われるでしょうが、以下の通りかと思います。

  • 独学・・・Webデザイナーレベル
  • 講師あり・・・フロントエンドエンジニアレベル

Webデザイナーレベルなら独学で可能

Webデザイナーと聞くと「デザインをする人」のように思われがちですが、最近のWebデザイナーはコーディングができることまで求められることがほとんどです。

具体的なレベル感で言うと、

  • HTML+CSSを実装
  • 見た目やアニメーションのJavaScriptなら実装
  • jQueryぐらいは使える

といったところです。

このJavaScriptを使って動的に見た目を変更するレベルなら独学でも習得可能です。

アニメーションがきれいにできるパララックスデザインなどが実装できれば、レベルもかなり高いと言えるでしょう。

フロントエンドエンジニアレベルは講師なしでは難しい

一方、ReactやVue.jsなどの学習を講師なしで習得することは、なかなか難しいでしょう。

以下の記事でフロントエンドエンジニアになるための学習方法を解説していますが、最後までできる人は少ないかと思います。

たかひろ
たかひろ

僕は運良く最初の仕事でReactを触れたけど独学では厳しかったと感じるよ!

 

挫折しにくいJavaScriptの学習方法

では、挫折しにくいJavaScriptの学習方法について具体的に紹介していきます。

学習方法をまとめると以下のとおりです。なお、HTMLとCSSは学習できている前提です。

JavaScriptの学習方法
  • ProgateでJavaScriptの基本知識を学ぶ
  • jQuery (JavaScript) でアニメーションありのWebサイトを作る

ProgateでJavaScriptの基本知識を学ぶ

まずは、Progateを使ってJavaScriptの基本知識について学んでいきましょう。

Progateで学習べきなのは以下の講座です。

Progateの中で受けるべきJavaScript講座

上記の学習手順としては、JavaScirpt → jQuery でも jQuery → JavaScript でも、どちらでも構いません。どちらかというとjQueryの方が学習しやすいので、悩む方はjQueryから始めましょう。

とにかく、JavaScriptやjQueryを使ってどんなことができるのか?を把握する学習と思って、講座を終わらせていきましょう。

ProgateでJavaScriptやjQueryを学習するときの注意点は、以下の記事にまとめているので、合わせてご覧ください。
» ProgateでJavaScriptとjQueryを学ぶときの勉強手順や身につくスキル

jQuery (JavaScript) でアニメーションありのwebサイトを作る

続いてProgateで学んだ知識を生かしてアニメーションありのwebサイトを制作していきましょう。

しかし、具体的にどのようなサイトを作っていけばいいのかわからない!思われるかと思います。

そうした方は、写経でアニメーションありのサイトを制作しましょう。教材はUdemyの「フロントエンドエンジニアになりたい人のWebプログラミング入門」の動画をおすすめします。

この動画のとおりに進めていけば、サイトの制作を通じて手を動かしながらJavaScriptの学習ができます。

とにもかくにも、プログラミングは手を動かさないことには始まらないので、お金をかけてでも学習を進めるようにしましょう。

備考:フロントエンドエンジニアの目指し方

これまで紹介してきた内容では、まだWebデザイナーに必要とされるJavaScriptのレベルです。

しかし、もしフロントエンドエンジニアとして活躍を目指すのであれば、

  • React
  • Vue.js
  • Angular

のいずれかのフレームワークについて学んでおいたほうがいいでしょう。

しかし、これらのフレームワークは独学で学習するには難易度が高いため、プログラミングスクールの利用をおすすめします。

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

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

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

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

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

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

 

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

 

まとめ|JavaScriptは難しい!フロントエンジニアを目指すならスクールも要検討

JavaScriptを難しいと感じる理由と学習方法について具体的に解説してきました。

ここまでのポイントをまとめます。

この記事のポイント
JavaScriptが難しい理由は以下の4つ
  • DOMの理解が必要
  • 検索で調べると古い情報が出てくる
  • ブラウザ環境に依存する
  • JavaScriptの人気フレームワーク・ライブラリにクセがある
目的によって学習方法は異なる
  • WebデザイナーレベルのJavaScriptスキルなら独学可能
  • フロントエンドエンジニアレベルを目指すならスクールがおすすめ

最近のJavaScriptは環境の変化が激しく、初心者が情報を見極めるのはますます難しくなっていると感じます。

もちろん、独学も不可能ではありませんが、学習を通して「何になりたいのか」を考えていただけたらと思います。

もし、JavaScriptの学習に挫折しそう・・・という方は、スクールもぜひ検討してみてください。

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