【React入門③】Babelを使いJSXをJS形式にコンパイルする

こちらの記事は、React入門チュートリアルです。

Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。

JSXとは？

前回の記事で見たsrc/App.jsのソースコードをもう一度見てみましょう。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          {/* 編集 */}
          Laravelとねころっけくん5.8
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

function Appの中身は、HTMLで書かれているように見えますね。

しかし、HTMLとは異なり、class属性指定がclassName属性での指定になっているなど若干の異なりがあります。

このようにReactに用いられるHTMLのような形式をJSXと言います。

またもう少し細かく見れば、変数出力が{}で囲まれていたり、コメントアウトが{/**/}だったり、差異がいくつもあります。

詳細は述べませんが、JSXの利点はReact標準APIによるDOM定義よりも簡潔で高い可読性を保持したコードが記述できるという点にあります。

JSXをコンパイルしよう

当たり前のことではありますが、ReactはJavascriptです。

そのためJSXなどのようなJavascriptエンジンやブラウザがサポートされていない言語はJavascriptに変換（コンパイル）されてから使用されることになります。

そしてコンパイルするためにBabelと呼ばれるパッケージを使用することになります。（Babelじゃなくても大丈夫です！）

Babelの導入とコンパイルまで

それではBabelをReactのプロジェクトに導入し、コンパイルまで進めていきましょう。

まずはnpm経由でBabelのインストールです。

$ npm install --save-dev babel-cli babel-preset-react babel-preset-env

上記のコマンドは3つに分けることができます。

CLI（コマンドラインインターフェース）で使用できるBabelのインストール

$ npm install --save-dev babel-cli

$ npm install --save-dev babel-preset-react

Reactのサポート環境に応じたプラグインを設定するためのプリセットパッケージのインストール

$ npm install --save-dev babel-preset-env

次にプロジェクトディレクトリ直下に以下のファイルを作成しましょう。

.babelrc

{
    "presets": [
        "env",
        "react"
    ]
}

.babelrcは、コンパイルの設定を記述しておくためのファイルです。先ほどnpm経由でインストールしたパッケージを実行するために必要となります。

次にコンパイル元とコンパイル先をpackage.jsに記述します。
package.json

  "scripts": {
　// 省略
    "babel": "babel src/index.js -o compiled.js" //追加
  },

scriptsに設定することによって「babel」と打てば、「babel src/index.js -o compiled.js」と返してくれるようになります。

ここまで設定できたら最後に実行してみましょう。

$ npm run babel

これでsrc/index.jsがディレクトリ直下のcompiled.jsというファイルにコンパイルされました。

違いを見てみましょう。
src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

compiled.js

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

require('./index.css');

var _App = require('./App');

var _App2 = _interopRequireDefault(_App);

var _serviceWorker = require('./serviceWorker');

var serviceWorker = _interopRequireWildcard(_serviceWorker);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

_reactDom2.default.render(_react2.default.createElement(_App2.default, null), document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

このように見ると、JSXが使用されているReactのファイルがJavascript形式にコンパイルされているということがわかりますね！