JSとJSXの違い
JavaScript（JS）とJSXは、基本的に同じ言語であるJavaScript（ECMAScript）の異なる構文形式ですが、いくつかの重要な違いがあります。
1. 構文
- JavaScript（JS）は、ECMAScript標準に準拠した純粋なJavaScriptのコードです。
- JSXは、JavaScriptの構文を拡張したもので、HTMLライクな構文を使用してReactコンポーネントを記述します。
2. 記述方法
- JavaScriptでは、要素やコンポーネントはJavaScriptの構文に従って記述されます。HTML要素を作成する場合は、createElement()などのメソッドを使用します。
- JSXでは、HTMLライクな構文を使用してReactコンポーネントを記述します。これにより、UIの構造や関係性をより直感的に表現することができます。
3. 変換
- JavaScriptはそのままブラウザやNode.jsなどのJavaScript実行環境で実行されます。
- JSXはBabelなどのトランスパイラによってJavaScriptに変換されます。トランスパイルされたJavaScriptは、Reactが提供するcreateElement()などの関数呼び出しに変換されます。
4. 動的な値の埋め込み
- JavaScriptでは、動的な値を埋め込む際に文字列連結やテンプレートリテラルを使用します。
- JSXでは、JavaScriptの式を
{}で囲んで埋め込むことができます。
以下は、JavaScriptとJSXの比較例です：
// JavaScript
const element = React.createElement('h1', null, 'Hello, world!');
// JSX
const element = <h1>Hello, world!</h1>;
JavaScriptのcreateElement()関数を使用してReact要素を作成する代わりに、JSXではHTMLライクな構文を使用してReact要素を直接記述することができます。