こんにちは、Reiです！
Reactの学習で最も大きな変化を感じるのが、
「JavaScriptの中に画面の見た目を書ける」という点です。
Reactでは、
JavaScriptの中にHTMLのような見た目を直接書き込める
「JSX（ジェイエスエックス）」 という記法を使います。
最初は少し不思議に見えるかもしれませんが、
ルールを理解すると
「画面を作るためのコード」がとても分かりやすくなります。
今回は、JSXの基本と、
最初に必ず押さえておきたいルールを整理していきましょう！
JSXとは？
JSX（JavaScript XML）とは、
JavaScriptの中でHTMLのような形でUIを書ける記法のことです。
Reactは、画面の見た目を作るためのJavaScriptライブラリです。
そのReactで画面を書くときによく使われるのが、JSXです。
たとえば、Reactでは次のようなコードを書きます。
const App = () => {
return <h1>こんにちは！</h1>;
};見た目はHTMLのようですが、
これはJavaScriptの中で使う JSXの構文 です。
このようにJSXは、実際はJavaScriptの中で動く仕組みです。
最初は「これHTMLじゃないの？」と混乱しやすいポイントでもあります。
Reactでは、このJSXを使うことで
「どんな画面を表示したいのか」を直感的に書けるようになります。
見た目はHTMLに近いですが、実際はJavaScriptの中で動いています。
この「見た目はHTML・中身はJavaScript」というギャップが、最初につまずきやすいポイントでもあります！
Reactを画面に映し出す「起点」を作る
Reactでは、JSXで画面を書いただけでは
まだブラウザには表示されません。
まずは、
「どこにReactの画面を表示するのか」を決めて、
その場所にReactの内容を読み込む必要があります。
通常 src/index.js や src/main.jsx のようなファイルに書きます。
このファイルでは、
「どこにReactの画面を表示するのか」を決めて、
実際に画面へ反映する処理を行います。
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
// 1. HTML側にある <div id="root"></div> を取得
const rootElement = document.getElementById("root");
// 2. React専用の「ルート（起点）」を作成
const root = createRoot(rootElement);
// 3. 画面に反映（レンダリング）を実行
root.render(
<StrictMode>
<App />
</StrictMode>,
);このコードでは、
HTMLの中に用意されている表示エリアを取得して、
Reactの画面を id="root" が付いた場所へ表示しています。
JJSXで書いた内容は、そのままでは画面には表示されません。
root.render() を通して、はじめてブラウザに反映されます。
そのため、画面に何も表示されない場合は、
この「描画の処理」が正しく行われているかも確認する必要があります。
StrictMode とは？
root.render の中で全体を囲んでいる StrictMode は、
開発中に気づきにくい問題を見つけやすくするための仕組みです。
たとえば、
- 非推奨の書き方が使われていないか確認しやすくする
- 副作用の書き方に不自然な点がないか気づきやすくする
- 将来的に不具合につながりやすい書き方を見つけやすくする
といった役割があります。
最初のうちは
デバッグのために console.log() などで動きを追う際に「なぜ同じ処理が2回動いたように見えるの？」と戸惑うことがありますが、
これは開発中に問題を見つけやすくするための確認動作です。
最初は少し不思議に感じても、
開発中のミスに気づきやすくするための仕組みだと分かると、戸惑いにくくなります。
少なくとも、いつでも本番で同じように2回実行されるわけではありません。
JSXの記事としては少し脇道ですが、
Reactの画面が「どうやってブラウザに表示されるのか」という流れを知っておくと、React全体の流れがつかみやすくなります！
返す要素は1つにまとめる
JSXを書くときに、
最初につまずきやすいのが
「返せる要素は1つにまとめる必要があります」 というルールです。
たとえば、次のようなコードはエラーになってしまいます。
const App = () => {
return (
<h1>こんにちは！</h1>
<p>Reactを学びましょう</p>
);
};この場合、
Adjacent JSX elements must be wrapped in an enclosing tag.という、
「並んでいる要素は1つの親タグで包んでください」というエラーメッセージが出てしまいます。
このエラーが出てしまう原因は、
JSXでは並んだ複数の要素をそのまま返すことができないためです。
JavaScriptの関数は、
基本的に一度に1つのまとまりとして値を返します。
そのため、JSXでも
「見た目上は複数のタグを書いていても、全体としては1つに包む」
必要があるのです。
複数の要素をまとめる 「フラグメント」
この問題を解決するのが、
React独自の便利なタグ 「フラグメント（Fragment）」 です。
const App = () => {
return (
<>
<h1>こんにちは！</h1>
<p>Reactを学びましょう</p>
</>
);
};<>...</> は、
複数の要素をひとつにまとめるための「見えない箱」です。
最初は <div> で囲みがちですが、 気づくと「divだらけのHTML」になりやすいです。
そんなときにフラグメントを使うと、余計なタグを増やさずにまとめられます。
通常の <div> で囲んでも同じように表示できますが、
フラグメントを使うとブラウザへ表示されるときも <>...</> 自体は残らないので、
HTMLの構造を必要以上に増やさずにまとめることができます。
JSXの中でJavaScriptを使う 「 { } 」
JSXの大きな強みは、
タグの中にJavaScriptの値や式を埋め込めることです。
そのときに使うのが { } です。
{ } の中に書けるのは、
変数・計算式・条件式のような 値として扱えるもの です。
const App = () => {
const name = "React太郎";
return (
<>
<p>私の名前は {name} です。</p>
<p>1 + 1 は {1 + 1} です。</p>
</>
);
};このコードでは、
{name}で変数の値を表示する{1 + 1}で計算結果を表示する
ということを行っています。
JSXでは、HTMLのような見た目の中に
JavaScriptの値をそのまま差し込めるのが { } の特徴です。
「表示」と「データ」が離れないので、何を出しているのかが分かりやすくなります。
この書き方に慣れてくると、
「どの値がどこに表示されているか」が自然に分かるようになります。
JSX内のコメントの書き方
JSXの中では、普通のJavaScriptコメントをそのまま書くことはできません。
コメントを書くときは、次のように書きます。
{/* ここにコメントを書く */}少し独特に見えますが、
JSXの中ではコメントも { } の中に入れて書く必要があります。
これは、
JSXの中ではコメントもJavaScriptの一部として扱う必要があるためです。
JSXでのCSSクラスの指定の仕方
JSXでは、
CSSクラスを付けるときの書き方が、
HTMLとは少し違います。
HTMLに慣れていると、つい class と書いてしまってエラーになります。
ここはほぼ全員が一度はハマるポイントです。 JSXでは書き方が変わるので注意しましょう！
const App = () => {
return <h1 className="title">こんにちは！</h1>;
};このように、
Reactでクラス名を付けたいときはclassName を使って書きます。
style を直接書く方法もありますが、
見た目を整える場面では className と CSS を組み合わせる書き方のほうが全体を整理しやすくなります。
表示を切り替える 「条件付きレンダリング」
「ログインしているときだけ表示したい」みたいな場面はよく出てきます。
Reactでは、こうした表示の切り替えもJSXの中で書けます。
こうした場面では、{ } の中で条件分岐を書くことで、
表示する内容を切り替えることができます。
このように、
条件によって表示するものを切り替える書き方を
条件付きレンダリング と呼びます。
Reactでは、このような表示の切り替えを
JSXの中でそのまま書けるのが特徴です。
1. 三項演算子を使う
条件によって2つの表示を切り替えたいときは、
三項演算子を使うと、「条件がtrueのときはこれ、falseのときはこれ」と
1つの式の中で切り替えを書けます。
JSXの中で表示の分岐をそのまま表せるので、
「どの条件で何が表示されるか」を見た目に近い形で追いやすくなります。
const App = () => {
const isLoggedIn = true;
return <>{isLoggedIn ? <p>ログイン中</p> : <p>ログアウト中</p>}</>;
};この書き方では、isLoggedIn が true なら「ログイン中」、false なら「ログアウト中」が表示されます。
表示パターンが2つにはっきり分かれるときは、
三項演算子にするとJSXの中でも流れが見やすくなります。
2. && を使う
&& を使った書き方も、Reactではよく使います。
たとえば
「ログイン中のときだけ名前を出す」
「管理者のときだけボタンを出す」など、
特定の条件を満たしたときだけ表示させたい時に大活躍します。
const App = () => {
const isAdmin = true;
return <>{isAdmin && <button>管理者用設定</button>}</>;
};これは、isAdmin が true のときだけ<button>管理者用設定</button> を表示し、false のときは、右側は表示しません。
このように、JSXでは
JavaScriptの条件分岐をうまく使いながら
表示の切り替えをシンプルに書くことができます。
JSXの中で if は使えるの？
ここで気になりやすいのが、
「if は使えないの？」という点です。
結論から言うと、if 文そのものを JSX のタグの中へ書くことはできません。
たとえば、次のように { } の中で if を書くことはできないのです。
return (
<>
{if (isLoggedIn) {
<p>ログイン中</p>;
}}
</>
);JSXの { } の中に書けるのは、
最終的に値として扱える式です。
一方で if は文なので、そのまま埋め込むことはできません。
そのため、JSXの中で表示を切り替えたいときは、
三項演算子や && を使う必要があります。
JSXを使うと何がうれしいの？
ここまでを見ると、
「HTMLっぽく書けるのは分かったけど、何が便利なの？」
と感じるかもしれません。
JSXの良さは、
「表示」と「データ」を同じ場所で一緒に書けることです。 そのため、「この値がどこに表示されているのか」が迷いにくくなります。
たとえば、
- どんな見た目を表示するのか
- どの変数を表示に使うのか
- どの条件で表示を切り替えるのか
といったことを、
JavaScriptの処理と画面の見た目を
同じファイルの中でまとめて書けます。
そのため、
「どのデータがどこに表示されるのか」
「どの条件で見た目が変わるのか」
を追いやすくなります。
また、画面の一部分ずつを細かく作って、
あとから組み合わせながら大きな画面にしていきやすいのも、
JSXの良さのひとつです。
JSXは「見た目」と「表示に使うデータ」を近い場所で管理しやすいので、
画面とロジックのつながりも追いやすくなります。
まとめ
今回は、Reactで画面を作るための基本となるJSXについて整理しました。
＼＼ 今回のまとめ ／／
・ JSXは、JavaScriptの中でHTMLのように画面を書ける記法
・ Reactの画面は root.render() を使って表示する
・ JSXでは、複数の要素を返すときは1つにまとめる必要がある
・ フラグメント <>...</> を使うと余計なタグを増やさずにまとめられる
・ CSSクラスを付けるときは class ではなく className を使う
・ { } を使うと、JSXの中で変数や条件分岐を扱える
JSXのルールに慣れてくると、
Reactで画面を作る感覚がかなりつかみやすくなります。
最初は少し独特に見えても、
書き方の意味がつながってくると「なぜこの形で書くのか」が見えやすくなってきます。
次は、Reactプロジェクトに最初から用意されているファイルついて見ていきましょう！
コメント