TypeScriptを学ぶためのJavaScript基礎学習ロードマップ

ロードマップ

各項目で絶対に抑えるべきポイント

JavaScript基礎

• JavaScriptの特徴と使用環境
• コンソールの使い方
• 基本的な文法（セミコロン、コメント等）

変数とデータ型

• 変数の宣言（let, const)
• 基本的なデータ型（数値、文字列、真偽値）
• 型の確認方法（typeof演算子）

関数

• 関数の定義と呼び出し
• パラメータと戻り値
• アロー関数

配列

• 配列の作成と操作
• 基本的な配列メソッド（push, pop, slice等）
• 配列の繰り返し処理（for文、 forEach等）

オブジェクト

• オブジェクトの作成と操作
• プロパティとメソッド
• オブジェクトの繰り返し処理（for...in文）

クラス

• クラスの定義と使用
• コンストラクタ
• 継承の基本

イベントハンドリング

• イベントリスナーの追加と削除
• 主要なイベントタイプ（click, submit等）
• イベントオブジェクトの使用

非同期処理

• コールバック関数
• Promise
• async / await

DOM操作

• 要素の取得と操作
• 要素の作成と追加
• 属性の操作

Git / GitHub基礎

• 基本的なGitコマンド
• ブランチの概念と操作
• GitHubの基本
• コミットメッセージの書き方
• プルリクエストの書き方
• コンフリクトの対処
• Issueの扱い方

仮想環境での開発基礎（Windowsの場合）

• Linux基礎
• WSL基礎
• ターミナル操作
• ubuntuの導入と基本操作

Node.js基礎

• node.jsの基礎概念と特徴
• モジュールシステム
• 基本的なファイル操作

npm（Node Package Manager）基礎

• package.jsonの役割と構造
• 依存関係の管理（インストール、更新、削除）
• スクリプトの定義と実行
• リンター（ESLint）とフォーマッター（Prettier）の基本

モジュールハンドラー基礎

• モジュールハンドラーの役割と基本概念（Webpack、Rollup等）
• 基本的な設定ファイルの作成

テスト技法の基礎

• ユニットテストの概念と重要性（Jest、Mocha等）
• テストフレームワーク

TypeScript環境構築 / 基礎

• 型アノテーション、インターフェース等の基本

TypeScriptでNext.js（React）を書くためにJavaScriptの基礎学習で意識すべき項目

モダンな JavaScript 構文

• let と const の使用（var の使用を避ける）
• アロー関数
• テンプレートリテラル
• 分割代入
• スプレッド構文

非同期プログラミングの基礎

• コールバック関数の概念
• Promise の基本的な使い方
• async/await の簡単な例

モジュール化の概念

• import / export 文の基本的な使い方
• モジュール分割の利点

関数型プログラミングの入門

• 純粋関数の概念
• map, filter, reduce の使用

オブジェクト指向プログラミングの基礎

• クラスと継承の基本
• this キーワードの理解
• オブジェクト志向の概念

DOM操作の基礎

• セレクタの使用（querySelector, getElementById など）
• イベントリスナーの追加と削除

デバッグの基本

• console.log の効果的な使用
• ブラウザの開発者ツールの基本的な使い方

エラーハンドリングの基礎

• try...catch 文の使用
• エラーオブジェクトの理解

コードの品質

• 読みやすいコードの書き方（適切な命名、コメントの使用）
• ESLint、Prettier などのリンター / フォーマッターの基本的な使用

パフォーマンスの基本

• 基本的なパフォーマンス最適化テクニック（不要な再描画の回避など）

セキュリティの基本意識

• XSS (クロスサイトスクリプティング) の基本的な理解と対策

関連スクラップ

TypeScriptでNext.js（React）を書くために意識すべきこと