【JavaScript】フロントエンド開発のための環境を構築してみる
この記事では、フロントエンド/JavaScript周りの知識が「jQuery」を知っているくらいの数年前で止まっている自分に対して、フロントエンド開発で使われている?環境の構築についてまとめてみました。
今まであまりJavaScript関連にじっくりと触れる機会がなかったので、これを機にフロントエンド系にも触れて行こうと思います。
動作環境
- Windows10 Pro
- Node.js v10.15.0 (LTS = 推奨バージョン)
- テキストエディタ
想定している開発フロー
- package.jsonの作成
- ライブラリのインストール
- ソースの記述(ES6)
- 静的解析(ESLint)
- 開発サーバーで動作確認
- ソースをトランスパイル
- デプロイ
事前準備
gitのインストール
今回の動作環境に合わせてGit for Windowsをインストールしますnode.jsのインストール
インストールが終わったら、インストールされていることを以下のコマンドで確認します。
node -v v10.15.0 npm -v 6.4.1
続いてサンプルプロジェクト用のディレクトリを作成してそこにpackage.jsonを作成します。
mkdir sample cd sample npm init -y 「-y」オプションでデフォルト設定する
プロジェクト用のディレクトリ内にpackage.jsonが出来たので中身を確認してみます。
{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
webpack
webpackは、モジュールバンドラであり、複数のJavaScriptやCSSなどのファイルの依存関係を解決し1つのファイルにまとめてくれる機能があり、それによってリクエスト数を軽減できるメリットがあります。
ディレクトリ構成
webpackを利用するディレクトリ構成は以下になります。
.
|─ dist
| |- css
| └─ js
|- index.html
|- node_modules
|- package-lock.json
|- package.json
|- src
| |- css
| | └─ style.css
| └─ js
| |- app.js
| └─ バンドルするjsファイル
└─ webpack.config.jsインストール
インストールは以下のコマンドで行います。
npm i -D webpack webpack-cli
webpack.config.jsの設定
Entry
モジュールの依存関係を解析するためのスタートファイルの指定をします。ここではapp.jsにします。
module.exports = {
entry: './src/js/app.js'
};
Output
バンドルされたファイルの出力先を指定します。ファイルのパスは絶対パスになります。
const path = require('path');
module.exports = {
entry: './src/js/app.js',
output: {
path : path.resolve(__dirname, 'dist/js'),
filename : 'bundle.js'
}
};
Loader
JavaScript以外のファイルもバンドルする場合は、それぞれに対応するLoaderが必要になります。今回は、styleタグを生成してCSSを適用する「style-loader」、CSSファイルの依存関係を解決する「css-loader」、ECMAScript2015以降のコードを実行環境に合わせてECMAScript5に変換する「babel-loader」を設定します。
インストール
npm i -D style-loader css-loader babel-loader @babel/core @babel/preset-env
webpack.config.js に設定追加
const path = require('path');
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {"targets": {"edge": 42}, "useBuiltIns": "usage"}]
]
}
}
]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
resolve: {
extensions: ['.js', '.css']
},
};
.babelrcの作成
プロジェクトディレクトリ直下に配置します。
{
"presets": ["@babel/preset-env"]
}
Plugins
htmlに直接かかれるスタイルシートの記述をCSSファイルに出力するextract-text-webpack-pluginを設定します。
インストール
npm i -D extract-text-webpack-plugin@next
webpack.config.js に設定追加
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/js/app.js',
output: {
path : path.resolve(__dirname, 'dist/js'),
filename : 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {"targets": {"edge": 42}, "useBuiltIns": "usage"}]
]
}
}
]
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use : 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('../css/styles.css')
],
resolve: {
modules: [path.resolve(__dirname, 'src'),'node_modules'],
extensions: ['.js', '.css']
},
};
開発サーバー構築
インストール
npm i -D webpack-dev-server
webpack.config.js に設定追加
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/js/app.js',
output: {
path : path.resolve(__dirname, 'dist/js'),
filename : 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {"targets": {"edge": 42}, "useBuiltIns": "usage"}]
]
}
}
]
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use : 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('../css/styles.css')
],
resolve: {
modules: [path.resolve(__dirname, 'src'),'node_modules'],
extensions: ['.js', '.css']
},
devServer: {
contentBase : path.join(__dirname, '/'),
historyApiFallback: true,
port : 3000
},
};
ESLint
ESLintはJavaScriptのソースコードを構文チェックし、アプリケーションを実行する前に問題点を警告するツールです。
インストール
npm i -D eslint
初期設定
./node_modules/eslint/bin/eslint.js --init
上記コマンドを実行すると、いくつか質問があるのでそれに答えていくとeslintの設定ファイルである「eslintrc」ファイルを作成できます。
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"error",
4
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
}
}
上記ファイルの「rules」に独自ルールを追加することで構文チェックの幅が広がります。