UIを作るためのJavaScriptライブラリであるReactの公式ドキュメントでは、JavaScriptの新しい規格であるECMAScript6（ECMAScript2015）で記述されています。Wikipedia(新しいタブで開く)でECMAScriptについて調べてみると、冒頭でこのように説明されています。

ECMAScript（エクマスクリプト）は、JavaScriptの標準であり、Ecma Internationalのもとで標準化手続きなどが行われている。

他言語の機能が取り入れられたECMAScript6

Wikipediaの説明だけでは分かりにくいかもしれませんね。もう少し踏み込んだ説明をすると、ECMAScript6はそれまでのJavaScriptの言語仕様を温存しつつ、多言語で実現されていたさまざまな最新機能が取り入れらています。

ECMAScript6にはアロー関数式(新しいタブで開く)や配列の分割代入などさまざまな新機能がありますが、その中でも今回はconst宣言子についてご紹介します。

const宣言子について

constはブロックスコープの再代入できないローカル変数を宣言します。いわば「定数のようなもの」です。「定数のようなもの」と表現したのは、const宣言子を使用してもデータの内容を書き換えられる場合があるからです。なおブロックスコープとは波括弧の”{}”の中を有効範囲とするスコープのことを言います。

const宣言子の基本的な使い方

const = 10;
const = 9; //　error

const宣言子で代入したローカル変数は再代入しようとするとエラーが出力されます。

オブジェクトと配列はプロパティ値・要素を変更できる

const member = { id: 1, name: "echizenya"};
member.name = 'yota';
console.log(member); // { id: 1, name: 'yota' }

ただし定数の値がオブジェクトや配列の場合、プロパティ値や要素を書き換えることは可能です。

Reactでconst宣言子を使う

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

上記のコードは公式ドキュメント(新しいタブで開く)から引用させていただきました。実行するとh1タグとして、”Hello, Josh Perez”が表示されます。

ちなみに2行目で”{name}”としている箇所があります。この場面で使われている変数を波括弧で囲む記法は、JavaScript（ECMAScript6）JSXの文法に則っています。