React 変数を文字列に含める

Reactでは、JSXの波括弧内にJavaScript式を書くと、変化する値とテキストを組み合わせられます。たとえば、className={type + "Box"} は文字列連結を使い、className={`${type}Box`} はテンプレートリテラルを使います。ReactはJavaScriptライブラリであり、JSXを使うとマークアップに似た構文でこれらの式を書けます。

文字列連結でReactの変数を文字列に含める

この例では、type は文字列 "large" なので、type + "Box" は2つの値を連結して "largeBox" を生成します。両方のオペランドが数値の場合、+ は加算を行います。Reactコンポーネントでは、この式をJSXの波括弧内に置き、属性値として使います。type が変わると、次のレンダー時にReactは新しく連結された値を受け取ります。次の実行可能なJavaScript例は文字列操作だけを切り出したもので、ReactやJSXをレンダーするものではありません。

この例を実行します。

const type = "large";
const className = type + "Box";
console.log(className);

largeBox

+ を使うと、空白を独立した文字列として含め、複数の部分を連結できます。たとえば、firstWord + " " + secondWord は2つの値の間に空白を1つ入れます。空白を明示的に追加しないと、単語はつながって表示されます。JSXでは、<h1>{firstWord + " " + secondWord}</h1> のように、式全体を波括弧の中に書きます。波括弧はJavaScript式を示すもので、結果のテキストには含まれません。

連結する部分が少なければ、文字列連結は簡潔です。値や句読点、空白が複数ある場合は、+ を繰り返すと意図する文が読み取りにくくなることがあります。テンプレートリテラルも、同じ文字列を組み立てる方法の1つです。

テンプレートリテラルでReactの変数を文字列に含める

テンプレートリテラルでは、バッククォートで囲んだ文字列に ${...} を使って式を埋め込みます。JSXでは、className={`${type}Box`} のように、テンプレートリテラルを属性値の波括弧で囲みます。type が "large" の場合、JavaScript式は文字列連結と同じ largeBox を生成します。この書き方は、文字列に複数の値を組み合わせる場合や空白が必要な場合に便利です。周囲のテキストが1つの読みやすいテンプレートにまとまるためです。プレースホルダーの間にある文字は結果にもそのまま含まれます。表示する名前の間に空白を入れるには、${firstName} と ${lastName} の間に空白を直接書きます。同じ方法で、カンマ、コロン、単位の接尾辞などの句読点やラベルも含められます。テンプレート式の評価結果は1つのJavaScript文字列です。JSX要素を追加したり、埋め込む値を変更したりするものではありません。見出しの例のように、JSXのテキスト内では式を波括弧で囲みます。className などの属性では、属性値の波括弧の中にテンプレートリテラルを置きます。コンポーネントのレンダー時に、Reactはその文字列をテキストまたは属性値として受け取ります。結果で空白が足りない場合は、JavaScriptの値を変更する前に、各プレースホルダーの周囲にある文字を確認してください。

たとえば、const firstName = "Ada" と const lastName = "Lovelace" を定義すると、JSXではテンプレートリテラル式 Hello, ${firstName} ${lastName}! を使って、<h1>{`Hello, ${firstName} ${lastName}!`}</h1> のように見出しを表示できます。JavaScript式を囲むJSXの波括弧と、テンプレートリテラルを囲むバッククォートをそれぞれ残してください。短い連結には文字列連結を使い、補間によって長い文字列が読みやすくなる場合にはテンプレートリテラルを選びます。どちらもReactで使える通常のJavaScript文字列を生成します。