「React」という名前を聞いたことがあるITエンジニアは多いのではないだろうか。ReactはWebフロントエンド開発界隈では最も注目されているJavaScript(JS)ライブラリと言ってよいだろう。

 米Facebookが開発し、今では多くの著名Webサイトで利用されている。Reactは「View」に相当する部分に特化したJSライブラリだ。Reactの特徴を挙げる前にコードを見てほしい。Reactの独自性が一目瞭然だ。

<div id="root"></div>
<script type="text/babel">
class MyApp extends React.Component {
render() {
return (
<h1>Hello {this.props.appData.name}!</h1>
);
}
}
let appData = {name: 'Taro'}
ReactDOM.render(
<MyApp appData={appData} />,
document.getElementById('root')
);
</script>

 上記は画面上に「Hello, Taro!」と表示するだけの簡単なコードだ。HTMLタグが直接、JavaScriptのコード内に記述されていることにお気づきだろうか。よく見ると、JavaScriptとして文法上のエラーがある。

独自記法の「JSX」を使う

 それもそのはず。Reactで記述するコードは正確にはJavaScript(ECMAScript)ではないからだ。実はReactでは「JSX」と呼ぶ独自記法のコードを使い、実行時にJavaScriptに変換する。もちろん、事前にコンパイルしておくこともできる。

 Reactでは「コンポーネント」という概念が重要となる。画面に表示するコンテンツを部品として分離し、それをコンポーネントとして登録する、という使い方をする(上記コードは、画面を一つのコンポーネントにしている)。

 「データ更新のたびにコンポーネント全体をレンダリングし直すのは非効率」と思われるかもしれないが、Reactでは実際には、変更があった箇所だけを操作している。ここがReactの大きな特徴になる。

この先は会員の登録が必要です。有料会員(月額プラン)は申し込み初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら