何を見るべきか
TypeScriptはJavaScriptへ型を加える言語、ReactはUIを部品で作るライブラリ、Next.jsはReactアプリにroutingやserver機能を加えるframeworkです。初心者はJavaScriptの基礎から始め、目的に応じてTypeScript、React、Next.jsへ進みます。
React、Next.js、TypeScriptは同じものではありません。役割を分けて理解することが重要です。
QiitaのTypeScriptタグでは、JavaScript周辺技術を整理する記事が人気です。初心者が混乱しやすいテーマだからです。
違い
| 名前 | 種類 | 役割 |
|---|---|---|
| JavaScript | 言語 | ブラウザで動く基本言語 |
| TypeScript | 言語 | JavaScriptに型を足す |
| React | ライブラリ | UIを部品で作る |
| Next.js | フレームワーク | ReactでWebアプリを作りやすくする |
ReactやNext.jsは言語ではありません。JavaScriptやTypeScriptの上で使う道具です。
周辺のNode.jsやViteまで含めて整理したい場合は JavaScript周辺技術が多すぎる理由 を参照してください。
学ぶ順番
最初はHTML/CSS/JavaScriptを学びます。次にTypeScriptで型の考え方を学び、Reactでコンポーネントを作ります。Next.jsはその後で十分です。
手元で段階的に試すなら、TypeScript入門 で型付きの1ファイルを動かし、Reactチートシート でcomponentとstateを確認してから、Next.js 16 App Router入門 へ進みます。
まとめ
周辺技術が多く見える理由は、役割が違う道具が同時に登場するからです。まずは「言語」「UIライブラリ」「フレームワーク」を分けて覚えます。
参考リソース
← 一覧に戻るPR
PR
