この記事の目的
JavaScript, TypeScript, React, Next.jsってそれぞれ何の役割を持っているのか、言語？フレームワーク？ライブラリ？何が違うの？とよく混乱するので整理する。
JavaScript
- Webブラウザが理解できる唯一のプログラミング言語（HTML/CSSは構造や見た目を作るだけ）
- 元々はブラウザで動くためのスクリプト言語だったが、今はNode.jsなどでサーバーでも動く
- 例：
const name = "Taro";
console.log(`Hello, ${name}`);
Typescript
- JavaScriptのスーパーセット （JSに型安全の機能を追加した言語）
- 型定義でミスを減らす＆開発効率を上げる
- 最終的には普通のJavaScriptに変換（コンパイル）されて実行
- 例：
function greet(name: string): string {
return `Hello, ${name}`;
}
↑JavaScriptと違い、関数nameは「String型（文字列型）である」と定義している。
React
- JavaScript（もしくはTypeScript）でUIを作るためのライブラリ
- コンポーネント（パーツ）を組み合わせて画面を作る
- 状態管理やイベント処理など、動的なWebページを作りやすくする
- 例：
function Hello() {
return <h1>Hello, world!</h1>;
}
Next.js
- Reactをベースにしたフレームワーク
- React単体では持っていない「便利機能」（ルーティング、SSR、API Routesなど）をセットで提供
- Reactアプリの実用的なWebアプリ化が超簡単になる
- 例：
export default function Page() {
return <h1>My Next.js Page</h1>;
}
まとめ
JavaScript ← 基礎となる言語
└ TypeScript（JavaScriptを型安全にしたもの）
└ React（UIを作るためのライブラリ）
└ Next.js（ReactにルーティングやSSR等の機能を加えたフレームワーク）