※2017年11月時点の情報です。
前回までは、webpackとBabelの準備やES2015で追加された機能のなかでよく使うものを紹介いたしました。
記事の中では紹介できませんでしたが、他にも関数実行時の引数不足で起こる不具合を防ぐ『デフォルト引数』や、可変長引数の関数の作成をわかりやすくする『rest引数』、prototypeで実装していたクラスを書きやすくした『class構文』などもあります。
小規模な開発だと使わなくても困らないので割愛しましたが、どれも便利なのでJavaScriptを続けていると使う時が来ると思います。
第1回で必要なnodeモジュールはインストールしているので、トランスパイルの準備から始めます。まずは、コマンドラインで作業フォルダへの移動をお願いいたします。
移動は次のコマンドをコマンドラインツールで実行してください。
cd 作業ディレクトリのパス(使用している作業ディレクトリのパスを指定してください。)
webpack + Babelで始める新しいJavaScript – 1
ES2015の導入から実装までを連載形式で簡単に紹介いたします。新しいJavaScriptを使ってみたい方におすすめです。
webpack + Babelで始める新しいJavaScript – 2
こちらでは、実際にES2015の記述を書いてトランスパイルする前に、ES2015で追加された仕様についてよく使うものを紹介いたします。
webpack用の設定ファイルを作る
トランスパイルをする前に、webpackの設定ファイルを準備します。
下記のコードをコピーペーストして、『webpack.config.js』のファイル名で作業フォルダに保存してください。
module.exports = {
entry: './src/entry.js',
output: {
filename: './dest/bundle.js'
}
}
設定ファイルはJSON形式で記載します。例の各オプションの内容を簡単にまとめると以下の通りです。
| entry | もとにするjsファイルを指定する |
|---|---|
| output.filename | jsファイルをまとめた後、出力するファイル名を指定する |
これはwebpackを実行するために、最低限必要な情報です。
例では、srcディレクトリ内のentry.jsをもとにして、destディレクトリ内にbundle.jsとして出力するように設定しています。
本来はきちんと内容を理解した上で使うのが一番なのですが、今回は、ES2015の体験が最優先なので、ひとまずコピーペーストで問題ありません。
webpack.config.jsにBabelを使う指示を記載する
moduleプロパティにrulesプロパティを定義し、ファイルごとに使用するloaderを設定していきます。
loaderはwebpackでファイルを読み込むために使うものという認識で今は問題ありません。
今回はjsファイルをbabel-loaderに通したいので、webpack.config.jsを以下のように書き換えて、上書き保存してください。
module.exports = {
entry: './src/entry.js',
output: {
filename: './dest/bundle.js',
},
module: {
rules: [{
test: /\.js$/,
use: 'babel-loader'
}]
}
} testプロパティにファイル名、useプロパティに使用するloaderを記載します。
この設定を追記することで、webpackが.jsファイルを読み込む際に、Babelを経由するようになります。
loaderには他にも、画像ファイル用、sassファイル用など様々なものがありますので、使う際に調べてみることをおすすめします。
webpackを実行するための設定を『package.json』の『scripts』に追記する
wbpackはインストール済みですが、そのままでは実行するためのコマンドが長くなるので、package.jsonのscriptsプロパティに以下の内容を追記して、上書き保存してください。
"webpack": "webpack",
追記後package.jsonが次の例のようになっていれば大丈夫です。
{
"name": "※※※作業フォルダ名※※※",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"webpack": "webpack",
"test": "echo \"Error: no test specified\" && exit 1",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"webpack": "^3.8.1"
}
}
この設定を追記した後、コマンドラインで『npm run webpack』と記載して実行することで、webpackが実行されるようになります。
Babelの動作設定を『package.json』に追記する
BabelはデフォルトのままだとES2015形式を変換してくれませんので、変換するように指示する必要があります。
『package.json』に以下の内容を追記します。
"babel": {
"presets": ["es2015"]
},
追記後package.jsonが次の例のようになっていれば大丈夫です
{
"name": "※※※作業フォルダ名※※※",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"webpack": "webpack",
"test": "echo \"Error: no test specified\" && exit 1",
},
"babel": {
"presets": ["es2015"]
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"webpack": "^3.8.1"
}
}
確認用のhtmlファイルを準備する
ブラウザ確認用のhtmlファイルは事前に準備します。
次の内容でhtmlファイルを作成し、destディレクトリに保存してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>webpack+BabelでES2015</title>
</head>
<body>
<h1>webpack+BabelでES2015</h1>
<script src="./bundle.js"></script>
</body>
</html>
保存後、ディレクトリ構成は次のような形になっています。
作業フォルダ
├─package.json
├─webpack.config.js
├─dest
│ └─index.html
└─node_modules
└─省略
body閉じタグの直前で、bundle.jsを読み込むようにしています。しかし、現在時点でbundle.jsは存在しないためhtmlファイルを開いても何も起こりません。
jsファイルを準備してトランスパイルする
長かったのですがここからが本題です。実際にトランスパイルを行います。
ページを開いたときにページタイトルをアラートで表示するライブラリと、それを読み込むjsファイルを作成し、srcディレクトリに保存します。
動作の確認はブラウザで行いますので、上で作成したhtmlファイルを事前にブラウザで開いておくと確認しやすいのでおすすめです。
それでは下記のコードをそれぞれコピーペーストして、srcディレクトリに保存してください。
library.js
const AlertTitle = function () {
window.addEventListener('load', ()=>{
alert(document.title);
})
}
export default AlertTitle
entry.js
import AlertTitle from './library.js'
const App = new AlertTitle();
最終的に次の例のようなディレクトリ構成になっていれば問題ありません。
作業フォルダ
├─package.json
├─webpack.config.js
├─dest
│ └─index.html
├─src
│ ├─library.js
│ └─entry.js
└─node_modules
└─省略
ここまで完了したら準備完了です。残りは、webpackを実行してBabelでトランスパイルを行うのみです。
コマンドラインツールで、次のコマンドを実行してください。
npm run webpack
エラーが発生せずコマンドプロンプトに戻ったら成功です！
destディレクトリを開いて、bundle.jsが出力されていることをご確認ください。
ファイルを確認した後、ブラウザを更新すると、ページタイトルがアラートで表示されるはずです。これでwebpack + babelを使った新しいJavaScriptは終了です。
npmからjQueryをダウンロードして、インポート
このままではあまりにも実用向けではないので、使用頻度の高そうなjQueryのダウンロードとインポートまでを紹介いたします。
jQueryなどの汎用的なライブラリはnpmのサーバーからダウンロードすることが可能です。
ダウンロード後はスクリプト内で読み込ませることが可能です。まずはコマンドラインツールで次のコマンドを実行して、jQueryのダウンロードをお願いします。
npm i -S jquery
その後、entry.jsを次のように書き換えて、再度webpackを実行してください。
import $ from 'jquery'
import AlertTitle from './library.js'
AlertTitle();
$('body').append('<p>jQuery Add</p>');
ブラウザを更新すると、jQuery Addという文字列がブラウザに表示されたと思います。
npmでダウンロードした後はjQueryの記法も手軽に使えるようになります。
これはES2015ではなく、npm(node)とwebpackの機能ですが、ライブラリの管理が非常に楽になります。
まとめ
ES2015の使い方についてまとめさせていただきました。
実はこの記事だけでは情報は足りていません。webpackのloaderや、Polyfillのことなど、知らないと不便なことはまだまだあります。
JavaScript界隈は日進月歩で新しい仕様が導入されているので、まずはES2015の理解を深められるように励みます。
準備することが多く、手間がかかるように見えますが、よく使うモジュールを記載したpackage.jsonを事前に用意しておけば、npmコマンドですぐに準備が整うので新しいプロジェクトとは相性が良いのです。どうぞ一度お試しください。
業務で使うことはまだ少ないかもしれませんが、使ったことが無い方は一度使ってみることをおすすめいたします。
この記事がES2015以降のJavaScriptの技術に触れるきっかけになれば幸いでございます。
