本文へスキップ
BecomeCoder
ブログ一覧コース一覧

JavaScript独学ロードマップ｜何から学ぶ？基礎→TS→フレームワークの順序

#JavaScript#独学#ロードマップ#TypeScript#React#Angular

結論：JavaScript独学は「HTML/CSSの土台 → JavaScript基礎文法 → TypeScript → React or Angular」の順で、各ステップを実際にコードを動かしながら進めるのが遠回りしません。 文法を読むだけで終わらせず、ブラウザ上で自分の手で書いて実行することが定着の近道です。

なぜこの順序なのか

「JS 独学 何から」で調べると、いきなりReactの入門記事に飛びついてしまう人が多いのですが、これは遠回りになりがちです。理由は単純で、ReactもAngularも「JavaScriptの上に乗った道具」だからです。土台（HTML/CSS）と素材（JavaScriptの文法）を先に固めておかないと、フレームワークの説明に出てくる「関数」「配列のmap」「オブジェクト」「非同期処理」といった言葉でつまずき、フレームワーク特有の概念なのか素のJavaScriptの話なのかが区別できなくなります。

逆に言えば、次の4ステップさえ順番に押さえれば、遠回りせずに実務レベルのフロントエンド知識まで到達できます。

  1. HTML/CSSで「画面に何かを表示する」土台を作る
  2. JavaScriptの基礎文法（変数・関数・配列・オブジェクト・非同期）を身につける
  3. TypeScriptで「型」という考え方に慣れる
  4. React または Angular でコンポーネント単位のUI構築を学ぶ

ステップ0：HTML/CSSの土台を作る

JavaScriptは「HTMLで作った画面を操作する言語」なので、先にHTML/CSSの基本を知っておくと理解が早くなります。HTMLコースは全22レッスンすべてブラウザでそのまま編集・プレビューでき、タグの基本からFlexboxで横に並べる、レスポンシブの入り口まで無料で実行しながら学べます。すでにHTML/CSSを触ったことがある人はここは飛ばしてステップ1から始めて構いません。

ステップ1：JavaScriptの基礎文法を固める

JavaScriptコースは全28レッスンで、frontmatter上はすべてbrowser実行に対応しており、コードを書いてその場で結果を確認しながら進められます。登録不要・環境構築不要です。

最初の一歩は console.log ― 画面に表示する から。ここから変数、if / else if / else、for / while、関数の定義と進み、配列メソッド ― map / filter / find や オブジェクト ― 名前つきの入れ物 でデータの扱い方を身につけます。

ここで手を抜きがちなのが非同期処理です。フロントエンド開発では「サーバーからデータを取ってくる」場面が必ず出てくるため、Promise と async/await ― 非同期の基本 と fetch ― サーバーからデータを取ってくる は飛ばさずに、実際にコードを動かして理解しておくと後のReact/Angular学習が一気に楽になります。最後は クラス ― 設計図からインスタンスを作る と 総合演習 ― 小さなプログラムを組み立てる で仕上げます。

ステップ2：TypeScriptで型に慣れる

基礎文法が身についたら、いきなりReact/Angularへ行く前にTypeScriptを挟むことをおすすめします。理由は、現場のReact/Angularプロジェクトの大半がTypeScriptで書かれているためで、先に型の考え方に慣れておくとフレームワーク学習中に「型エラーの意味がわからない」という二重の壁にぶつからずに済みます。

TypeScriptコースも全10レッスンがブラウザで実行できます。型注釈 ― 変数に型をつける から始め、関数の型 ― 引数と戻り値、ユニオン型 ― 複数の型を許す、interface ― オブジェクトの型に名前をつける まで進めば、React/AngularのTypeScriptコードを読むのに困らない水準に到達します。

ステップ3：React か Angular でコンポーネントを学ぶ

ここまで来たら、どちらか一方のフレームワークを選んで実際にUIを組み立てる練習に入ります。どちらを選んでも学べる本質（コンポーネント・props・state・イベント処理）は共通しているので、「求人で多く見る方」や「シンプルな方から試したい」という基準で選んで問題ありません。

余裕があれば両方触ってみると、「コンポーネントに状態を持たせる」という同じ概念を、ReactはuseState、Angularはクラスのプロパティと*ngIf/*ngForという異なる書き方で表現していることが見えてきて、理解が一段深まります。

つまずきやすいところ

JavaScript学習で特につまずきやすいのが、実行時に出るエラーメッセージの意味が読み取れないことです。「undefinedのプロパティを読んでエラーになる」「constに再代入してエラーになる」といった典型パターンは、JavaScriptのエラー逆引きにまとまっています。エラーメッセージの文言からその場で該当ページを探せるので、詰まったときのお守り代わりにブックマークしておくと安心です。

TypeScriptに進んだ後は、型エラーで手が止まりがちです。「Type is not assignable」「Object is possibly 'null'」のようなメッセージは初見だと何をすればいいか分かりにくいものですが、TypeScriptのエラー逆引きに代表的なパターンと直し方がまとまっているので、エラー文をそのまま検索する感覚で使ってみてください。

次に読む

← ブログ一覧に戻る