JSXっぽく見えるアロー関数の書き方は Vanilla JS でも使える

✅ 概要

React（やNext.js）の影響で「JSXっぽい構文はReactだけのもの」と思われがちですが、実はこれはES6（JavaScriptの標準仕様）に基づいた書き方です。

この記事では、以下の点について整理していきます：

• JSX風アロー関数の正体
• 即時関数（IIFE）との違い
• 三項演算子や関数のネストの応用例

✅ アロー関数の基本と“JSX風”書き方

const add = (a, b) => (
  a + b
);

このように「波カッコ {} ではなく丸カッコ ()」で囲むことで、明示的な return を省略して値を返すことができます。

NGパターン（構文エラー）:

const add = (a, b) => (
  let result = a + b;
  result + 1;
);
// SyntaxError

() で囲まれるのは「式(expression)」でなければなりません。
let や if は「文(statement)」なのでエラーになります。

✅ 三項演算子や改行との組み合わせ

const add = (a, b) => (
  a > 0
    ? a + b
    : 0
);

可読性も高く、JSXの中でもよく使われる形です。

✅ 即時関数との違い

(() => {
  console.log("これは即時関数（IIFE）");
})();

JSX風の (() => ()) とは別物で、定義してすぐに実行される関数です。
中身が複雑になると {} を使う必要があります。

✅ まとめ

• JSX風アロー関数は、ただのES6の構文
• () は 1行の値（式）だけを返すときに使える
• let や if を使いたいときは {} が必要
• JSXで使われる構文は、実はVanilla JSでも使える！