「React入門」の前回は「Reactとはどういったライブラリか？」「Virtual DOMとはどういったものか？」について解説を行いました。今回は実際にReactはどのように書くかについて、「Hello world」を書きながら解説をしていきます。
ブラウザだけで実行
Reactはさまざまな適用方法があるのですがもっとも手間が掛からないのはブラウザだけで実行する方法です。
まずは以下のように書いてブラウザで確認してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reactで「Hello world」 – React入門</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('app')
);
</script>
</body>
</html>こちらをブラウザで確認すると「Hello, world!」と出力されます。
head要素内でReactのコアファイルである「react.js」とVirtual DOMの内容をブラウザに出力するための「react-dom.js」、そしてブラウザ上でJSXを変換するためのツールである「babel/browser.min.js」を読み込んでおり、script要素にはid属性「app」の中に<h1>Hello, world!</h1>を表示するReactの命令が記述されています。
JSXとは？
感の良い方は先程のソースコードの中にJavaScriptの文法としてはおかしい記述があるのに気づいたでしょう。
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('app')
);
</script><h1>Hello, world!</h1>というただのHTMLが'(シングルクオーテーション)や”(ダブルクオーテーション)に包まれずに存在してます。
これがJSXとよばれるものでVirtual DOMの元となる構文です。JSXに関しては後の回で詳しく解説しますのでひとまずはJavaScriptの中に書ける特殊なルールのHTMLぐらいの認識で大丈夫です。
ただし、このままではJavaScriptの文法としては不正なのでブラウザで表示した際にエラーが出てしまいます。そこで登場するのがブラウザ上でJSXを変換するためのツールである「babel/browser.min.js」です。
先ほどのコードの中でscript要素のtype属性に「text/babel」と見慣れない記述がありました。
<script type="text/babel">
// Reactの命令
</script>type属性に「text/babel」と記述されていscript要素では、まずBabelがscript要素の内容をブラウザが解釈できるように変換を行い、その上でブラウザが実行を行います。
たとえば先ほどの<h1>Hello, world!</h1>は以下のように変換されて実行されます。
ReactDOM.render(
React.createElement("h1", null, "Hello, world!"),
document.getElementById('app')
);JSXがどのようなJavaScriptに変換されるかはあまり意識しなくよいですが、JSXが一度JavaSciptに変換されてから実行されることは常に意識しておく必要があるでしょう。
JSXの変換コストは軽くはありません。Rectが巨大なファイルサイズになってきたら変換に時間がかかってしまいます。
そのため実案件ではbabel/browser.min.jsなどを使いブラウザ上での変換は行わず、あらかじめ変換しておいたJSファイルを読み込み利用するのが一般的です。
次回はNode.jsとBabelを利用してローカルでJSXを変換する方法について解説を行います。
フロントエンドエンジニア積極採用中
株式会社トゥーアールでは現在フロントエンドエンジニア積極的に採用中です！
興味がある人は採用ページをチェック！！
