JavaScriptを最速で学ぶには？初心者向けロードマップ

よくある失敗

基礎的な知識を最初に全部入れようとしてしまう。

JavaScript で出来ることがかなり多くなっている為、全て学ぶのにはかなりの時間がかかります。

逆に最初から高度な実践的なことをしようとする。

基礎的なことが身についていないと、その時だけ実装できてもよく分からないまま終えてしまうので、応用が効かなかったり、あとで修正できなかったりする。

ではどのように学んでいったらいいのか？

まずは、サイトを作る上での基本的なJSと実装から（参考となる動画リストはこちら）

基礎知識

• イベント処理（クリック, スクロール）
• クラスの切り替え
• 配列・オブジェクト
• for文
• 関数
• 要素の取得
• if文 など

基本的な実装

• ローディングアニメーション
• スライダー（Swiper）
• ハンバーガーメニュー
• モーダルウィンドウ
• タブの切り替え など

実際にこれらの技術を使って、サイトを構築してみる。

基礎知識や、基本的な実装を学んだだけだと、イマイチイメージが湧きにくいことが多い為、上記の技術を採用しているサイトの模写をするなどすることによって、技術を定着させる。

さらにレベルの高い技術を習得する

さらに深い基礎知識

• Dateオブジェクト
• 属性の取得・設定
• setTimeout, setInterval, requestAnimationFrame
• アロー関数
• テンプレートリテラル
• filter, find, sortなどの配列メソッド
• 参照渡し
• ローカルストレージ
• fetch API

これらの技術を把握したら、実際に使ってサイトを構築してみる。
この辺りの技術を習得すると、Webサイトだけではなく簡単なWebアプリケーションなども作れるようになるし、アプリのほうが複雑になりやすいので、勉強になる。
個人的には、様々な要素が入りやることが多いゲームの制作がおすすめ

アプリケーションの例

デイリータスクトラッカー

• Dateオブジェクトを使用して、今日の日付を表示。
• ユーザーからの入力を受け取り、タスクを配列に保存。
• filterやsortでタスクを整理。
• setTimeoutを使用して、特定の時間にアラートを表示。
• ローカルストレージを使って、データを永続化

デジタルクロック

• Dateオブジェクトで現在の時刻を取得。
• requestAnimationFrameを使用して、常に時間を更新。
• テンプレートリテラルで、時間、分、秒を整形して表示。

シンプルな天気アプリ

• fetch APIを使って、オープンソースの天気APIから天気情報を取得。
• 取得したデータから、今日の天気や気温をテンプレートリテラルを使って表示。

画像ギャラリー

• fetch APIで、オープンソースの画像API（例: Unsplash API）から写真を取得。
• filterやfindを使って、ユーザーのキーワードに基づいて写真を選択。
• requestAnimationFrameでスムーズな画像のトランジションを作成。

TODOリスト

• ユーザーからの入力を受け取り、TODOアイテムを配列に追加。
• filterやsortでアイテムを整理・表示。
• 各アイテムには、作成日時をDateオブジェクトで表示。
• ローカルストレージを使って、データを永続化

カウントダウンタイマー

• ユーザーに目的の日時を入力させる。
• Dateオブジェクトを使用して現在の日時との差を計算。
• requestAnimationFrameで1秒ごとに残り時間を更新。
• 時間が0になったらアラートや音を鳴らす。

シンプルなクイズアプリ

• ユーザーが答えを選択したら、正解かどうかをチェック。
• filterやfindを使って、ユーザーの答えと正解を比較。
• スコアや正解数をDateオブジェクトでタイムスタンプとともに表示。
• ローカルストレージを使って、クイズを追加・編集・削除できるように。

動的背景色の変更

• setIntervalを使用して、一定の間隔で背景色を変更。
• 色の配列からランダムに色を選び、属性の取得・設定で背景色を変更。

動画で配信している例

• Webアプリを作ってみよう！JavaScriptで戦闘ゲーム制作！
• パスワードジェネレーターを１から作ってみましょう！JavaScriptでWebアプリケーション作成！の動画リスト
• JavaScriptで数を当てるゲーム シリーズ！

Vue.jsやReact.jsの基礎を学ぶ

ここまでのJSのアプリ作成などが出来ると、VueやReactなどの学習に入りやすいので、それぞれの基礎を勉強していく。

Vue.jsの動画リストはこちら

基礎的なことが分かったら、今度はJSのアプリ制作で作った作品をVueやReactで書き換えてみる。

そうすると、JSとの違いが分かるのでおすすめ！

Nuxt.jsやNext.jsなどを学ぶ

同じようにNuxt.jsやNext.jsの基礎知識を学んだ後、VueやReactの練習で作ったアプリなどをNuxt.jsやNext.jsの技術で作り変えてみる。

TypeScriptやWebGLなどの技術も基本的には同じ！

TypeScriptやWebGL（Three.js）などの言語も同じような流れで習得することができる。

1. 基礎的な知識をある程度身につける
2. その知識を使ってサイトやアプリケーションを作ってみる。
3. さらに高度な知識を学習する
4. その知識を使ってサイトやアプリケーションを作ってみる。

つまり、基礎的な学習をし、その後それらの知識を使って実践的に何か作ってみることを繰り返していくことで、様々な言語やツールを身につけていくことが出来る。

ぶつかることがあったり、不安なことがあったら、相談してください。

どうしても分からなくなったり、本当にこれであっているのか？が分からなくなることもたくさん出てくると思います。
そんな時は、個別で講義もやっていますので、お気軽にご相談ください！