はじめに
前回はReactの開発環境構築を行い、Hello Worldしてみました。
本格的に開発していく前に、構築した環境について確認しておきましょう。
ということで、今回はモダンJSの開発環境について確認します。
前提
以下の記事を参考にReactの環境構築が完了していることを前提として解説します。

開発環境の全体像
開発環境の全体像を絵にするとこんな感じ
前回の記事ではHello Worldを表示するだけのアプリを作りしましたが、実は上の図のように開発環境が動いていました。
では、これらの詳細を確認していきましょう。
ソースコードのビルドについて
Webアプリを作成する際、JavaScript、HTML、CSSファイルは画面ごとや機能ごとに複数作成するかと思います。
その方がメンテナンスしやすいし、ブラウザ上で読み込むファイルが少ない方が性能が良いです。
今回の環境は、ビルドツールとしてwebpackを利用しています。ソースコードはそのまま動くのではなく、webpackによってビルドした成果物を動かします。
webpackは設定ファイル(webpack.config.js)の内容を読み込んで動きます。
では、早速設定ファイルを見てみましょう。
module.exports = {
entry: {
app: "./src/index.js"
},
output: {
path: __dirname + '/public/js',
filename: "[name].js"
},
devServer: {
contentBase: __dirname + '/public',
port: 8080,
publicPath: '/js/'
},
devtool: "#inline-source-map",
module: {
rules: [{
test: /\.js$/,
enforce: "pre",
exclude: /node_modules/,
loader: "eslint-loader"
}, {
test: /\.css$/,
loader: ["style-loader","css-loader"]
}, {
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
}
};
module.exports.entry
アプリ起動時に動作するJSを指定します。今回の例ではindex.jsを指定しています。
module.exports.output
ビルドした成果物として出力するファイルのファイル名とパスを指定しています。
__dirnameはカレントディレクトリ、[name]はentryで指定した名前(app)です。
module.exports.devServer
webpack-dev-serverの設定で、contentBaseはweb公開するディレクトリ、publicPathはwebpackが出力するJSのあるディレクトリ、portはサーバが利用するポート番号です。
webpack-dev-serverとはソースコードを修正する度に再度ビルドをし直してリアルタイムに反映してくれる便利なツールです。
module.exports.module
ruleでは、ファイルの種類毎にどのローダーを利用してビルドするかを定義しています。
ローダーについては後述します。(ビルドするときに生のソースコードを変換かけたり、ソースのチェックをしてくれるツールのようなイメージでいいです)
今回の例では、node_module配下以外のjsファイルはeslint-loaderとbabel-loaderがビルド時に起動し、cssファイルはcss-loaderがビルド時に起動するように設定しています。
webpackは開発環境の中心で、コントローラとして動作しています。
ビルド時に動作するLoaderについて
ビルド時にwebpackから呼び出されて動作しているLoaderについて見ていきましょう。
ESLint
JavaScriptの文法チェックを行います。
JavaScriptは文法が間違えてもある程度動いてしまいます。。。ビルド時に文法が間違えているソースや、行儀の悪いソースまでチェックできるのがこのESLintです。
.eslint.jsonの設定を読み込んで動作します。
Babel
現在最新のモダンなJavaScriptの規格はES6(ES2015)です。が、すべてのブラウザがES6に対応できていないのが現状です。
そこで、ES6で書かれたJavaScriptをES5に変換してくれるのがBabelです。下位互換のイメージですかね。
css-loader、style-loader
css-loaderはCSSファイルを読み込むloaderで、読み込んだCSSを成果物にstyleタグで組み込むのがstyle-loaderです。
これら2つでwebpackビルド時にcssファイルも成果物としてbundle(結合)しているということです。
これらLoaderをwebpackからコントロールすることで複数のJS、HTML、CSSファイルを結合した成果物を作り、それがローカルPC上で立ち上げたサーバ上で動作していたのです。
おわりに
開発環境についてざっと確認しましたが、
モダンなJavaScriptはソースコードのチェックやビルドしてファイルを結合し、その成果物をサーバ上で動かすことがわかりました。
Angularでの開発をしていた頃はAngular CLIが勝手にやってくれていたのであんまり気にしていなかったですが、、、勉強になりました。