はじめに
皆さん初めまして、新卒一年目のFM_Harmonyと申します。
今回はマルチブラウザという観点から、最近のJavaScriptについて調べました。jQueryの登場や、主要なブラウザが標準仕様への準拠を進めたことで、エンジニアがJavaScriptの動作環境を気にすることが、以前に比べ減りました。しかし調べていくと、今後はトランスパイルやAltJSによる対応が、JavaScriptにおいて必要になっていくのだということが分かりました。
このまとめが、最近Webアプリケーション開発に関わりはじめた方や、今後のJavaScriptについて興味のある方にとって、少しでも参考になれば幸いです。
目次
本題の前に
マルチブラウザ？クロスブラウザ？
この記事では、「複数のブラウザに対応すること」をマルチブラウザという言葉で表現します。サポート期間の終了したブラウザは、対応しないというのがその理由です。マルチブラウザはクロスブラウザと混同される概念ですが、簡単に言うと次のように分けられることが多いようです。
- マルチブラウザ
アプリケーションの作成元が推奨するブラウザで、動作することを保証する - クロスブラウザ
すべてのブラウザで動作することを保証する
例えば、Google Chrome(Chrome)は自動的にアップデートが行われます。そのため、古いバージョンが使われることはまずありません。ゆえに、この記事ではマルチブラウザという言葉を使うことにします。
これまでのマルチブラウザ対策
JavaScriptとブラウザ
JavaScriptには、ブラウザごとに異なる実装が存在しています。これが、マルチブラウザ対策が必要な理由です。私たちが普段JavaScriptと呼んでいるものは、ECMA*1Script(ES)という標準仕様を実装した言語を指します。そして、それはブラウザごとに異なる環境（エンジン）で動作します。また、その実装にブラウザ独自の拡張を行うことが、ある程度許容されています。ゆえに、JavaScriptを扱うときはブラウザごとの違いに注意しなければならなかったのです。
マルチブラウザ対策としてのjQuery
しかし、現在では開発中にブラウザ間の差異を意識することは、まず無いでしょう。一昔前まで、エンジニアはブラウザごとにJavaScriptの記述を変える必要がありました。ユーザがどのブラウザを使っているか検知し、記述を変えていたのです。
ところが、jQueryというライブラリの登場により状況は変わります。このライブラリが、ブラウザ間の違いを吸収することにより、アプリケーションをマルチブラウザ化する難易度が格段に下がりました。そのため、マルチブラウザ対策として、jQueryを用いることが多々ありました。
各ブラウザの対応
ですが、ここ数年の間に各ブラウザがESへの対応を積極的に行ったことで、jQueryによってマルチブラウザ対策を行う必然性が薄れていきました。特に今年に入って、IEがIE11より前のブラウザに対するサポートを終了したため、ES5までの標準仕様であれば、どのブラウザでも利用できるようになりました。機能面でのマルチブラウザ対策を考える必要は、基本的に無くなったといっても良いでしょう。
これからのマルチブラウザ対策
ES6とIE11
少し話は変わりますが、現在メジャーな標準仕様はECMAScript2015(ES6)とされています。この仕様には、アロー関数やPromiseといったエンジニアにとって魅力的な構文が多く含まれています。そのため、今後ES6に準拠したJavaScriptの記述が増えていくと思われます。（参考:ECMAScript 6: New Features: Overview and Comparison）
しかしES6は、IE11において仕様の11%しか実装されていません。他のブラウザでは、ほぼ100%実装されているのにもかかわらずです。IE11のサポートは2025年まで続く*2ため、マルチブラウザ対策として古い記述を残す必要があります。
トランスパイル
ここで登場するのが、トランスパイルという技術です。先ほども述べましたが、ES5はIE11やChromeなど主要なブラウザでの実装が完了しています。そこで、実際の開発はES6に準拠したコードで行い、アプリケーションに組み込む段階で、コードを機械的にES5へ変換するという手法が考えられました。この変換する技術をトランスパイルといいます。コードを変換するトランスパイラとして代表的なものに、babelがあります。
AltJS
また、トランスパイルと近い考え方に、AltJS*3を利用するというものがあります。AltJSとは、その名の通りJavaScriptの代替言語です。代表的なものにTypeScriptやCoffeeScriptなどが存在します。これらの言語には、ES6に対応した実装が多く含まれており、ES6に準拠したJavaScriptの代わりとして使うことができます。そして、JavaScriptに変換してアプリケーションに組み込むことができるのです。
まとめ
jQueryや各ブラウザの対応によって、JavaScriptの機能面でのマルチブラウザ対策は難易度が下がりました。一方でEcmaはES6以降、標準仕様を毎年改定すると発表しています。それに伴い、今後さまざまな仕様やそれに伴った記述が増えていくことでしょう。ですが、IE11におけるES6の現状を見ても、他のブラウザに比べてIEの対応が遅れることは、間違いないと思います。
ES6やその先のECMAScriptに対応した記述を、開発効率向上のために導入するならば、マルチブラウザ対策として、トランスパイルやAltJSから避けることができません。
ESの更新が活発な今だからこそ、これらを導入してはいかがですか？
エンジニア中途採用サイト
ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
ご興味ありましたら是非ご確認をお願いします。
https://career-recruit.rakus.co.jp/career_engineer/カジュアル面談お申込みフォーム
どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
以下フォームよりお申込みください。
forms.gleイベント情報
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com
