JavaScript、そして React を深く理解するために避けて通れないのが
「式（Expression）」と「文（Statement）」の区別 です。
この違いを理解すると、
- なぜ JSX に
ifが書けないのか - なぜ
x = 1が関数の引数に書けるのか - なぜ Python などを考えると JavaScript がややこしく感じるのか
といった疑問が一気に解消されます。
1. 基本：式と文の役割
| 項目 | 式 (Expression) 💎 | 文 (Statement) 🛠️ 📣🧑🏫👉 |
|---|---|---|
| 役割 | 値を作り出す、計算する | 処理を実行する、構造を作る |
| 結果 | 値を返す（値になる） | 値を返さない（実行のみ） |
| 代入 | 変数に代入できる | 変数に代入できない |
| 例 |
x + 1, true, obj.prop
|
if, for, switch, const
|
2. 言語による「境界線」の違い
「何が式で、何が文か」は言語によって異なります。
特に JavaScript と Python の違い は、「違和感」の正体になりやすいポイントです。
| 比較項目 | JavaScript | Python |
|---|---|---|
| x=1 | 式 | 文 |
代入 (=) |
式（値を返す）console.log(x = 1) が可能 |
文（値を返さない）print(x = 1) はエラー |
| 条件分岐 | 文（if）値を返さない |
文（if）値を返さない |
| 式としての条件分岐 | 三項演算子a ? b : c
|
条件付き式b if a else c
|
💡 JS の特異点
JavaScript では、x = 1 という代入そのものが
「1」という値を返す式 です。
そのため、次のようなトリッキーな記述が可能になります。
そのため、関数の引数の中で代入を行うといったトリッキーな記述が可能になっています。
3. React (JSX) での「式の掟」
ReactのJSX（return ( ... ) の中）にある { } には、「式（値になるもの）」しか書けないという非常に厳しいルールがあります。
❌ 書けない例（文を入れようとしている）
JSXの中で if 文や for 文を直接動かそうとすると、構文エラーになります。
function MyComponent() {
const isLogin = true;
return (
<div>
{/* ❌ 構文エラー：ifは「文」なので中に入れられない */}
{
if (isLogin) {
return <p>ようこそ！</p>
}
}
</div>
);
}
✅ 書ける例（式を入れている）
「値として評価されるもの」であれば何でも書けます。
function MyComponent() {
const isLogin = true;
const users = ["Alice", "Bob"];
return (
<div>
{/* 💎 1. 三項演算子（式なのでOK） */}
{isLogin ? <p>ようこそ！</p> : <p>ログインしてください</p>}
{/* 💎 2. 論理演算子（式なのでOK） */}
{isLogin && <button>ログアウト</button>}
{/* 💎 3. map関数（値を返す式なのでOK） */}
<ul>
{users.map(user => <li key={user}>{user}</li>)}
</ul>
{/* 💎 4. 関数呼び出し（実行結果が値になるのでOK） */}
<p>{new Date().toLocaleDateString()}</p>
</div>
);
}
4. 見分け方のコツ
もっとも簡単な見分け方は、**「console.log() の引数に入れられるか？」**です。
// 【式】は値なので、ログに出せる
console.log(1 + 2); // 3 (OK)
// 【文】は値ではないので、エラーになる
console.log(if (true) { 1 }); // SyntaxError (NG)
💡 疑問：返り値のない関数呼び出しは？
return がない関数（実行すると undefined が返るもの）も 「式」 です。JavaScriptでは、何も返さない関数は暗黙的に undefined という値を返しているとみなされるためです。
function sayA() { console.log('a'); }
const result = sayA(); // resultには undefined が入る (OK)
5. なぜ React でこの知識が必要なのか？
ReactのJSX（return ( ... ) の中）の { } には、「式」しか書けないというルールがあるからです。
{} の中に入れられるもの（式）: map(), 三項演算子, 変数名, 関数呼び出し
{} の中に入れられないもの（文）: if, for, switch, const などの宣言
解決策
JSにおいて if や for は「宝石（値）」ではなく、ただの「命令」です。そのため、JSXの中で条件分岐をしたい場合は、「式」である三項演算子や論理演算子 (&&) を使う必要があります。
6. まとめ
式 (Expression) は「宝石 💎」。評価されると値になり、どこにでも持ち運べる。
文 (Statement) は「道具 🛠️」。何かを組み立てるための命令であり、それ自体を袋（変数や引数）に入れることはできない。
Reactを書くときは、常に「今から書くのは宝石（式）か、道具（文）か？」を意識すると、エラーに悩まされることが少なくなります。