JavaScript入門！学習方法を現役フロントエンドエンジニアが解説！

はじめに

今回はJavaScriptの学習方法について解説します。

これからJavaScriptの学習を始めようとしている方の参考になれば幸いです。

前提

①Html & CSS を習得している

あわせて読みたい

これが最速！Html & CSS 学習方法 【この記事を読むメリット】 ・Html & CSSを効率よく学習する方法がわかる ・具体的な教材やアクションプランがわかる ・どこまで技術力が上げれば、Html & CSS...

JavaScriptの学習方法

ステップ1：プロゲートの「JavaScript」コースを３周する（スキップ可）

Progate

Progate(プロゲート) | Learn to code, learn to be creative. Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

プロゲートはゲーム感覚でプログラミングを学習できます。
超初心者向きの良質な教材です。

自信がある人は飛ばしてもOKです。
プロゲートで予習することで、ハードルが大きく下がります。

もしこちらの教材で学習する場合は、１周までにしましょう。
２周、３周しないように注意しましょう。

classという概念が出てきますが、理解できずに流してOKです。
初心者には難しすぎる上に、最近の実務でも使う機会は少ないからです。

ステップ2：ドットインストールのWebサイトに動きをつけてみようを一周する

あわせて読みたい

プログラミングのレッスン一覧 - プログラミングならドットインストール ドットインストールで提供されているレッスンの一覧です。553レッスンを8347本の3分動画で提供中です。

これでJavaScriptの基本を習得できます。
細かい部分はなんとなく知っておく程度で十分です。

スライドショーやモーダルなどの実装方法も紹介されています。
これらは何も見ずにかけるようになる必要は全くありません。
コードを読んで理解できれば十分です。

ステップ3：下記の問題集を解く（スキップ可）

あわせて読みたい

これで完璧！JavaScriptの問題集 【はじめに】 JavaScriptの実装力が格段に上がる問題集を作りました。 これができるようになったら、基礎学習は卒業してOKです。ポートフォリオの作成に進みましょう。 ...

自信がある人は飛ばしてもOKです。
下記のようなよくみるUIを実装できるようになります。

ステップ4：下記のサイトを模写コーディングする

あわせて読みたい

sample

こちらのサイトを模写コーディングしましょう。
これができればJavaScriptの基礎学習は卒業してOKです。

おわりに

最後の模写コーディングができれば実務未経験者の実力としては十分です。

次はreactを勉強するか、実務でググりがなら成長しましょう。

補足

あわせて読みたい

未経験から3年で年収1000万円のフリーランスエンジニアに転職する方法！完全ロードマップ！ 【はじめに】 「高収入のフリーランスエンジニアになりたいものの、何から手をつければ良いかわからない」そんな疑問が解消され、明確なアクションプランを立てることが...