初心者に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が難しいと感じる理由は大きく以下の4つです。

DOMの理解が必要

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

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

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

つまり簡単に言えば、

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

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

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

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

function hoge() { ... }

const hoge = function() { ... }

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

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

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

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

たかひろ

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

ブラウザ環境に依存する

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

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

Day:194
Today:4h 補足: 0h
卒業試験:197h
Total:638.5h 補足Total:50.5

卒業試験44日目
今日もテスト。
主にIE。
IEだけ他のブラウザに比べて使い勝手悪すぎるな。
他のブラウザなら問題ないコードでもIEだと動かないこと多すぎやー。
明日こそテストを終わらせたい…#ウェブカツ#学生割引

— なおちん (@naoching7010) January 24, 2020

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

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

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

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

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

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

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

たかひろ

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

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

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

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

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

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

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

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

といったところです。

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

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

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

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

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

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

JavaScriptの勉強法を調べようとすると意外と具体的な学習方法が出てこないと思われるのではないでしょうか。今回は現役でフロントエンド・バックエンドの両方をこなす僕が学習方法を10ステップで解説します。

wabisabist.com

2022.04.22

たかひろ

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

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

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

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

ProgateでJavaScriptの基本知識を学ぶ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

他にもおすすめのスクールは以下の記事で紹介しているので、ぜひ読んでみてください。
» JavaScriptをゼロから学べるプログラミングスクール【8社比較】

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

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

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

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

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

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

JavaScriptをゼロから学べるプログラミングスクール【8社比較】

wabisabist.com

2022.04.22