初心者に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ステップで解説します。

tenshoku-miti.com

2023.06.28

たかひろ

僕は運良く最初の仕事で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サイトを制作していきましょう。

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

そうした方は、写経でアニメーションありのサイトを制作しましょう。まずは、以下の記事にまとめているjQueryやJavaScriptの使い方を真似するとよいでしょう。

Webサイトの写経のやり方とレベル別のステップアップ方法を解説します

tenshoku-miti.com

2022.10.31

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

もしくは、YouTube動画を参考にするのもいい学習方法です。例えば、以下の動画などが参考に鳴ります。

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

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

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

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

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

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

おすすめのプログラミングスクールも選んでおいたので、紹介します。

おすすめのプログラミングスクール

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ヶ月ぐらい）。

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

Web食いオンラインの公式サイト

DIVE INTO CODE

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

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

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

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

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

tenshoku-miti.com

2022.09.20

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

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

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

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

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

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

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

tenshoku-miti.com

2022.09.20