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

はじめに

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

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

前提

①Html & CSS を習得している

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

JavaScriptの学習方法

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

JavaScript入門JavaScriptはWebページに動きを加えるだけでなく、サーバーサイド開発にも利用できる汎用的なプログラミング言語です。ブラウザやNode.jsなどさまざまな環境で動作し、フロントエンドからバックエンドまで幅広く活躍しています。ProgateのJavaScriptコースでは、プログラミング初心者でもわかりやすいスライドと演習で、JavaScriptの基礎から実践的なスキルまでを無料で学べ始めることができます。フロントエンドからバックエンドまで幅広く役立つJavaScriptを始めましょう。prog-8.com

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

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

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

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

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

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

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

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

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

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

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

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

https://magicgifted.com/js-goalmagicgifted.com

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

おわりに

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

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

補足

未経験から3年でフリーランスエンジニア年収1000万円を達成する完全ロードマップ【React/JavaScript】「プログラミングを始めたばかりだけど、本当に稼げるようになるの？」 結論から言います。 未経験からフリーランスエンジニアで年収1000万円は、正しい順番で動けば3年で達成できます。…magicgifted.com