📘

【React基礎】JSXでオブジェクトやスタイルを扱う時のルールを理解しよう

に公開
React
初心者
frontend
tech

1.はじめに

前回と前々回の記事でJSXの内容に軽く触れてきました。

再度言いますが、JSXはHTMLのように見えますが、JavaScriptの拡張構文です。

そのため、JSX内でJavaScriptのオブジェクトやスタイルを扱うことができます。

今回は、どのようにしてJSXの中でJavaScriptのオブジェクトを使うのかを解説します！
（私が普段使用している環境がTypeScriptなので、厳密にいうとJSXではなく、TSXについての記事です）

2.テキストとしてJavaScriptを使う

変数や式をタグの中（<h1>...</h1>など）で変数や計算式を扱うには、波括弧{}を使うことで用いることができます。

以下、具体例です。

export default function App() {
    const name = "hello";

    return <h1>My name is {name}!</h1>
}

また、変数だけでなく関数についても変数と同様に波括弧{}の中に記述することで使用することができます。

これについては2パターン存在し、1つは先ほどの変数を用いてテキストのように使用する返り値を持つ関数パターンと関数の副作用を伴うパターンの2種類存在します。

順にみていきます。

1つ目の返り値のみの純粋な関数は以下のようなものとなります。

function greet(text: string) {
    const greetingText = "Hi!" + text;

    return greetingText;
}

export default function App() {
    const text = "hello";

    return (
        <h1>{greet(text)}</h1>
    )
}

2つ目の副作用を伴う関数というのは、主にボタンなどのonClickに適用させる関数などで使用する場面が多いです。

function handleClick() {
    alert("ボタンがクリックされました！");
}

export default function App() {
    return (
        <button onClick={handleClick}>
            button
        </button>
    )
}

3.属性(プロパティ)にJavaScriptを渡す

JSXのタグの属性(プロパティ)にJavaScriptの値を渡す場合も、波括弧{}を使用します。
例えば、src属性に変数を渡す場合は以下のようになります。

export default function Avatar() {
    const avatar = '/image.jpg';
    const description = 'text';
    return (
        <img
            className="avatar"
            src={avatar}
            alt={description}
        />
    );
}

また、スタイル属性にJavaScriptのオブジェクトを渡す場合も波括弧{}を使用します。(二十括弧{{}}になります)

export default function TodoList() {
    return (
        <ul style={{
            backgroundColor: 'black',
            color: 'pink'
        }}>
            <li>item1</li>
            <li>item2</li>
        </ul>
    );
}

もちろん、変数やオブジェクトを使用することもできるため、以下のように書くことも可能です。

const person = {
    name: 'Nyan Cat',
    theme: {
        backgroundColor: 'black',
        color: 'pink'
    }
};

export default function TodoList() {
    return (
        <div style={person.theme}>
            <h1>{person.name}'s Todos</h1>
            <img
                className="avatar"
                src="/image.jpg"
                alt="text"
            />
            <ul>
                <li>item1</li>
                <li>item2</li>
            </ul>
        </div>
    );
}

4.どこまで波括弧の中で書けるのか？

できることとして、先ほども説明した変数、関数の呼び出しの他、参考演算子、数値計算などが使えます。

逆に、for文やif文などのステートメントは使えません。
ですので、JSXの外側に書くか、mapや参考演算子を使って表現する必要があります。

5.まとめ

今回は、JSXの中でJavaScriptのオブジェクトやスタイルを扱う方法について解説しました。

引用符"は静的、波括弧{}は動的に値を扱えることを覚えておくと安心ですね！

6.参考

GitHubで編集を提案

Discussion