フリーランスエンジニアの雄貴です!
近年のWebサービスではSPAと呼ばれる構成でUIをより良くしているものが増えており、それを実現するReactやVue.jsなどのJavaScriptフレームワークの需要が急激に上がっています。
そのためReactやVue.jsを扱えるエンジニアが求められていますが、あまりいないのが現状です。
その要因としてはReactやVue.jsを学ぶ際の挫折率が高いことが上げられ、掘り下げていくとJavaScriptの基本知識が身についていないエンジニアが多いということが分かります。
ReactやVue.jsなどのJSフレームワークを理解するためにJavaScriptの基礎の理解は必須です。
しかしJavaScriptをどのように勉強すればいいか悩まれてる方は多いのではないかと思います。
今回は現役フロントエンドエンジニアである私の知見を元にオススメの勉強方法を紹介しようと思います!
Youtubeではエンジニアの単価が上がる情報発信しています!
毎週木曜日の21時から、ライブ配信やってますので、気軽にお越しください😁
JavaScriptを書いたことがない方へ
JavaScriptを初めて扱う方に対して、まずはJavaScriptに慣れていただく必要があるので、progateやドットインストールなどのweb教材で軽く触ってもらって、どんなものなのか感じ取ってもらえればと思います。
ドットインストールだと簡単なアプリ作成の教材もあるので、楽しみながら学ぶことができます。
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リストの例として私が作成したものを載せておきます。
こちらReactで作成したものですが、CRUD処理に加えて「検索機能」も付け加えております。(真ん中の「Search Keyword」の部分です。文字を入力したらそれに合致するTodoを表示します。)
JavaScriptの配列操作(mapやfilter)などを使用すれば簡単に実装できるので、是非チャレンジしてみてください!
オススメ教材
上記で述べた基礎知識とアプトプットをどちらも学ぶことができる教材があり、それは
「JavaScript Primer」
です。
JavaScript Primerのweb教材では上記で述べた基礎知識をコンパクトにまとめている点
そして学んだ内容をweb教材の中で自分で記述して確かめられる点が良いです。
例えば、この「実行」という緑のボタンをクリックすると、下の図のようにエディタが開きます。
このエディタには自分で自由にJavaScriptコードを記載できて、説明された内容を即座に確認することができます。
インプットとアウトプットを同時にできる便利な教材です。
また、巻末には演習としてTodoリストを作成する項目があります。
これまで学んできた基礎知識を元にアウトプットもできる優れた教材なので是非使ってみてください!
最後に
JavaScriptの基礎知識のインプットとTodoリストのアウトプットができたら、ReactやVue.jsなどのJSフレームワークの学習に進んでみてください。
学んでいる中でJSの基礎的な部分の理解が足りずにつまづくことがありますが、その際はJavaScript Primerで復習して理解を深めていけば大丈夫です。
私も実務中にJSの基礎部分で詰まって復習する事がよくあります。JavaScriptは奥が深いですからね。。
復習する際にJavaScript Primerをオススメしましたが、より本質的な理解をするのであれば「JavaScript本格入門」という書籍もオススメします。
変数のスコープやlocalstorage, オブジェクトなど本質的な内容を分かりやすく記載しているので、是非ご覧になってみてください!
Youtubeではエンジニアの単価が上がる情報発信しています!
毎週木曜日の21時から、ライブ配信やってますので、気軽にお越しください😁
コメント
コメント一覧 (2件)
学習に役立つ情報をありがとうございます。
現在、「JavaScript Primer」で学習しております。
引き続き、キャリアや技術に関して学ばしていただけると幸いです。
atsuさん、ご感想ありがとうございます!
お役に立てたようでよかったです!
今後も有益な情報を発信して参りますので、よろしくお願いいたします!