JSXの記述方法

Next.jsやReactなどの.jsxでのプログラムの記述について紹介します。

JSX（JavaScript XML）とは

JavaScript の構文拡張です。HTMLやCSSなどで分けて記述していた内容をJavaScript のファイル内に記述できるようにするものです。

JSXはブラウザ実行を行う前に通常のJS（JavaScript）に変換を行います。
変換にはトランスパイラと呼ばれるツールが利用されます。

例えば、下記のようなJSXのプログラムがあった場合に、

const testName = <p>こんにちは</p>;

次のような通常のJSプログラムに勝手に読み替えてくれます。

const testName = React.createElement("p", null, "こんにちは");

このように、JavaScriptではわかりにくいプログラムを、HTMLに慣れている人であればわかりやすい形で記述できるのがJSXになります。

実際の記述

基本的な記述

import React from 'react';　//Reaceの読み込み

const testData = ()=>{
  const cost = 500;
  let count = 6;

  return(
    <div>
      <h1>合計{cost * count}円になります</h1>;  //定数や変数の利用ができる
      {count >= 10 && <p>10点以上のお買い上げです</p>}  //条件分岐も使える
    </div>
  };
};

export default testData;

CSSの記述を追加

import React from 'react';　//Reaceの読み込み

const testData = ()=>{
  const cost = 500;
  let count = 6;
  const styles = {
    backgroundColor:"black",
    color:"white"
  }

  return(
    <div style={styles}>
      <h1>合計{cost * count}円になります</h1>;  //定数や変数の利用ができる
      {count >= 10 && <p>10点以上のお買い上げです</p>}  //条件分岐も使える
    </div>
  };
};

export default testData;

HTMLと異なる記述

クラス要素

<h1 class="testName">おはよう</h1> //HTML
<h1 className="testName">おはよう</h1> //JSX

ボタン要素

<button onclick={handle_click}>確認</button> //HTML
<button onClick={handleClick}>確認</button> //JSX

画像要素

<img src="imageName.png"> //HTML
//JSX publicディレクトリに画像を保存
<img
  className="header_logo"
  src="basic_img/logo1.png"
  alt="サイトロゴ"
/>