プロになるためのJavaScript勉強法!!

フリーランスエンジニアの雄貴です!

近年のWebサービスではSPAと呼ばれる構成でUIをより良くしているものが増えており、それを実現するReactやVue.jsなどのJavaScriptフレームワークの需要が急激に上がっています。

あわせて読みたい
SPA(シングルページアプリケーション)とは?【モダンフロントの技術を紹介!】 フリーランスエンジニアの雄貴です! 近年、WEBサービス開発でモダンな技術として採用されているSPA Vue.jsやReactなどのモダンフロントの技術を使用しているのは分かる...

そのためReactやVue.jsを扱えるエンジニアが求められていますが、あまりいないのが現状です。

その要因としてはReactやVue.jsを学ぶ際の挫折率が高いことが上げられ、掘り下げていくとJavaScriptの基本知識が身についていないエンジニアが多いということが分かります。

ReactやVue.jsなどのJSフレームワークを理解するためにJavaScriptの基礎の理解は必須です。

しかしJavaScriptをどのように勉強すればいいか悩まれてる方は多いのではないかと思います。

今回は現役フロントエンドエンジニアである私の知見を元にオススメの勉強方法を紹介しようと思います!

目次

JavaScriptを書いたことがない方へ

JavaScriptを初めて扱う方に対して、まずはJavaScriptに慣れていただく必要があるので、progateやドットインストールなどのweb教材で軽く触ってもらって、どんなものなのか感じ取ってもらえればと思います。

Progate
Progate(プロゲート) | Learn to code, learn to be creative. Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
あわせて読みたい
ドットインストール HTML, CSS, JavaScript, PHP, Rubyをはじめ、iPhoneやAndroidアプリの作り方も学べます。豊富な3分動画を見ることで、はじめての人でも無理なくスキルを身につけていくこと...

ドットインストールだと簡単なアプリ作成の教材もあるので、楽しみながら学ぶことができます。

JavaScript勉強法

ここからは本格的にJavaScriptを学んでいきます。

目的としてはReactやVue.jsなどのJSフレームワークを習得するための基礎知識の習得です。

またJavaScriptを完全に理解しないとJSフレームワークに手を出したらいけないということではないです。

Reactなどを学びながらJavaScriptの基礎でつまづいたら、再度復習すれば良いです。

一度学んでおくと「こういうのあったな〜」と何が原因で詰まっているか理解でき、自分でエラーを解決できるようになります。

まずは基礎を全体的に詰め込んでいくのが大事ですね。

身に付けるべき基礎知識

学ぶべきJavaScriptの基礎知識をまとめました。

最初から全てを完全に理解する必要はないので、どういうものなのか概要を理解するスタンスで学べば良いです。

  • 変数、配列、条件分岐、ループ処理 (プログラミング言語全般の基礎部分)
  • クラス、オブジェクト
  • 関数
  • thisの取り扱い
  • 例外処理
  • 非同期処理 (Promise, async/await)
  • 配列操作 (map, filterなど)
  • ECMAモジュール

アウトプット

上記の知識をインプットした後に、JavaScriptのみで簡単なアプリを作ってみましょう。

インプットだけでなく、アウトプットをして初めて使えるスキルとして身につきます。

また作成するアプリはTodoリストが最適です。

Todoリストはアプリケーションの基礎であるCRUD処理を含んでいるので、言語やフレームワークの習得に向いています。

CRUD処理というのはCreate(データ登録)、Read(データ取得(一覧表示))、Update(データ編集)、Delete(データ削除)の頭文字を取ったもので、この4つの機能を含んだものです。

なぜCRUD処理がいいかというと、ReactやVue.jsなどのjsフレームワークはデータを元に様々なUIを実現している技術だからです。

そのためJavaScriptでデータ操作をして様々なUIを実現することに慣れておかないと、ReactやVue.jsを勉強した際に段階を飛ばして学ぶことになるので混乱し挫折してしまいます。

まずは素のJavaScriptのみでデータ操作して簡単なUIを実現できるようにアウトプットしてみましょう!

ちなみにTodoリストの例として私が作成したものを載せておきます。

あわせて読みたい
Todo List ReactでTodoリストを作成

こちらReactで作成したものですが、CRUD処理に加えて「検索機能」も付け加えております。(真ん中の「Search Keyword」の部分です。文字を入力したらそれに合致するTodoを表示します。)

JavaScriptの配列操作(mapやfilter)などを使用すれば簡単に実装できるので、是非チャレンジしてみてください!

オススメ教材

上記で述べた基礎知識とアプトプットをどちらも学ぶことができる教材があり、それは

「JavaScript Primer」

です。

あわせて読みたい
JavaScript Primer - 迷わないための入門書 #jsprimer JavaScriptの基本的な書き方からアプリケーションの作成などのユースケースを学ぶための入門書です

JavaScript Primerのweb教材では上記で述べた基礎知識をコンパクトにまとめている点

そして学んだ内容をweb教材の中で自分で記述して確かめられる点が良いです。

例えば、この「実行」という緑のボタンをクリックすると、下の図のようにエディタが開きます。

このエディタには自分で自由にJavaScriptコードを記載できて、説明された内容を即座に確認することができます。

インプットとアウトプットを同時にできる便利な教材です。

また、巻末には演習としてTodoリストを作成する項目があります。

これまで学んできた基礎知識を元にアウトプットもできる優れた教材なので是非使ってみてください!

最後に

JavaScriptの基礎知識のインプットとTodoリストのアウトプットができたら、ReactやVue.jsなどのJSフレームワークの学習に進んでみてください。

学んでいる中でJSの基礎的な部分の理解が足りずにつまづくことがありますが、その際はJavaScript Primerで復習して理解を深めていけば大丈夫です。

私も実務中にJSの基礎部分で詰まって復習する事がよくあります。JavaScriptは奥が深いですからね。。

復習する際にJavaScript Primerをオススメしましたが、より本質的な理解をするのであれば「JavaScript本格入門」という書籍もオススメします。

変数のスコープやlocalstorage, オブジェクトなど本質的な内容を分かりやすく記載しているので、是非ご覧になってみてください!


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

この記事を書いた人

雄貴のアバター 雄貴 フリーランスエンジニア

【エンジニアの単価が上がる情報を発信中】
27歳未経験からIT業界へ→経験2年半で月商80万達成
React案件で初回契約月105万を実現

エンジニアの心の相談室を毎週木曜実施中

コメント

コメントする

目次
閉じる