Next.jsとReact.jsとは何か？違いや特徴をわかりやすく実例のコードで解説｜JSXとは？

react and nextjs-prograshi（プロぐらし）-kv React.js
2025/9/25
記事内に広告が含まれていることがあります。

Next.jsとReact.jsは、どちらもWebサイトやWebアプリケーションを開発するために使われるJavaScriptの技術ですが、その役割と機能に違いがあります。

簡単に言えば、React.jsは「部品を作るための道具（ライブラリ）」で、Next.jsは「部品を使って家を建てるための完成キット（フレームワーク）」です。

これらの違いについて、実例を用いて解説しています。

また、ReactやNext.jsを使う上で欠かせない「JSX（.jsx）」についても解説しています。


React.jsとは何か？

React.js（リアクト・ジェイエス）は、ユーザーが目にする画面の一部（UI）を構築するためのJavaScriptライブラリです。

Facebook（現Meta）によって開発されました。


React.jsの特徴

React.jsは、Webページを 部品（コンポーネント）ごとに分けて作ることで、「わかりやすい」「再利用しやすい」「動きのあるUIを作りやすい」を実現しています。

特徴的なのは「仮想DOM」という仕組みで、ページ全体をリロードせずに一部だけ効率よく更新できます。


React.jsの実例

開発環境をPCに構築するのは手間がかかりますが、JS Binのようなオンラインツールを使えば、すぐにReactのコードを試すことができます。

ここでは、React.jsを使ってカウンターを作成する例を紹介します。

HTMLファイルでReactのCDNを読み込みます。

<!DOCTYPE html>
<html>
  <head>
    <!-- ReactのCDN読み込み -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

<div id="root"></div>は、Reactで作成したコンポーネントを表示する領域です。


JS BinでReactを記述するには、JavaScritpの設定で「JSX(React)」を選択します。（JSXとは何かについては後述しています）


変更したら以下のコードを記述します。

// Reactコンポーネント
function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <button onClick={() => setCount((prev) => prev + 1)}>
    {count}
    </button>
  );
}

// 画面に描画
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Counter />);


これでOutputにカウンターが表示されます。


クリックするとカウンターが増えていきます。



コードの解説

// Reactコンポーネント
function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <button onClick={() => setCount((prev) => prev + 1)}>
    {count}
    </button>
  );
}

// 画面に描画
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Counter />);

function Counter() { ... }

  • 関数コンポーネント の定義です。コンポーネント名は Counter。React はこの関数を「UI をどう描くか」を決めるために呼び出します（レンダリング時に実行します）。

