JSX って、どんな機能があるのかな？
今回は、React.js で JavaScript の中に HTML のような書き方ができる JSX について解説します。
React.js の環境構築がまだの場合は、下記より環境構築を行なってください。
JSX とは？
JSX（JavaScript XML）とは、JavaScript の中に HTML のような書き方ができる記法のことで、主に React.js で使われ、画面の見た目（UI）を作るために利用されます。
書いた JSX は最終的に、 React.createElement という JavaScript のコードに変換されて動作します。
// 変換前
<h1>Hello</h1>
// ⬆️ 上のコードは ⬇️ 下のコードに変換される
// 変換後
React.createElement("h1", null, "Hello");なぜ JSX を使うの？
従来のWeb開発 では、HTML・CSS・JavaScriptを別々のファイルで管理する ことが一般的でした。しかし React.js では、機能単位（コンポーネント）で管理する考え方を採用 しています。
JSX を使うことで、見た目（HTML）、処理（JavaScript）、状態管理を1つのコンポーネント内にまとめて書くこと ができ、修正や再利用、保守がしやすくなる のが 大きなメリット です。
JSX のルールと基本的な使い方
それでは、ここから実際に JSX の ルール と 基本的な使い方 について見ていきましょう
必ず1つの親要素で囲む
// ❌ NG
return (
<h1>Hello</h1>
<p>World</p>
);
// ✅ OK 親要素(<div></div>)で囲む
return (
<div>
<h1>Hello</h1>
<p>World</p>
</div>
);
// または、無駄なdivを増やしたくない場合
// Fragment で囲む
import { Fragment } from 'react';
return (
<Fragment>
<h1>Hello</h1>
<p>World</p>
</Fragment>
);
// 上記の「<>〜</>(Fragment)」の省略形で囲んだものと同じ意味
return (
<>
<h1>Hello</h1>
<p>World</p>
</>
);空要素も「〜/>」で閉じる必要がある
JSX では、すべてのタグを閉じる必要がある ため、HTML では省略できる 空要素 も
「/>」で 閉じる必要があります。
// ❌ NG HTMLの場合
<br>
<input type="text">
<img src="/img/photo.jpg">
// ✅ OK JSXの場合 「〜/>」で閉じる
<br />
<input type="text" />
<img src="/img/photo.jpg" />HTMLとは異なる属性がある
// ❌ NG HTMLの場合 class
<div class="box">
// ✅ OK JSXの場合 className
<div className="box">
// ❌ NG HTMLの場合 for
<label for="title">本のタイトル</label>
// ✅ OK JSXの場合 htmlFor
<label htmlFor="title">本のタイトル</label>JavaScript を書くときは { } を使う
JSX 内で {} を使うと、JavaScript の 変数や計算、関数の呼び出し などを 埋め込むことができます
// ✅ OK JSX内でJavaScriptを使うときは 波かっこ {} を使う
const name = "Taro";
return <h1>Hello, {name}!</h1>;
// ✅ OK 計算もできる
<p>{1 + 2}</p> {/* 3 と表示される */}
// ✅ OK 属性値はクォート("")で囲まない
const url = 'https://ja.react.dev/';
<a href={url}>React公式サイト</a>
// ✅ OK 複数の属性値をまとめて設定できる
const attrs = {
href: 'https://ja.react.dev/',
target: "_blank"
}
<a {...attrs}>React公式サイト</a>
// ✅ OK 属性値の既定値は true ※下記のコードは同じ意味
<button disabled>ボタン</button>
<button disabled={true}>ボタン</button>
// ✅ OK 三項演算子
// isLoggedIn が true の場合「ログイン中」、false の場合「ログアウト中」と表示される
{isLoggedIn ? <p>ログイン中</p> : <p>ログアウト中</p>}
// ✅ OK &&演算子 isAdmin が true の場合のみ「管理者です」と表示される
{isAdmin && <p>管理者です</p>}true / false / undefined / null はレンダリングされない（何も表示されない）
JSX では true、false、undefined、null は レンダリングされないため、画面には何も表示されません。※ この仕様は 条件分岐でコンポーネントを表示する際によく利用されます。
// true / false / undefined / null はレンダリングされないため
// 実際の画面には空の <li> 要素だけが表示されます
<ul>
<li>{true}</li>
<li>{false}</li>
<li>{undefined}</li>
<li>{null}</li>
</ul>
// isLogin が false の場合は、何も表示されない
{isLogin && <p>ログインしています</p>}スタイルの設定方法
JSX の スタイルの設定方法 は、CSSのハイフン付きのプロパティ名をキャメルケースに変換 して書きます。
また 値は文字列で任意の単位を指定 でき、数値のみを指定した場合は自動で px として扱われます（例: `padding: 16` → 16px）
/* App.css 外部CSS */
.box {
background-color: skyblue;
color: white;
padding: 16px;
border-radius: 8px;
text-align: center;
}
// App.jsx
import './App.css'; // 外部CSSをインポート
// インラインスタイル（オブジェクト形式）
const boxStyle = {
backgroundColor: 'skyblue', // background-color → backgroundColor
color: 'white',
padding: 16, // 数値のみ → 自動で16px
borderRadius: '8px' // 文字列でも指定可能
};
function App() {
return (
<>
{/* インラインスタイル */}
<div style={boxStyle}>
こんにちは、インラインでスタイルを設定！
</div>
{/* 外部CSSクラス */}
<div className="box">
こんにちは、外部CSSクラスでスタイルを設定！
</div>
</>
);
}
export default App;コメントの書き方
function App() {
// JSXの外（通常のJavaScript）部分のコメント ※1行コメント
const title = "Hello React";
/*
JSXの外（通常のJavaScript）部分のコメント
※複数行コメント
*/
return (
<>
{/* JSX内のコメント */}
<h1>{title}</h1>
</>
);
}配列（map）
map を使うことで、配列の要素を JSX に変換することができ、key 属性 は要素を特定するために必須で、要素が増減しても効率的に更新されるように使われます。
簡単な例では index を key 属性 として使うことがありますが、実際のデータでは ユニークな一意のIDを使うのが望ましい です。
// ✅ OK 配列を map で展開してリスト表示
// ※ key 属性は React で必要なため、簡単な例として index を使用
const fruits = ["Apple", "Banana", "Orange"];
return (
<ul>
{fruits.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
</ul>
);コンポーネントもタグのように書ける
// ✅ OK コンポーネント名は大文字で始める
// 小文字で始めると HTML タグとして扱われてしまいます
function Hello() {
return <h1>Hello!</h1>;
}
function App() {
return <Hello />;
}まとめ
JSX について解説してきましたが、いかがでしたでしょうか？
JSX は、JavaScript の中に HTML のような書き方ができる記法のことで、最終的に React.createElement という JavaScript のコードに変換されて動作します。
また React.js では、1つのコンポーネント内に見た目（HTML）、処理（JavaScript）、状態管理をまとめて書くことができる ため、機能単位で管理しやすくなる という特徴があります。
まずは JSX の基本的な使い方をしっかり押さえ、小さな コンポーネント で試しながら、React.js での フロントエンド開発 の理解をより深めていきましょう。
公式サイト
コメント