最新版Webpack入門　超快適なWebサイト制作の開発体験を【後編】

Babelの導入

Babel（バベル）は次の世代のJavaScriptの標準機能をブラウザのサポートを待たずに使えるようにするNode.js製のツールです。

簡単に言うと、JavaScriptのコードを新しい書き方から古い書き方に変換するツールです。これによってletやconst、アロー関数、分割代入など記法が使えるようになります！

必要なライブラリは3つです。

依存関係でエラーが起きるので、別々にインストールします。

% npm install --save-dev babel-loader
% npm install --save-dev @babel/core
% npm install --save-dev @babel/preset-env

webpack.config.jsを編集

/ ...

    rules: [
      {
        test: /\.js/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
        ],
      },
    ]

    // ...

Babelはプラグインを追加して必要な機能を加えますが、一つずつ追加していくのは面倒です。

そこで、あらかじめ用意されたプラグインのセットが使用する方法がpresetsオプションです。

設定はこれだけです！

簡単でしたね！

次にモダンフロントエンドのデファクトスタンダートのTypeScriptを導入します。

TypeScriptの導入

TypeScriptの詳しい説明は省きますが、簡単にいうと、大人数のプログラマーが開発に携わる場合でもエラーを防ぎやすいように設計されたJavaScriptの拡張言語です。例えば、変数のデータ型をあらかじめ決めたり、1つの関数定義で異なるデータ型の引数を処理できるなどの特徴があります。

大規模開発に向いているので、2017年にGoogleが社内の標準開発言語としてTypeScriptを採用しています。

必要なライブラリは2つです。

% npm install --save-dev typescript
% npm install --save-dev ts-loader

webpack.config.jsを編集

rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader',
          },
        ],
      },
]

TypeScriptは専用の設定ファイルが必要なので、

ルート配下にtsconfig.jsonという設定ファイルを作成します。

Project
|-package.json
|-package-lock.json
|-node_modules
|-.gitignore
|-src
|  |-images
|  |   |-test.png
|  |-css
|  |   |-style.css
|  |-js
|  |　　　　|-index.js
|  |-index.html
|-webpack.config.js
|-tsconfig.json（追加）

tsconfig.jsonを編集

{
    "compilerOptions": {
        "strict": true,
        "sourceMap": true,
        "moduleResolution": "node",
        "module": "ES2015",
        "target": "ES5",
        "noImplicitAny": false // 型の定義がない場合はanyとしてみなす
    }
}

設定ファイルはできたのでTypeScriptが使えるかどうか試します。

新しくadd.tsというファイルを作成しましょう。拡張子はjsではなく、tsです。

Project
|-package.json
|-package-lock.json
|-node_modules
|-.gitignore
|-src
|  |-images
|  |   |-test.png
|  |-css
|  |   |-style.css
|  |-js
|  |  |-add.ts（追加）
|  |  |-index.js
|  |-index.html
|-webpack.config.js
|-tsconfig.json

src/js/add.tsを編集

export default (a: number, b: number): string => {
  return `Result is ${a + b}!`;
};

2つの仮引数a,bをnumber型に指定することで、string型やboolean型を弾くことができます。

またreturn値はstring型で返ってきます。

それではadd.tsをindex.jsにインポートします。

src/js/index.jsを編集

// 追加(.tsを付けてくだだい)
import add from "./add.ts";
// 追加
console.log(add(3, 9));

関数を呼び出す際に、number型の実引数を2つ渡してみましょう！

ここで、number型以外の引数を渡すとTypeScriptがエラーを吐いてくれます。

npm run devでブラウザを確認してみましょう！

consoleに「Result is 12!」と表示されていれば成功です！

最後にReactの導入です。

Reactの導入

最初にBabelを導入した際にオプションでpresetsを用いました。

Reactを使う際には、さらにプラグインをインストールします。

% npm install --save-dev @babel/preset-react

webpack.config.jsを次のように編集します

/ ...

    rules: [
      {
        test: /\.js/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                '@babel/preset-react',　// 追加
                ],
            },
          },
        ],
      },
    ]

    // ...

次にReact本体のインストールを行います。

% npm install --save-dev react
% npm install --save-dev react-dom

これでReactをプロジェクト内で使えるようになりました！

早速ファイルを作成しましょう！拡張子はjsxで作成します。

Project
|-package.json
|-package-lock.json
|-node_modules
|-.gitignore
|-src
|  |-images
|  |   |-test.png
|  |-css
|  |   |-style.css
|  |-js
|  |  |-add.ts
|  |  |-reactApp.jsx（追加）
|  |  |-index.js
|  |-index.html
|-webpack.config.js
|-tsconfig.json

src/js/reactApp.jsxを編集

//　インストールしたライブラリをインポートする
import ReactDom from "react-dom";
import * as React from "react";

// ブラウザに表示したいリターン値
const App = () => {
  return <div>Hello, React</div>;
};


const reactRoot = document.getElementById('react-root');
if (reactRoot) { // react-rootのdomがあればAppの内容をマウントする
        ReactDom.render(<App/>, reactRoot);
} else {
        console.log('No root element found')
}

ここでは詳しいReactの記法については割愛します。

react-rootというdomに対してApp関数のreturn値がマウントされます。

ない場合はconsoleで'No root element found'が表示されます。

Reactについての説明はこの記事が参考になります！

作成したファイルをindex.jsにインポートしましょう。

src/js/index.jsを編集

import './reactApp.jsx' // 追加
import add from "./add.ts";
console.log(add(3, 9));

このままでは、ブラウザを確認しても何も表示されないのでindex.htmlに'react-root'のidが付与されたdiv,タグを記述します。

src/index.htmlを編集

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="react-root"></div>
  </body>
</html>