スライドショー

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


JavaScriptの互換性を安全に保つにはどうすればいいの?
Babelなどを利用したトランスパイルって何?
ポリフィルを活用した互換性の保持ってどういうこと?

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

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

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

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

JavaScriptのバージョンについて

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

ECMAScriptとは?

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

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

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

  • ES5:2009年末にリリース
  • ES5.1:2011年6月にリリース
  • ES2015(ES6):2015年6月にリリース
  • ES2016:2016年6月にリリース
  • ES2017:2017年6月にリリース
  • ES2018:2018年6月にリリース

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

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

ブラウザの対応状況

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

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

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


【ECMAScript互換性テーブル】URL:http://kangax.github.io/compat-table/es6/

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


【CanIUse】URL:https://caniuse.com

いずれの方法にしても、自力ですべての互換性をチェックしてプログラミングすることは非常に困難であり、バグを引き起こす可能性も大きいことから一般的には次章以降で解説するポリフィルや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 】URL:https://babeljs.io

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

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


【Babelプレイグラウンド】URL:https://babeljs.io/repl

コードエディタになっているので、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の互換性を保持するためのいくつかの手法を学習してきました!

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

  • JavaScriptのバージョンはECMAScriptで標準化されている
  • ポリフィルを使うと対応していない機能が使えるようになる
  • Babel使うと旧バージョンのソースコードに変換してくれる

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説