対象読者
- JavaScriptとWeb開発の基礎に理解がある方
- Reactを用いたJavaScriptアプリケーション開発の未経験者
Reactの特徴
React（リアクト）は、UI（ユーザーインターフェース）を構築するためのJavaScriptライブラリです。
上記の公式サイトでは、次の3点が特徴として挙げられています。
- 宣言的なView
- コンポーネントベース
- 一度学習すれば、どこでも使える
宣言的なViewとは、XMLライクな文法を用いて構造を定義する（宣言する）ことで、アプリケーションの表示（≒ビュー）を構築できるといった特徴を表しています。また、データをどのように配置するかを定義しておくだけで、データの変更を検知し、自動的に表示を更新するといった特徴も表しています。この特徴については、本記事の「JSX」の節で解説します。
コンポーネントベースとは、レイアウト構造とスタイル定義と状態管理をまとめたコンポーネント（タグ）を定義し、これを組み合わせることで複雑なUIを構築できる特徴を表しています。この特徴については、本記事の「コンポーネントとProps」の節で解説します。
一度学習すれば、どこでも使えるとは、Reactがブラウザ向けのアプリケーションを作るためだけでなく、React Nativeを通じた、モバイル向けのアプリケーションの作成や、Node.jsサーバー上でのHTMLレンダリングにも利用でき、Reactについて学習したことが多くの場所で再利用できるという特徴を表しています。また、UIの構築に特化したライブラリであるため、組み合わせるフレームワークを問わないといった特徴も表しています。
本記事では、これらの魅力的な特徴について、具体的な使い方を交えて紹介しながら、Reactとの付き合い方について解説していきます。
JSX
Reactを使ってUIを記述するにあたっては、多くの部分でJavaScriptの構文や式をそのまま利用します。そのため、JavaScriptに親しい人がReactを使い始める場合に、追加で覚える文法はさほど多くありません。
そんな中でも、唯一、Reactが扱う特異な文法としてJSX（ジェーエスエックス）があります。ReactでUIを記述するということは、JSXを書くということとほぼ同義です。まずは、この文法について解説します。
JSXとは、JavaScriptコードの中にツリー上のデータ構造を定義するための、XMLライクな文法で、Facebook社が独自に仕様を策定しました。次のWebサイトで仕様が公開されています。
本節では、JSXがJavaScriptの中でどういった立場で扱われるものなのかを明確にします。
JSXは式
前述した、JSXの仕様についてのWebサイトでは、リスト1のコードが例示されています（少しだけ改変しています）。
// Using JSX to express UI components.
var dropdown =
<Dropdown>
A dropdown list
<Menu>
<MenuItem color="red">Do Something</MenuItem>
<MenuItem>Do Something Fun!</MenuItem>
<MenuItem>Do Something Else</MenuItem>
</Menu>
</Dropdown>;
render(dropdown);
ここで注目したいのは、<Dropdown>...</Dropdown>で定義された要素を、dropdown変数に代入しているところです。代入の右辺に置くことができるということは、JSXはJavaScriptにとって式として認識されていることが伺えます。
JSXは関数の実行
JSXはJavaScriptの文法ではないので、ブラウザ上で実行しても、文法エラーになります。そのため、ブラウザ上で実行できる形に変換する必要があります。
文法の変換といえば、近年のJavaScript文化圏では、プログラマが記述するソースコードをできるだけ新しい文法にしておき、実際にブラウザ上で動かす際には古めの文法に変換することで、コーディング体験と動作環境のバランスを取る手法が一般的になってきました。こういった用途で広く使われるようになったのが、 Babelなどの、JavaScriptのためのコンパイラ（トランスパイラ）です。
当初のBabelはECMAScript201x仕様で記述されたコードをECMAScript5仕様のコードに変換するツールとして使われていましたが、Reactの普及に伴い、JSXをJavaScriptに変換する機能がプラグインとして用意されました。このプラグインを導入することで、リスト1はリスト2のように変換されます。
var dropdown =
React.createElement(Dropdown, null,
"A dropdown list",
React.createElement(Menu, null,
React.createElement(MenuItem, {color: "red"}, "Do Something"),
React.createElement(MenuItem, null, "Do Something Fun!"),
React.createElement(MenuItem, null, "Do Something Else")
)
);
render(dropdown);
JSXが、JavaScriptとして一般的な文法を組み合わせただけの、関数呼び出しになりました。これはもちろん、式として有効です。
実際にReactを用いたアプリケーション開発をしていく際に、リスト2の形を意識することはほとんどありません。しかし、JSXが謎の魔法ではなく、最終的に私たちがよく知るJavaScriptに変換されて実行されていると理解しておくことは、トラブルシューティング等の面で有益です。内部でこういった仕組みが動いているということを、覚えておいてください。
JSX内での細かい表現については、本記事の中で随時解説していきます。
