JavaScript SDKをInternet Explorerで読み込む際に発生する構文エラーを回避する方法について

SkyWayはInternet Explorer(以下、IE)での動作に対応していないため、IEでskyway.jsを読み込むと構文エラーが発生します。これはIEが対応していないJavaScriptの構文を利用しているためです。

IEによるアクセスが発生するWebサイトにおいて、skyway.jsを読み込む必要がある場合のエラー回避方法について二通り記述します。

1. webpack/babelを利用してIEでエラーの発生しない構文に変換する

babelとは最新のJavaScriptの構文をレガシーブラウザでも解釈できるようにトランスコンパイルするためのツールです。この項ではwebpackを利用している際にbabelにてskyway.jsを変換する方法をお伝えします。

1-1. babelのインストール

skyway.jsをbabelで変換するためには以下のライブラリが必要です。それぞれ `npm install` などでインストールする必要があります。

babel-core
babel-loader
babel-polyfill
babel-preset-es2015
babel-preset-es2017

1-2. babelの設定

ルートディレクトリに以下の内容で `.babelrc` というファイル名を作成します。

{
  "presets": [ "es2015", "es2017" ]
}

1-3. webpackの設定

ここではwebpackの対象にskyway-jsを追加しつつ、エントリーポイントにbabel-polyfillを追加し、babelの実行のための設定を行います。下記に参考となる `webpack.config.js` を記述します。エントリーポイントのファイル等、既存のwebpackの設定と適宜置き換えながらご利用下さい。

const webpack = require('webpack');
const config = {
  entry: {
    output: ['babel-polyfill', './src/main.js'],
  },
  output: {
    path: `${__dirname}/dist`,
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules(?!\/skyway-js)/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};
module.exports = config;

1-4. webpackの実行

以上でwebpack/babelを用いたトランスコンパイルの設定は完了です。後は通常通りwebpackを実行していただければ自動でskyway.jsについてもbabelでの変換が行われます。

2. IEでない場合のみskyway.jsを読み込む

JavaScriptにてIEかどうかを最初にチェックし、IEでない場合のみskyway.jsを読み込む方法です。

下記のJavaScriptをHTML内に記述、または外部Scriptとして読み込むことで動作します。

var ua = window.navigator.userAgent;
if (ua.indexOf("MSIE ") === -1 && ua.indexOf("Trident") === -1) {
    var tag = document.createElement('script');
    tag.async = false;
    tag.src = "https://cdn.webrtc.ecl.ntt.com/skyway-latest.min.js";
    var body = document.getElementsByTagName('body');
    body[0].appendChild(tag);
}

このセクションの記事