Introduction to React.js Part.3

wtnb_dev

2019年8月31日 13:59

こんにちは、ワタナベ（wtnb_dev）です。

前回の記事の続きです。

Introduction to React.js Part.2

今回は、前回の最後でお話しした、トランスパイラについて見ていきます。また、併せてwebpackについても見ていこうと思います。

トランスパイラの使い方

トランスパイラの説明については、前回の記事を参照願います。

ここでは、実際の使い方について見ていきます。

Step.1 トランスパイラ（babel）のインストール

今回は、トランスパイラにbabelを用います。より詳細に興味がある方は、以下のサイトでドキュメントを確認できます。

早速、yarnでbabelのコアとなるパッケージをインストールしていきましょう。

$ yarn add --dev @babel/core @babel/cli

また、前回の記事で記載したように、トランスパイラは、ある言語を別の言語に変換する機能を持ちます。

この変換する対象を、プリセットという形で提供しています。

今回は、React.jsで作成されたJavaScriptを変換するため、React.js用のプリセットを併せてインストールします。preset-reactの他に、最新のECMAScript仕様で記載されたJavaScriptをブラウザ上で動かせるようにするために、preset-envもインストールしておきます。

また、プリセットを使用するために、ローダーもインストールしておきます。

$ yarn add --dev babel-loader @babel/preset-react @babel/preset-env

これで、babelを使うために必要なものがインストールできました。

Step.2 babelの実行

Step.1で必要なものがインストールできたので、実際にbabelコマンドを実行して、前回作ったindex.jsをトランスパイルしてみましょう。

babelのコマンドを実行するために、package.jsonにscriptを追加します.

package.jsonのscriptが分からない方は、以下あたりが参考になります。（yarnのドキュメントですが、npmでもほとんど同じです）

package.jsonに、以下のscriptを追加します。

"scripts": {
   "babel": "babel src/index.js -o dist/trans.js --presets=@babel/preset-env,@babel/preset-react"
 }

これは、babelで、src/index.jsをトランスパイルし、dist/trans.jsに変換後のファイルを出力するコマンドになります。その際の変換ルール（プリセット）として、preset-envとpreset-reactを使用しています。

これで、最新のECMAScriptで記載されたJavaScriptや、React.jsで記載されたJavaScriptを、ブラウザ上で動くJavaScriptに変換できます。

早速実行していくのですが、その前に出力先であるdistディレクトリを作成しておきましょう。

現時点で、ディレクトリ構成は以下のようになります。

.
├── dist
├── node_modules
├── package.json
├── src
│   ├── index.html
│   └── index.js
└── yarn.lock

ここまで準備ができたら、babelコマンドを実行していきます。

$ yarn run babel
yarn run v1.17.3
warning ../../package.json: No license field
$ babel src/index.js -o dist/trans.js --presets=@babel/preset-env,@babel/preset-react
✨  Done in 1.07s.

「yarn run babel」と実行すると、先程用意したscriptが実行され、distディレクトリにtrans.jsが生成されるかと思います。

実際にtrans.jsを開いてみると、index.jsに書いたJSXなどが、標準のJavaScriptの構文に書き換わっていることが分かるかと思います。

これが、トランスパイルの動きになります。

Step.3 trans.jsをindex.htmlで読み込んでブラウザで表示

Step.2までで、React.jsで記載されたindex.jsをトランスパイルし、ブラウザ上で実行できるtrans.jsに変換できました。

あとは、trans.jsをindex.htmlで読み込み、実際にWebブラウザで表示してみましょう。

前回作成したindex.htmlを以下のように書き換えます。

<!DOCTYPE html>
<html lang="ja">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Sample Page</title>
 </head>
 <body>
   <div id="root"></div>
   <script src="../dist/trans.js"></script>
 </body>
</html>

書き換えたのはscriptタグのところで、trans.jsを読み込むように変更しています。

この状態で、index.htmlをWebブラウザにドラッグ&ドロップして表示してみましょう。

まだ何も表示されないかと思います。

何故でしょうか？前回同様、Webブラウザの開発者ツールを開いて、コンソールタブにエラーが出ていないか見てみましょう。

すると、以下のエラーが出ていることが分かるかと思います（Chromeの場合）。

Uncaught ReferenceError: require is not defined
at trans.js:3

前回からエラーの内容が変わってますね。これは、trans.jsに記載されているrequireが、node.jsで使える命令であり、Webブラウザ上では使用できない、といった内容のエラーになります。

requireは、外部モジュールを読み込むための命令です。

つまり、Step.2のトランスパイルだけでは、変換がまだ足りないというわけですね。

ここで必要になってくるのが、バンドラと呼ばれるwebpackになります。

webpackの使い方

webpackは、バンドラと呼ばれていて、複数のファイルを1つのファイルにまとめることができるツールになります。

何故そんなことをするのでしょうか？

