webpack + Babelで始める新しいJavaScript

カウントダウンを表示したり、ポップアップウィンドウをだしたり、Webサイトの表現を広げることができる、とても便利なJavaScript。簡単なことをするだけなら学習のハードルもあまり高くないので多くの方が使っていると思います。ただ、モジュール化ができないので大規模な開発には向かないと、以前からずっと言われていました。

しかし!ES2015の登場で、モジュール化できるようになったため、可読性の高い書き方ができるようになり、比較的大規模な開発も可能になったのです。Angular.jsやVue.jsなどフロント側のライブラリも充実してきたため、SPA(シングルページアプリケーション)と呼ばれる、Webアプリケーションも流行のようです。

Webサイト制作では、HTMLとCSS、簡単なJavaScriptができれば、ほとんど足りるため、最新の技術が必要な場面は実際にはあまりないと思います。とはいえ最新技術に触れることは創作の刺激になり、それだけでなく、これまでの業務の効率化も図れるかもしれません。

ES2015関連の記事も多くなってきていますが、備忘録も兼ねてWEB改善事例でも導入から実装までを連載形式で簡単に紹介いたします。
新しいJavaScriptを使ってみたい!勉強してみたい!そうお考えであれば、『webpack』と『Babel』を導入してES2015を使ってみましょう!

ES2015とは

ES2015とは、2015年に策定されたECMAScriptの仕様のことを言います。「ES」は『ECMAScript』の略で、「2015」は『2015年』を意味しています。

ECMAScriptはJavaScriptの根幹となる仕様のことで、大雑把にいえば、ECMAScriptをもとにしてそれぞれのブラウザが独自に拡張して実装しているものがJavaScriptというイメージです。Web業界の技術を見ていると目にすることも増えてきたと思いますが、それは、ES2015では大幅に機能追加がなされていて、できることが増えたと同時に覚えなければならないことが多くなったためだと考えます。

冒頭で出てきた『webpack』と『Babel』とは

ES2015は、実はブラウザでは使えない仕様がいくつかあるので、書いたものをそのままアップロードしても正しく動かない場面が多々あります。そのため、ブラウザが使える形にトランスパイル(変換)する必要があります。

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

どちらも、Node.jsが必要なので、事前に準備をお願いいたします。
手前味噌ではありますが、Node.jsのインストールについては以下の記事が参考になれば幸いでございます。

Windowsをご利用の方
Node.jsのインストール (Windows編)

Macをご利用の方
Node.jsのインストール (Mac編)

webpackとbabelを使えるようにする。

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

  1. 
      

    cd 作業ディレクトリ

  2. 
      

    npm init -y

  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を使う準備が整いました。次回は実際にトランスパイルさせてみます。

まとめ

webpackとBabelを準備するところまでを紹介いたしました。重要なことは以下の通りです。

  • ES2015で作成したスクリプトをブラウザで使う場合はトランスパイルが必要
  • トランスパイルに使うのはBabel
  • モジュール機能はwebpackなどモジュールバンドラが必要

アップデートが早くまだまだ覚えることの多いJavaScriptですが、置いていかれずについていけるように励みます!

すべての人にインターネット
関連サービス