React未経験なので公式チュートリアルから学んでみる Part3（JSX内で変数を使う）

はじめに

今回も個人的なReactの学習記録になります。

前回はこちら
初回はこちらから

前回はJSXの基本的なルールを確認しました。
今回はそのJSXの中で変数を使う方法を学んでいきます。

JSX内での変数の使用

JSXは、JavaScriptオブジェクトに変換されてから画面描画が行われます。

JSX内にそのまま変数を記載したとしても、それが文字列なのか、変数なのかの判断ができず、変換処理が行えません。

試しにやってみましょう。App.jsを編集します。
（App.jsについては初回記事のこちらを参照してください）

App.js(関数のみ抜粋)

function App() {
  let name = 'Taro';
  return (
    <h1>Hello name!</h1>
  );
}

結果はこのようになります。

nameという変数を用意していますが、「name」という文字列として出力されます。

変数を正しく出力するためには、変数部分を{}(波括弧)で囲みます。

App.js(関数のみ抜粋)

function App() {
  let name = 'Taro';
  return (
    <h1>Hello {name}!</h1>
  );
}

先ほどととは異なり、「Taro」が出力されています。

JSXはJavaScriptオブジェクトに内部で変換されますが、変換のときに{}で囲まれた部分は変数であると認識されるので、適切に置き換えてくれる、というわけです。

JSX内にいろいろ書いてみる

変数を波括弧で囲む、といいましたが、実は変数に限らず何でも書くことができます。
{}内で囲まれた部分はただのJavaScriptとして認識されるのです。

どういうことか確認してみましょう。

App.js(関数のみ抜粋)

function App() {
  let name = 'Taro';
  let fn = () => {
    console.log('clicked!');
  }

  return (
    <>
      <h1>Hello {name}!</h1>
      <div>1 + 1 は {1 + 1}です。</div>
      <div>これはコメントじゃないです。{/* これはコメントです*/}</div>
      <div>{// 1行コメントもかけます。※末尾の括弧は改行しないとダメです。
      } コメントではありません。
      </div>
      <button onClick={() => { alert(('clicked')) }}>click me!</button>
      <button onClick={fn}>CLICK ME!</button>
    </>
  );}

画面表示では以下の通り表示されます。

1つずつ確認していきましょう。

変数

<h1>Hello {name}!</h1>
こちらは先ほど確認したとおり、変数です。

四則演算

<div>1 + 1 は {1 + 1}です。</div>
こちらは足し算です。波括弧で囲まれていない部分は文字列として出力されますが、囲まれている部分は計算後の結果が出力されています。

コメント

<div>これはコメントじゃないです。{/* これはコメントです*/}</div>
このように波括弧の中にはコメントもかけます。波括弧内の文言は画面に出力されていないことがわかります。
なお、1行コメントも書くことができますが、波括弧の末尾がコメント行と同じ行にあるとコメントアウトされてしまうので、改行する必要があります。
個人的には/*...*/のコメントが使いやすいのでは、と思います。

ラムダ式

<button onClick={() => { alert(('clicked')) }}>click me!</button>
JavaScriptであれば何でも書けるので、このようにラムダ式も記載することができます。
小文字のclick me!ボタンを押下するとアラートが表示されます。

前回の記事で、
※onClickの中身が先ほどの例と少し変わっています。こちらの記法については次回以降で説明します。
と記載している部分がありましたが、それがこの記載になります。

関数式　

<button onClick={fn}>CLICK ME!</button>
また、イベントハンドラーには関数式を代入した変数も扱うことができます。
大文字のCLICK ME!ボタンを押すとコンソールに出力されることが確認できるかと思います。

ポイントは丸括弧をつけないことです。fnはOKですが、fn()はダメです。
関数式を代入した変数に、fn()のように丸括弧をつけると関数の実行になります。
関数をそのままイベントハンドラーに渡してあげる必要があるため、丸括弧を付けてはいけません。

これまで確認してきたとおり、{}の中には変数に限らず様々なものを書くことができます。
JSXの中で{}の中は、ただのJavaScriptとして内部で処理されるためです。

オブジェクトを使ってみる

JSX内でJavaScriptを書く方法について学んだので、少し複雑なことをやってみます。
JSX内でスタイルを直接記載してみましょう。

App.js(関数のみ抜粋)

function App() {
  return (
    <div style={{ color: "red", fontWeight: "BroadcastChannel" }}>Hello World!</div>
  );
}

結果は以下の通り表示されます。

JSXではstyle属性の指定もできます。
style属性に波括弧が2重になった記載が指定されていますが、一つずつ見れば難しくはありません。
まず、外側の波括弧はJavaScriptの記載をするための記法です。
そして、内側の波括弧はJavaScriptにおいてオブジェクトを記載するための記法です。
よって、JSX内でJavaScriptのオブジェクトを定義している、ということになります。

キーにプロパティ、バリューにプロパティ値を設定したオブジェクトを、style属性に渡すことでスタイルを設定することができます。
※もちろん、cssファイルを作成し、className属性に指定したクラスでスタイルを設定することもできます。

では、これを踏まえてもう1つ試してみます。
personというキーに文字列のバリューを、
styleというキーにオブジェクトのバリューを設定します。

App.js(関数のみ抜粋)

  let obj = {
    person: "Taro",
    style: { color: "red", fontStyle: "Italic" }
  }
  return (
    <h1 style={obj.style}>Hello {obj.person}</h1>
  );

このように表示されるはずです。

obj.styleは中身がオブジェクトです。
先ほど確認した通り、style属性に適切なオブジェクトを設定することで、スタイルを設定することができます。
またobj.personはただの文字列なのでそのまま文字列が出力されます。

まとめ

JSX内で{}を使用することでJavaScriptを使用できるということを確認しました。
JSX自体がJavaScriptの特殊な記法になっていますが、その中で素のJavaScriptを書くことができる、ということです。

次回はReactのより深い機能について確認をしていきます。

Part4はこちら
（次回の記事は鋭意作成中です。）

参考にしたサイト

• JSX に波括弧で JavaScript を含める