Step.2では、require命令がWebブラウザ上で使えないためエラーとなっていました。

そこで、webpackを使うことで、外部モジュールをまとめて1つのJavaScriptファイルにバンドルすればrequireが要らなくなる、ということです。

※webpackの本来の目的は別にあると思いますので、詳細に興味がある方は以下を参照すると良いかと思います。

それでは早速webpackを導入していきましょう。

Step.4 webpackのインストール

webpackを使うには、コアとなる以下の2つのパッケージをインストールします。

$ yarn add --dev webpack webpack-cli

次に、webpackの設定ファイルを用意します。

Step.5 webpackの設定ファイルの作成

webpackの設定ファイルを作成します。名前は、webpack.config.jsとしておきます。

webpack.config.jsをプロジェクトのルートディレクトリに作成し、以下を記載していきます。

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"]
        }
      }
    ]
  }
};

上から順に見ていきましょう。

entryに、ルートとなるJavaScriptファイルを指定します。今回は、index.jsになります。

outputのpathには、バンドル後に生成されるファイルの出力先ディレクトリを指定します。今回は、distディレクトリとしています。

outputのfilenameには、バンドル後に生成されるファイルのファイル名を指定します。今回は、bundle.jsとしています。

また、webpackの設定ファイルには、babelの設定も記載することができます。

babelの設定を記載しておくことで、webpackを実行するだけで、併せてbabelも実行してくれます。

testには、babelの対象となるファイルパターンを指定します。今回は、拡張子が.jsのファイルを対象にしています。

loaderには、使用するローダーを指定します。今回は、babelを用いますので、babel-loaderを指定しています。

excludeには、babelの対象外とするファイルを指定します。node_modules配下のJavaScriptファイルはトランスパイルする必要が無いので、ディレクトリごと対象外にしています。

presetsには、使用するプリセットを指定します。

これで、webpackを使用する準備が整いました。ここまででできたディレクトリ構成は以下になります。

.
├── dist
├── node_modules
├── package.json
├── src
│   ├── index.html
│   └── index.js
├── webpack.config.js
└── yarn.lock

Step.6 webpackの実行

それでは実際にwebpackを実行してみましょう。

babelのときと同じように、package.jsonにwebpack実行用のscriptを追加します。

"scripts": {
   "build": "webpack",
   "babel": "babel src/index.js -o dist/trans.js --presets=@babel/preset-env,@babel/preset-react"
 }

babelの方のscriptは不要になるので、消してしまって構いません。

あとは、「yarn run build」と実行すれば、webpackが実行されます。

$ yarn run build
yarn run v1.17.3
warning ../../package.json: No license field
$ webpack
Hash: cd27a927ae03f45ba918
Version: webpack 4.39.3
Time: 919ms
Built at: 2019-08-31 13:43:38
   Asset     Size  Chunks             Chunk Names
bundle.js  124 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[3] ./src/index.js 158 bytes {0} [built]
   + 7 hidden modules
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'pr
oduction' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
✨  Done in 1.80s.

実行が完了したら、distディレクトリを見てみましょう。webpack.config.jsに記載したファイル名で、bundle.jsが生成されているかと思います。

bundle.jsを開いてみると、たくさんJavaScriptのコードが書かれているかと思います。

これが、requireで読み込んだ外部モジュールを、すべて1つにまとめたものになります。

試しに、元ファイルであるindex.jsに記載していた、"Hello World"の文字列でbundle.jsを検索してみると、ちゃんとh1タグにHello Worldを出力する処理が記載されていることが分かるかと思います。

babelとwebpackを用いることで、React.jsの構文で記載されたJavaScriptの変換、requireの解決ができましたので、今度こそ、Webブラウザ上で実行できる形式のJavaScriptファイル（bundle.js）を生成することができました。

Step.7 bundle.jsをindex.htmlで読み込んでブラウザで表示

index.htmlでbundle.jsを読み込むように修正し、今度こそWebブラウザ上で実行できるか試してみましょう。

index.htmlを以下のように修正します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Sample Page</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="../dist/bundle.js"></script>
  </body>
</html>

trans.jsをbundle.jsに変更しただけです。

この状態で、index.htmlをWebブラウザで開いてみましょう。

以下のように、Hello Worldと出力されれば成功です。

長かったですが、無事React.jsで記載されたJavaScriptを、Webブラウザ上で実行することができました。

ようやくReact.jsでの開発土台ができましたので、次回は実際にReact.jsでの開発を進めていきたいと思います。

まとめ

・babelを使うことで、Webブラウザが対応していない仕様で記載されたJavaScriptファイルでも、Webブラウザ上で実行できる形式に変換することができる
・webpackを使うことで、複数のファイルをまとめて1つのファイルに変換することができる。これにより、requireされた外部モジュールの依存関係を解決することができ、HTMLからは1つのJavaScriptファイルを読み込むだけで実行できる

この記事が気に入ったらサポートをしてみませんか？