const [count, setCount] = React.useState(0);

  • useState は hook(フック, React の組み込み関数）で、コンポーネント固有の「状態（state）」を作ります。
  • 引数 0 は 初期値。最初のレンダー時に count が 0 になります。
  • 戻り値は配列 [現在の状態, 状態を更新する関数] なので分割代入で count（値）と setCount（更新関数）を受け取っています。

※フックの内部は React によってコンポーネントごと・レンダー順に管理されており、関数が呼ばれ直されても同じ hook の「スロット」に対応する状態が返されます（呼ぶ順序が重要です）。

return ( <button onClick={() => setCount((prev) => prev + 1)}>{count}</button> );

  • JSX でボタン要素を返しています。{count} によりボタン内に現在の数値が表示されます。
  • onClick はクリックイベントハンドラで、ボタンがクリックされると () => setCount((prev) => prev + 1)が実行されます。
  • setCount は、useState が返す「状態を更新するための関数」 です。
  • setCount に「関数」を渡すと、React はその関数に 「直前の状態の値」 を引数として与えます。この引数は慣習的に prev や prevState という名前で書かれることが多いです。

const root = ReactDOM.createRoot(document.getElementById("root"));

  • createRoot は React 18 以降の新しいルート作成 APIです。指定した DOM ノード（例：<div id="root">）の内部を React が管理する領域にします。なお、従来の ReactDOM.render は非推奨になっています。

root.render(<Counter />);

  • <Counter />（JSX）を渡して初回レンダリングを行います。
  • React は Counter 関数を呼び、返された要素（ボタン）を仮想 DOM に作り、実際の DOM と差分を取って必要な更新を行います（初回は DOM に挿入）。



JSXとは何か？

JSXは、Reactでコンポーネントの見た目を記述するために使われるJavaScriptの拡張構文です

JavaScriptの中でHTMLのようなタグを書けるようにしたものです。

ReactはJavaScriptを使って画面を作りますが、JavaScriptだけで複雑なHTML構造を書こうとすると、とても読みにくく複雑になってしまいます。

JSXを使うことで、HTMLに非常に近い形式でUIの構造を記述できるため、コードの可読性（読みやすさ）が大幅に向上します。

JSXは何の略？

JSXは、JavaScript XML（または JavaScript eXtension）の略称です。


見た目はHTML、実態はJavaScript

JSXで書かれたコードは、ブラウザが直接理解できるわけではありません。

Babel（バベル）などの特別なツールで通常のJavaScriptの関数呼び出しに変換します。

記述形式特徴
JSX（記述するコード）<button>クリック</button>
変換後のJavaScript (ブラウザが実行するコード)React.createElement('button', null, 'クリック')
Babelとは何か？

Babel（バベル）とは、主にJavaScriptの変換機（トランスコンパイラ（またはトランスパイラ））です。

簡単に言えば、「最新の、または特殊なJavaScriptのコード」を「古いブラウザや環境でも動く通常のJavaScriptのコード」に翻訳・変換するためのツールです。（React.jsは特殊なJavaScriptのコードに該当します）


タグの中にJavaScriptの変数や式を直接埋め込める

JSXの最大の特徴は、タグの中にJavaScriptの変数や式を直接埋め込めることです。これには、波括弧{}を使います。

// JavaScriptの変数
const name = "Prograshi";
const isLogin = true;

// JavaScriptの関数
function formatGreeting(user) {
  return isLogin ? `ようこそ、${user}さん！` : 'ログインしてください';
}

//JSXのコンポーネント
function Greeting() {
  return (
    <div className="container"> 
      {/* 1. 変数を埋め込む */}
      <h1>{formatGreeting(name)}</h1> 
      
      {/* 2. 条件によって表示を切り替える（if文は使えず、三項演算子などを使う） */}
      {isLogin ? (
        <button>ログアウト</button>
      ) : (
        <button>ログイン</button>
      )}
    </div>
  );
}


JSXのファイル拡張子

JSXを使っているファイルでも、基本的には拡張子はそのまま.jsを使用します。

ただし、Reactのプロジェクトでは、JSXが含まれていることをより明確にするため.jsxを使用することも一般的です。

拡張子説明
.js多くのReactプロジェクトで使われる標準的な拡張子です。JSXが書かれていても、ビルドツール（WebpackやViteなど）がJavaScriptとして処理します。
.jsxJSX構文が含まれているファイルであることを開発者に明示したい場合に使用されます。特にReactの初期の頃や、JavaScriptとJSXを明確に区別したいチームで採用されることがあります。
.tsxTypeScript（型定義付きJavaScript）を使うプロジェクトでは、拡張子に .tsx を使います。これはJSXとTypeScriptの両方が含まれていることを示します。


JSXの注意点（ルール）

JSXはHTMLに似ていますが、いくつか異なるルールがあります。

  1. タグは必ず閉じる
    HTMLでは<br>や<img>のように閉じタグがないものもありますが、JSXでは必ずスラッシュ（/）を使って閉じます。
    • 良い例：<img src="..." alt="..." />
    • 悪い例：<img>
  2. 要素は必ず1つの親要素で囲む
    1つのコンポーネントが複数の要素（タグ）を返したい場合、それらを必ず1つのタグで囲む必要があります。
    • 悪い例：<div>...</div><p>...</p>
    • 良い例：<div><p>...</p></div>
    • *親要素に意味のないdivを使いたくない場合は、フラグメント（<></>）を使えます。
  3. HTML属性名の違い
    JavaScriptの予約語と衝突しないように、いくつかの属性名が変わっています。
    • HTMLの class → JSXでは className
    • HTMLの for → JSXでは htmlFor

JSXはReact開発の根幹であり、この構文に慣れることがReact習得への第一歩となります。

ご参考

JSXについての詳しい解説は下記をご参考ください。

＞ 【React】JSXとは何か？特徴や注意点を実例で解説(className, htmlFor, onClick, 変数・式・関数の呼び出し)



Next.jsとは何か？

Next.jsは、Reactをベースにして作られたフレームワークです。

Reactだけでは不足している、Webアプリケーション開発に必要な様々な機能（ルーティング、サーバー機能など）を最初から提供してくれます。


Next.jsでできること

ReactだけだとフロントエンドのUI部分しか作れませんが、Next.jsを使うと次のようなことが簡単にできます。

  • ページ単位のルーティング（/about や /blog などのURLを自動で作れる）
  • サーバーサイドレンダリング (SSR)（検索エンジンに強い）
  • 静的サイト生成 (SSG)（高速で安定）
  • API Routes（サーバーサイドのAPIを一緒に書ける）
  • 画像やフォントの最適化（自動でパフォーマンスが良くなる）

つまり、「Reactだけでは面倒な部分」を便利にまとめてくれるフレームワークです。


Next.jsの実例

Next.jsを使うと、例えば pages/index.js を作るだけでトップページが完成します。

// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>こんにちは、Next.js!</h1>
      <p>これはトップページです。</p>
    </div>
  );
}

