JSX での中括弧を使用した JavaScript

JSX を使用すると、JavaScript ファイル内に HTML のようなマークアップを記述できるため、レンダリングロジックとコンテンツを同じ場所に保持できます。マークアップ内に JavaScript ロジックを追加したり、動的なプロパティを参照したりすることが必要になる場合があります。このような場合は、JSX で中括弧を使用して JavaScript への窓口を開くことができます。

学習内容

引用符で囲まれた文字列を渡す方法
JSX 内で中括弧を使用して JavaScript 変数を参照する方法
JSX 内で中括弧を使用して JavaScript 関数を呼び出す方法
JSX 内で中括弧を使用して JavaScript オブジェクトを使用する方法

引用符で囲まれた文字列を渡す

JSX に文字列属性を渡す場合は、単一引用符または二重引用符で囲みます。

フォーク

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

ここでは、`https://i.imgur.com/7vQD0fPs.jpg` と `Gregorio Y. Zara` が文字列として渡されています。

しかし、`src` や `alt` テキストを動的に指定したい場合はどうでしょうか？**`"` と `"` を `{` と `}` に置き換えることで、JavaScript の値を使用できます。**

フォーク

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

画像を丸くする `avatar` CSS クラス名を指定する `className="avatar"` と、`avatar` という JavaScript 変数の値を読み取る `src={avatar}` の違いに注目してください。中括弧を使用すると、マークアップ内で JavaScript を直接操作できるからです。

中括弧の使用：JavaScript の世界への窓口

JSX は JavaScript を記述する特別な方法です。つまり、中括弧 `{}` を使用して JSX 内で JavaScript を使用できます。以下の例では、まず科学者の名前 `name` を宣言し、次に中括弧を使用して `

` 内に埋め込んでいます。

フォーク

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

`name` の値を `'Gregorio Y. Zara'` から `'Hedy Lamarr'` に変更してみてください。リストのタイトルがどのように変わるかを確認してください。

`formatDate()` などの関数呼び出しを含め、中括弧の間ではあらゆる JavaScript 式が機能します。

フォーク

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

中括弧を使用する場所

JSX 内では、中括弧は 2 つの方法でのみ使用できます。

**テキストとして** JSX タグ内で直接使用する場合：`
{name}'s To Do List
` は機能しますが、`<{tag}>Gregorio Y. Zara's To Do List` は機能しません。
属性として = 記号の直後に記述する場合: src={avatar} は avatar 変数を読み取りますが、src="{avatar}" は文字列 "{avatar}" を渡します。

二重中括弧の使用：JSXにおけるCSSやその他のオブジェクト

文字列、数値、その他のJavaScript式に加えて、JSXではオブジェクトを渡すこともできます。オブジェクトも中括弧で表され、{ name: "Hedy Lamarr", inventions: 5 } のようになります。そのため、JSXでJSオブジェクトを渡すには、オブジェクトを別のペアの中括弧で囲む必要があります：person={{ name: "Hedy Lamarr", inventions: 5 }}。

JSXのインラインCSSスタイルでこれを見かけることがあります。Reactではインラインスタイルを使用する必要はありません（ほとんどの場合、CSSクラスで十分です）。しかし、インラインスタイルが必要な場合は、style 属性にオブジェクトを渡します。

フォーク

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

backgroundColor と color の値を変更してみてください。

このように記述すると、中括弧の中にJavaScriptオブジェクトがあることがはっきりとわかります。

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

次回JSXで {{ と }} を見かけたら、それはJSXの中括弧の中のオブジェクトに過ぎないことを知っておいてください！

落とし穴

インライン style プロパティはcamelCaseで記述されます。たとえば、HTMLの <ul style="background-color: black"> は、コンポーネントでは <ul style={{ backgroundColor: 'black' }}> と記述します。

JavaScriptオブジェクトと中括弧を使ったその他の楽しい使い方

複数の式を1つのオブジェクトに移動し、JSXの中括弧内でそれらを参照できます。

フォーク

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

この例では、person JavaScriptオブジェクトには、name 文字列と theme オブジェクトが含まれています。

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

コンポーネントは person からこれらの値を次のように使用できます。

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

JSXは、JavaScriptを使用してデータとロジックを整理できるため、テンプレート言語としては非常にミニマルです。

まとめ

これでJSXについてほぼすべてを理解できました。

引用符で囲まれたJSX属性は文字列として渡されます。
中括弧を使用すると、JavaScriptのロジックと変数をマークアップに取り込むことができます。
中括弧は、JSXタグのコンテンツ内、または属性の = の直後で使用できます。
{{ と }} は特別な構文ではありません。JSXの中括弧の中に埋め込まれたJavaScriptオブジェクトです。

いくつかの課題に挑戦してみましょう

チャレンジ 1の 3:
間違いを修正する

このコードは、Objects are not valid as a React child というエラーでクラッシュします。

フォーク

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

問題を見つけられますか？

前へJSXを使ったマークアップの記述

次へコンポーネントへのPropsの受け渡し

JSX での中括弧を使用した JavaScript

学習内容

引用符で囲まれた文字列を渡す

中括弧の使用：JavaScript の世界への窓口

` 内に埋め込んでいます。

中括弧を使用する場所

{name}'s To Do List

二重中括弧の使用：JSXにおけるCSSやその他のオブジェクト

落とし穴

JavaScriptオブジェクトと中括弧を使ったその他の楽しい使い方

まとめ

いくつかの課題に挑戦してみましょう

チャレンジ 1の 3: 間違いを修正する

チャレンジ 1の 3:
間違いを修正する