RAKUS Developers Blog

株式会社ラクスのエンジニアブログ

今だからこそ!マルチブラウザJavaScript再考

はじめに

皆さん初めまして、新卒一年目のFM_Harmonyと申します。

今回はマルチブラウザという観点から、最近のJavaScriptについて調べました。jQueryの登場や、主要なブラウザが標準仕様への準拠を進めたことで、エンジニアがJavaScriptの動作環境を気にすることが、以前に比べ減りました。しかし調べていくと、今後はトランスパイルAltJSによる対応が、JavaScriptにおいて必要になっていくのだということが分かりました。

このまとめが、最近Webアプリケーション開発に関わりはじめた方や、今後のJavaScriptについて興味のある方にとって、少しでも参考になれば幸いです。

目次

本題の前に

マルチブラウザ?クロスブラウザ

この記事では、「複数のブラウザに対応すること」をマルチブラウザという言葉で表現します。サポート期間の終了したブラウザは、対応しないというのがその理由です。マルチブラウザはクロスブラウザと混同される概念ですが、簡単に言うと次のように分けられることが多いようです。

  • マルチブラウザ
    アプリケーションの作成元が推奨するブラウザで、動作することを保証する
  • クロスブラウザ
    すべてのブラウザで動作することを保証する

例えば、Google Chrome(Chrome)は自動的にアップデートが行われます。そのため、古いバージョンが使われることはまずありません。ゆえに、この記事ではマルチブラウザという言葉を使うことにします。

f:id:FM_Harmony:20171018141226p:plain
クロスブラウザとマルチブラウザの違い

これまでのマルチブラウザ対策

JavaScriptとブラウザ

JavaScriptには、ブラウザごとに異なる実装が存在しています。これが、マルチブラウザ対策が必要な理由です。私たちが普段JavaScriptと呼んでいるものは、ECMA*1Script(ES)という標準仕様を実装した言語を指します。そして、それはブラウザごとに異なる環境(エンジン)で動作します。また、その実装にブラウザ独自の拡張を行うことが、ある程度許容されています。ゆえに、JavaScriptを扱うときはブラウザごとの違いに注意しなければならなかったのです。

f:id:FM_Harmony:20171018140938p:plain
エンジニアはブラウザの違いを意識しなければならない

マルチブラウザ対策としてのjQuery

しかし、現在では開発中にブラウザ間の差異を意識することは、まず無いでしょう。一昔前まで、エンジニアはブラウザごとにJavaScriptの記述を変える必要がありました。ユーザがどのブラウザを使っているか検知し、記述を変えていたのです。

ところが、jQueryというライブラリの登場により状況は変わります。このライブラリが、ブラウザ間の違いを吸収することにより、アプリケーションをマルチブラウザ化する難易度が格段に下がりました。そのため、マルチブラウザ対策として、jQueryを用いることが多々ありました。

f:id:FM_Harmony:20171018140950p:plain
エンジニアはブラウザの違いを意識せずに済む

各ブラウザの対応

ですが、ここ数年の間に各ブラウザがESへの対応を積極的に行ったことで、jQueryによってマルチブラウザ対策を行う必然性が薄れていきました。特に今年に入って、IEIE11より前のブラウザに対するサポートを終了したため、ES5までの標準仕様であれば、どのブラウザでも利用できるようになりました。機能面でのマルチブラウザ対策を考える必要は、基本的に無くなったといっても良いでしょう。

f:id:FM_Harmony:20171018135028p:plain
各ブラウザのES5への対応
  (出典:http://kangax.github.io/compat-table/es5/)

これからのマルチブラウザ対策

ES6とIE11

少し話は変わりますが、現在メジャーな標準仕様はECMAScript2015(ES6)とされています。この仕様には、アロー関数やPromiseといったエンジニアにとって魅力的な構文が多く含まれています。そのため、今後ES6に準拠したJavaScriptの記述が増えていくと思われます。(参考:ECMAScript 6: New Features: Overview and Comparison

しかしES6は、IE11において仕様の11%しか実装されていません。他のブラウザでは、ほぼ100%実装されているのにもかかわらずです。IE11のサポートは2025年まで続く*2ため、マルチブラウザ対策として古い記述を残す必要があります。

f:id:FM_Harmony:20171018134506p:plain
各ブラウザのES6への対応
  (出典:http://kangax.github.io/compat-table/es6/)

トランスパイル

ここで登場するのが、トランスパイルという技術です。先ほども述べましたが、ES5はIE11やChromeなど主要なブラウザでの実装が完了しています。そこで、実際の開発はES6に準拠したコードで行い、アプリケーションに組み込む段階で、コードを機械的にES5へ変換するという手法が考えられました。この変換する技術をトランスパイルといいます。コードを変換するトランスパイラとして代表的なものに、babelがあります。

f:id:FM_Harmony:20171018044641p:plain
トランスパイルのイメージ(babel公式サイトより)
  (画像出典:Babel · The compiler for writing next generation JavaScript

AltJS

また、トランスパイルと近い考え方に、AltJS*3を利用するというものがあります。AltJSとは、その名の通りJavaScriptの代替言語です。代表的なものにTypeScriptCoffeeScriptなどが存在します。これらの言語には、ES6に対応した実装が多く含まれており、ES6に準拠したJavaScriptの代わりとして使うことができます。そして、JavaScriptに変換してアプリケーションに組み込むことができるのです。

f:id:FM_Harmony:20171018142519p:plain
AltJSの一つ、TypeScript
 (画像出典:TypeScript - JavaScript that scales.

まとめ

jQueryや各ブラウザの対応によって、JavaScriptの機能面でのマルチブラウザ対策は難易度が下がりました。一方でEcmaはES6以降、標準仕様を毎年改定すると発表しています。それに伴い、今後さまざまな仕様やそれに伴った記述が増えていくことでしょう。ですが、IE11におけるES6の現状を見ても、他のブラウザに比べてIEの対応が遅れることは、間違いないと思います。

ES6やその先のECMAScriptに対応した記述を、開発効率向上のために導入するならば、マルチブラウザ対策として、トランスパイルやAltJSから避けることができません。

ESの更新が活発な今だからこそ、これらを導入してはいかがですか?

注釈

*1:European Computer Manufacturers Associationの略

*2:Windows10のサポートが終了するのが2025年のため

*3:Alternative JavaScriptの略

Copyright © RAKUS Co., Ltd. All rights reserved.