これだけで http://localhost:3000/ を開いたら表示されます。
さらに pages/about.js を作れば /about ページも自動生成されます。

// pages/about.js
export default function About() {
  return <h1>Aboutページです！</h1>;
}

わざわざルーティングを設定しなくてもURLが作られるのが便利ポイントです。



JS BinやCodePenでは動かせない

Next.jsはNode.jsで動くフレームワークなので、JS BinやCodePenのような「フロントエンドだけの実行環境」では動かせません。

Node.jsとは？

Node.jsは、サーバーサイドでJavaScriptを実行するための環境です。

通常、JavaScriptはChromeやSafariといったウェブブラウザの中でのみ動くように設計されています。

Node.jsを使うと、JavaScriptをブラウザから切り離し、サーバーやPC上で動く普通のプログラム言語として使うことができます。

なお、 Node.jsは世界最大級のパッケージ管理システムである npm (Node Package Manager) を利用できます。npmを使うと、世界中の開発者が作った便利なライブラリやツールを簡単に自分のプロジェクトに取り込んで使えるため、開発効率が飛躍的に向上します。


ローカルで動かす方法

Node.js をインストールしてから、以下のコードをターミナルで以下を実行すれば、Node.jsを起動することができます。

npx create-next-app@latest my-app
cd my-app
npm run dev

ブラウザで http://localhost:3000 を開けばOKです。


ブラウザで動かす方法

「CodeSandbox」や「StackBlitz」を使えば、Node.js、React、Next.jsをオンラインで実行することができます。

CodeSandboxやStackBlitzは、オンラインでコードを書き、すぐに実行・プレビューできる開発環境を提供するウェブサービスです。これらのツールは「オンラインIDE（統合開発環境）」や「クラウドIDE」と呼ばれます。

「CodeSandbox」や「StackBlitz」のポイント

・インストール不要
Node.js、React、Babel、Webpackなどの複雑な設定やツールを自分のPCにインストールする必要がありません。

・テンプレートが使える
React、Next.js、Angular、Vueなどの人気のあるフレームワークやライブラリのテンプレートが用意されており、クリック一つで開発を始められます。

タイトルとURLをコピーしました