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

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

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

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

出典: 10 most popular programming languages: Rise of TypeScript

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

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

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

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

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

目次

JavaScriptを難しいと感じる理由

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

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

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

キャプション
  • DOMの理解が必要
  • 検索で調べると古い情報が出てくる
  • ブラウザ環境に依存する
  • JavaScriptの人気フレームワーク・ライブラリにクセがある

DOMの理解が必要

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

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

出典: https://tech-dig.jp/demo/fuwatto-animation/

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

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

つまり簡単に言えば、

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

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

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

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

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

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

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

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

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

のアイコン画像

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

ブラウザ環境に依存する

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

特に、WindowsだとIEで開発を進めている人もいるかもしれませんが、今すぐGoogle Chromeで開発することをおすすめします。

Google Chromeの公式ページ

なぜなら、フロントエンド界隈ではIEが辛さの原因となることは有名で、同じコードでもGoogle Chromeなら動くケースも多いためです。

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

以下の記事で簡単にGoogle Chromeの開発者ツールも使っているので参考にしてみてください。

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

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

人気JavaScriptフレームワーク・ライブラリ
  • React.js
  • Vue.js
  • AngularJS

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

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

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

のアイコン画像

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

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

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

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

JavaScriptを習得できる範囲
  • 独学・・・webデザイナーレベル
  • 講師あり・・・フロントエンドエンジニアレベル

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

webデザイナーと聞くと「デザインをする人」のように思われがちですが、最近のwebデザイナーはコーディングが求められることも少なくありません。

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

  • HTML+CSSを実装
  • 見た目やアニメーションのJavaScriptなら実装

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

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

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

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

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

フロントエンドエンジニアを目指す方法については、「備考:フロントエンドエンジニアの目指し方」で解説しています。

のアイコン画像

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

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

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

学習方法は以下のとおりです。

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

ProgateでJavaScriptの基本知識を学ぶ

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

出典: Progate

上記の学習手順としては、JavaScirpt => jQueryでもjQuery => JavaScriptのどちらでも構いません。

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

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

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

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

そうした方は、写経でアニメーションありのサイトを制作しましょう。教材はUdemyがいい選択になります。

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

より詳しく学習方法について知りたい方は以下の記事でも解説しているので、合わせてご覧ください。

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

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

  • React.js
  • Vue.js
  • AngularJS

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

しかし、これらのフレームワークは、独学で学習するには少し難易度が高いため、プログラミングスクールを検討するのもいいでしょう。

どれも最近出てきた技術のため学習できるプログラミングスクールはTech Boostしかありません。

TechAcademyのフロントエンドコースにVue.jsが追加されました

TechAcademyでは、1週間の体験期間があり、実際にサポートも受けながら授業を無料で受けることが可能です。

もし、本格的にJavaScriptを学習していくことを考えていきたい人は、無料ですし一度体験して受講を考えてみてはいかがでしょうか。

また、JavaScriptでおすすめのプログラミングスクールについて詳しく知りたい方は以下の記事も参考にしてください。

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

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

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

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

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

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

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

- 3ヶ月でエンジニア転職を目指そう -

  • 解決できないエラーに心が折れた
  • 転職に必要なレベルがわからない
  • 本当に今の学習で転職できるか不安

そんな悩みを持っている人に

現役エンジニアが教える3ヶ月でエンジニア転職を実現する方法

を解説しています。

コメント

コメントする

目次
閉じる