JavaScriptのブラウザごとの互換性をポリフィル・Babelで解決する！

JavaScriptには複数のバージョンがあるだけでなく、各ブラウザがどこまで対応しているのかまでを視野に入れておく必要があるために互換性を保つのが難しいと言われています。

自力で1つずつ互換性をチェックするのは現実的ではないため、効率化するためにポリフィルやBabelによるトランスパイルなどのツールやサービスがリリースされています。しかし、これらのツールはどこから学習を進めていけば良いのか悩んでいる方も少なくないでしょう。

そこで、この記事では初心者でも今日からJavaScriptの互換性について理解するための方法を分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

一人でも多くの方がJavaScriptの不安を解消できれば幸いです。

JavaScriptのバージョンについて

この章では、JavaScriptにどのようなバージョンが存在していてブラウザとの互換性をどのように確認するのかについて学んでいきます。

ECMAScriptとは？

JavaScriptはかつて、Netscape NavigatorやInternet ExplorerなどブラウザごとにJavaScriptの仕様が微妙に異なっておりまったく標準化されていませんでした。ブラウザで動く唯一のプログラム言語なのにこれでは困りますよね？

そこで外部機関であるECMAという標準化機関にJavaScriptの標準規格を作るように依頼し、完成したのがECMAScriptというわけです。

このような背景からJavaScriptのバージョンについて話す際には、このECMAScriptのバージョンをベースにしています。

一般的なブラウザで問題なく利用できるバージョンは2011年にリリースされたES5であり、最近になって一般化されつつあるのが2015年にリリースされたES6になります。

また、2015年以降は毎年6月頃に新しいJavaScriptのバージョンがリリースされることになっており、バージョンの呼び名もES2018のように年号を入れるのが主流です。

ブラウザの対応状況

JavaScriptのバージョンを確認する時に、もう1つ重要な要素としてブラウザの対応状況があります。

なぜなら、JavaScriptの新バージョンがリリースされたからといってすべてのブラウザが対応しているわけではないからです。ここにJavaScriptの互換性が難しいという大きな理由があるわけです。

JavaScriptの最新仕様に基づいた構文が各ブラウザで利用できるかを細かくチェックする方法としては、以下の互換性テーブルで確認するという方法があります。

また、もっと手軽な方法としては構文のキーワードからブラウザの対応状況をチェックできる以下のサービスを利用する方法も人気です。

いずれの方法にしても、自力ですべての互換性をチェックしてプログラミングすることは非常に困難であり、バグを引き起こす可能性も大きいことから一般的には次章以降で解説するポリフィルやBabelによるトランスパイルを利用することが多いわけです。

Polyfill（ポリフィル）とは？

この章では、JavaScriptの互換性を補うのによく使われるポリフィルについて見ていきましょう。主に、ポリフィルの概要と実際の使い方や便利なサービスについて学んでいきます。

ポリフィルの基本

JavaScriptはバージョンが更新されるたびに新しい構文や仕様が追加されるため、ブラウザによって対応状況が大きく変わってしまいます。

そこで、利用したい機能に対応していないブラウザでも使えるように、同等の機能をJavaScriptで自ら供給するというのがポリフィルの基本的な考え方です。一般的には、JavaScriptライブラリのようにさまざまなポリフィルが公開されています。

例えば、非同期通信を簡単に記述できるfetchを見てみましょう！

fetch('https://example.com/sample.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

この例では、対象となるサーバーからJSONファイルを取得してコンソールログに出力しています。もし、fetchに対応していないブラウザで実行するとエラーになりますよね？

このような時に、fetchのポリフィルを導入することになるわけです。

【 fetchポリフィル｜GitHub 】
URL：https://github.com/github/fetch

npmでインストールするかscriptタグから直接ファイルを指定すれば、fetchに対応していないブラウザでもすぐに利用することができます。

Polyfill.ioで効率化してみよう

先ほどはfetchのポリフィルを見てみたのですが、機能ごとにポリフィルを用意するのは大変ですよね。しかも、ブラウザごとに対応しているかを確認する必要もあります。

そこで、Polyfill.ioというサービスを使い専用のURLをscriptタグで読み込むだけで、それぞれのブラウザに最適化されたうえに必要となるポリフィルを選別して自動的に読み込んでくれるようになります。

【 Polyfill.io 】
URL：https://polyfill.io/v3/

例えば、ES2015に必要なポリフィルを取得するには次のようなURLになります。

https://polyfill.io/v3/polyfill.min.js?features=es2015

上記URLをscriptタグから読み込むだけでポリフィルを利用することができるようになるので大変便利です。

また、featuresのパラメータにはArray.prototype.entriesのように個別の機能だけを取得する設定も可能です。

Babelとは？

この章では、新しいバージョンで記述したJavaScriptを旧バージョンに変換してくれるBabelを使った手法について見ていきましょう。

Babelの導入

BabelはJavaScriptのソースコードをどのブラウザでも実行できる古いバージョンのJavaScriptに変換してくれます。これにより、ブラウザの対応を待たずに比較的新しいバージョンのJavaScriptでプログラミングをすることができるわけです。

実際にどんな感じで変換されるかを確認したい場合は、オンラインで公開されているBabelのプレイグラウンドを試してみるのが簡単でしょう。

コードエディタになっているので、JavaScriptでプログラミングすると自動的に画面右側に旧バージョンのJavaScriptへ変換されたコードが出力されます。

Babelを導入するには、Node.jsの開発環境が必要になります。

そのうえで、npmから以下のコマンドを実行しましょう。

npm install --save-dev @babel/core @babel/cli @babel/preset-env

Babelを使うのに必要な最低限のパッケージがインストールされます。

次に、設定ファイルを作成するのですが、ファイル名を【babel.config.json】として以下のように記述します。

const presets = [
   [
     '@babel/env'
   ]
];

module.exports = {presets};

【@babel/env】の箇所が先ほどインストールしたBabelのプリセットを使う指定になります。

ここまでの作業で基本的な導入は完了です。

JavaScriptをトランスパイルしてみよう

それでは、実際にJavaScriptのソースコードを変換（トランスパイル）してみましょう。

まずは、現在のディレクトリがどのようになっているのか再確認しておきます

|- package.json
|- babel.config.js
|- src
    |- index.js

srcフォルダ内にあるindex.jsにこれからJavaScriptを記述していきます。（フォルダ名は好きな名称で構いません）

次のような簡単な関数を書いてみました。

const sample = () => {
    console.log('Hello Babel');
}

アロー関数で単純に文字列を出力するだけです。

これをBabelで変換するには、次のようなコマンドを実行します。

./node_modules/.bin/babel src --out-dir lib

【–out-dir lib】というオプションを記述することで、libフォルダに変換されたソースコードのファイルが出力されます。

つまり、ディレクトリの構成は以下のようになります。

|- package.json
|- babel.config.js
|- src
    |- index.js
|- lib
    |- index.js

実際にlibフォルダ内のindex.jsを見てみるとこのようになります！

var sample = function sample() {
    console.log('Hello Babel');
};

constからvarになり、アロー関数からfunctionの記述に変換されているのが分かりますね。

ちなみに、package.jsonのscriptsにBabelの実行コマンドを記述しておくと使いやすくなります。

{
  "name": "babel",
  "version": "1.0.0",
  "scripts": {
    "babel": "./node_modules/.bin/babel src --out-dir lib"
  },
    ・
    ・
    ・
}

このように記述しておけば、Babelを実行する際に【npm run babel】というコマンドだけで良くなるのでオススメです。

まとめ

今回は、JavaScriptの互換性を保持するためのいくつかの手法を学習してきました！

最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！