【React入門（2）】モダンJSの開発環境について確認してみる

スポンサードリンク

はじめに
- 前提
開発環境の全体像
ソースコードのビルドについて
ビルド時に動作するLoaderについて
おわりに

はじめに

前回はReactの開発環境構築を行い、Hello Worldしてみました。

本格的に開発していく前に、構築した環境について確認しておきましょう。

ということで、今回はモダンJSの開発環境について確認します。

前提

以下の記事を参考にReactの環境構築が完了していることを前提として解説します。

【React入門（1）】開発環境をMacに構築してみる

開発環境の全体像

開発環境の全体像を絵にするとこんな感じ

前回の記事ではHello Worldを表示するだけのアプリを作りしましたが、実は上の図のように開発環境が動いていました。

では、これらの詳細を確認していきましょう。

ソースコードのビルドについて

Webアプリを作成する際、JavaScript、HTML、CSSファイルは画面ごとや機能ごとに複数作成するかと思います。

その方がメンテナンスしやすいし、ブラウザ上で読み込むファイルが少ない方が性能が良いです。

今回の環境は、ビルドツールとしてwebpackを利用しています。ソースコードはそのまま動くのではなく、webpackによってビルドした成果物を動かします。

webpackは設定ファイル(webpack.config.js)の内容を読み込んで動きます。

では、早速設定ファイルを見てみましょう。

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'
     }]
  }
};

MEMO

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では、ファイルの種類毎にどのローダーを利用してビルドするかを定義しています。

ローダーについては後述します。(ビルドするときに生のソースコードを変換かけたり、ソースのチェックをしてくれるツールのようなイメージでいいです)