webpack + Babelで始める新しいJavaScript – 1

2017/11/10 15:03

※2017年11月時点の情報です。

カウントダウンを表示したり、ポップアップウィンドウをだしたり、Webサイトの表現を広げることができる、とても便利なJavaScript。簡単なことをするだけなら学習のハードルもあまり高くないので多くの方が使っていると思います。

ただ、モジュール化ができないので大規模な開発には向かないと、以前からずっと言われていました。

しかし！ES2015の登場で、モジュール化できるようになったため、可読性の高い書き方ができるようになり、比較的大規模な開発も可能になったのです。

Angular.jsやVue.jsなどフロント側のライブラリも充実してきたため、SPA(シングルページアプリケーション)と呼ばれる、Webアプリケーションも流行のようです。

Webサイト制作では、HTMLとCSS、簡単なJavaScriptができれば、ほとんど足りるため、最新の技術が必要な場面は実際にはあまりないと思います。

とはいえ最新技術に触れることは創作の刺激になり、それだけでなく、これまでの業務の効率化も図れるかもしれません。

ES2015関連の記事も多くなってきていますが、備忘録も兼ねて導入から実装までを連載形式で簡単に紹介いたします。

新しいJavaScriptを使ってみたい！勉強してみたい！そうお考えであれば、『webpack』と『Babel』を導入してES2015を使ってみましょう！

『ES2015』とは

ES2015とは、2015年に策定されたECMAScriptの仕様のことを言います。

「ES」は『ECMAScript』の略で、「2015」は『2015年』を意味しています。

ECMAScriptはJavaScriptの根幹となる仕様のことで、大雑把にいえば、ECMAScriptをもとにしてそれぞれのブラウザが独自に拡張して実装しているものがJavaScriptというイメージです。

Web業界の技術を見ていると目にすることも増えてきたと思いますが、それは、ES2015では大幅に機能追加がなされていて、できることが増えたと同時に覚えなければならないことが多くなったためだと考えます。

ES2015は、実はブラウザでは使えない仕様がいくつかあるので、書いたものをそのままアップロードしても正しく動かない場面が多々あります。

そのため、ブラウザが使える形にトランスパイル（変換）する必要があります。

トランスパイルをするために使われるのが、『webpack』と『Babel』です。細かく言うとBabelがトランスパイルを行うのですが、モジュール機能が使えないため不足部分をwebpackに担当させるイメージです。

どちらも、Node.jsが必要なので、事前に準備をお願いいたします。

手前味噌ではありますが、Node.jsのインストールについては以下の記事が参考になれば幸いでございます。

Windowsをご利用の方

Node.jsのインストール (Windows編)

この記事では、Node.jsの詳しい説明は行わず、Node.jsのバージョン管理システム導入からNode.jsのインストールまでをゴールとして、解説していきます。

Macをご利用の方

Node.jsのインストール (Mac編)

この記事では、MacにおけるNode.jsのインストールを、バージョン管理システム『ndenv』を経由して解説します。

コマンドラインから下記のコマンドを順番に実行してください。

STEP 1


cd 作業ディレクトリ

STEP 2


npm init -y

STEP 3


npm i -D webpack babel-core babel-loader babel-preset-es2015

実行後、ディレクトリは次のようになっているはずです。(Windows7での例)

今回インストールするのは「webpack」「babel-core」「babel-loader」「babel-preset-es2015」の4つです。

それぞれ以下のような用途があります。

webpack	モジュールをまとめる
babel-core	ES2015のフォーマットで書かれたスクリプトをトランスパイルするBabelの本体
babel-loader	webpackでBabelを使えるようにする。
babel-preset-es2015	es2015を、ブラウザで使える形にトランスパイルする

これでES2015を使う準備が整いました。次回は実際にトランスパイルさせてみます。