JavaScript 寺子屋 30 / React の JSX の中で変数を表示する

今日の参考コード

React の中で変数を表示する

前回は React を使って、単に HTML 風のものから DOM を生成することだけをやりました。

でも、これなら HTML を書いた方が早いですよね。

React のポイントは、これが JavaScript の世界で動いているということです。

ということは、当然今までやってきた変数や関数が実行できます。

今回は、変数に文章をいれて、それを React の中で表示する、ということをやっていきます。

変数を宣言して、これを React の HTML 風の部分で使う

さて、やっていきましょう。

以下のコードでは、message という変数を宣言して、これを React の中で使用することで、DOM の中へと文字列として表示していますね。

当然ですが、React は JavaScript なので、そして .js ファイルに今我々はコードを書いているわけですから、JavaScript が書けます。

問題なのは、HTML 風の部分に、どうやってこの JavaScript を紛れ込ませるか、です。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const message = "React と JavaScript 最高！湘南乃風最高！";

function App() {
  // { ここ } に JavaScript の変数を入れると、展開されて表示される
  return <div className="App">{message}</div>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

HTML 風の部分は JSX と呼ばるる

もう何回も HTML 風というのは面倒なので、正式名称を発表します。JSX といいます。

JSX はほとんど見た目が HTML であることは繰り返し説明してきました。JavaScript のなのに、突然 HTML のようなものを書く。この部分が JSX ですね！

JSX!JSX!JSX!

三回復唱してください。

JSX は JavaScript が書ける時ならいつでも書けるわけでは "ない"

今後 CodeSandbox で開発するプロジェクトに関しては事情がことなりますが、例えば Vanilla の JS のプロジェクトを立ち上げて JSX を書こうとしても、エラーが出ます。JSX が書けるのは、特殊な状況だけです。

JSX が書ける特殊な状況とはつまり、JSX が書けるような設定をしてあるプロジェクト、ということになります。

CodeSandbox の React テンプレートプロジェクトは、実は JSX が書ける設定がすでにされているんですね。なので JSX が使える。この点は重要なので把握しておいてください。設定方法は結構難しいので、後々やりましょう。

JSX の中で変数を呼び出すにはどうする？

さて、JSX の部分はほとんど HTML と同じ書き方ができました。

しかし、HTML の中では JavaScript を実行することが普通はできませんよね。なぜなら HTML は JavaScript ではないからです。HTML の中に、突然 console.log() を実行することはできませんよね。以下のように書いたら、単に console.log() という文章が表示されるだけで、JavaScript としては実行されません。

<p>console.log()</p>

では、どうやって JSX の中で JavaScript を実行するのでしょうか？

JSX の中で { } を囲った部分だけは JavaScript 界になる

JSX 内の { } の中だけは、実は JavaScript ワールドになります。治外法権です。

だから以下のように、定義した変数を呼び出すことができます。そしてここでは、単なる文字として出力されます。

const message = "React と JavaScript 最高！湘南乃風最高！";

function App() {
  // { ここ } に JavaScript の変数を入れると、展開されて表示される
  return <div className="App">{message}</div>;
}

変数を呼び出すことができるということは、もう一つ JavaScript で定番の関数を呼び出すことができます。が、関数に関してはまた今度にしましょう。

宿題

React プロジェクトを開く
変数を宣言する
JSX の中の {} の中で変数を呼び出して
文章を表示する

今日以上です！

Uncle JavaScript.com