IE（InternetExplorer）のサポート終了から生まれるメリット5選！～フロントエンドエンジニアの観点からJavaScriptを考える

JavaScript

2022.06.18

2022年6月15日、それは「お疲れ様」と同時に「ヨッシャー！」となる不思議な日。
かのInternetExplorerが遂にサポート終了となりました。
エンジニア、Webデザイナ、コーダー、プログラマの皆さん、Web業界にかかわるすべての皆さん、今まで我慢ご苦労様でした！テンション高めなので！（ビックリマーク）多めでお送りしております！

InternetExplorerが消滅して起こるデメリット
InternetExplorerが消滅して起こるメリット
InternetExplorerよ、眠れ！

InternetExplorerが消滅して起こるデメリット

うーん、特にないかな。まだモダンブラウザ対応していない市役所のシステムとか、官公庁のシステムとかがデスマーチになるかもしれないくらいですかね。でも1年前から告知されてたんだからデスマーチになっている会社なんてないですよね～。

InternetExplorerが消滅して起こるメリット

あぁ、数えきれないけど記事にするからには何個かに絞らないといけませんね。
悪魔のIE6時代を知っている僕は、IEが存続し続けるデメリットしか頭にないので、とにかく無くなって良いことしか思い浮かびません。だって要素にpaddingとmargin一緒にかけると数値上の倍のデザイン崩れが起こるってなんだよ……IETesterとか懐かしいなぁ……

さて、気を取り直してこれからWeb業界に起こる良いことをJavaScriptの観点から列挙していきたいと思います。これからこんな関数使えるんだよ！こんな書き方出来るんだよ！となるはずなので、是非ご参考になってください。

文字列リテラルが利用可能に

文字列リテラルが何かご不明な方は、別の記事にまとめているので、併せてご参考になさってくださいね。

念のため簡単に言うと、IEはこの文字列リテラルという仕組みが使えず、変数に文字列を入れる場合は1行1行「+=」などで連結して、非常に面倒でした。IE11だけが文字列リテラルに対応していないため、泣く泣く「+=」で長い文章を表現していました。

IEでは「+=」が多すぎて、コードの可読性が著しく悪くなるケースがほとんどでした。次の例のようなことです。

let innerHTML = '<div class="wrap">';
    innerHTML =+ '<dl class="book">';
    innerHTML =+  '<dt class="title">' + varcara01 + '</dt>';
    innerHTML =+  '<dd class="content">' + varcar02 + '</dd>';
    innerHTML =+ '</dl>';
    innerHTML =+ '</div>';

$('.content-area').append(innerHTML);

絶望的に書きにくい＆修正しにくい……上記はまだ単純なサンプルなので何とかなりますが、これが20行なんて書かれていた日には……

IEがなくなり、IE対応する必要がなくなると文字列リテラルが使えるようになるので、以下のようにスッキリ書くことが出来ちゃうのですよ。

let innterHTML = `
<div class="wrap">
  <dl class="book">
  <dt class="title">${varcar01}</dt>
  <dd class="content">${varcar02}</dd>
  </dl>
</div>`;

$('.content-area').append(innerHTML);

一目瞭然です。「`（バッククォート）」で囲った文字列は改行が使えます。変数は${変数名}で呼び出せるという便利な仕組みです。むしろIE11がいつまでたっても文字列リテラルを採用しなかったのが謎。HTMLを特定の要素に突っ込みたい時とかには非常に重宝します。ぜひ使ってみてください。

★（参考）文字列リテラル対応表
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7

url()メソッドが利用可能に

JavaScriptでURLのパラメーターを参照したい時って意外と多いですよね。どのパラメータにどの値が付与されているのが、JavaScriptで取り込んで、その数値によって処理を変える、ってことも良くやります。（システムでやれっと突っ込まれそうですが、システムに断れれる切ない場合もあるんです）

// URLを取得
let url = new URL(window.location.href);

// URLSearchParamsオブジェクトを取得
let params = url.searchParams;

// getパラメータの値を取得
params.get('id');
params.get('mode');

なんと、これだけでURLに含まれるGETパラメータの値が取れちゃうんです……めちゃくちゃ便利。もちろんIE11には非対応ですけどねっっ！これをIE対応で書くと……長ーくなるのでやめときますｗ

★（参考）url()メソッド対応表
https://developer.mozilla.org/ja/docs/Web/API/URL/URL#browser_compatibility

replaceAll()が利用可能に

え！？って感じしません？？replaceAll()ってめっちゃ便利なはずなのに実はIEで動かないんですよ。

'The cat is blue. The dog is white. The bird is red. Othello Matsushima is white.'.replaceAll('white', 'brown');
// IEでのコンソールエラー：SCRIPT438: オブジェクトは 'replaceAll' プロパティまたはメソッドをサポートしていません。

★（参考）replaceAll()対応表
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll#browser_compatibility

Classが利用可能に

これまた、え！？ってなりません？IEってクラス使えんかったのか……って思う方は結構いるんじゃないかなと思います。

class Hoge {

}
// IEのコンソールエラー SCRIPT1002: 構文エラーです。

★（参考）Class対応表
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes#browser_compatibility

アロー関数が利用可能に

昔これでハマった方は結構な数いらっしゃるのではないでしょうか。技術書にぼちぼち登場してくるので、サンプル通り書いてもIEだとエラーを吐いてしまうという過激なトラップです。

let funcTest = sample => window.cosole.log(sample);
funcTest('string');
// IEのコンソールエラー： SCRIPT1002: 構文エラーです。

★（参考）アロー関数対応表
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7

InternetExplorerよ、眠れ！

いかがでしたでしょうか。ちょっと記事にしただけでも5つの関数（メソッド）、仕様等が利用できるようになるというメリット盛沢山のサポート終了です。

Webのフロントエンドに関わる方たちほとんどに朗報だったのではないでしょうか。

少なくとも僕は大歓喜しています。しかしながら、後継のEdgeには「IEモード」という要らん機能が付いています。この機能が完全に無くなった時こそ、フロントエンドエンジニアの本当の喜びになるのかもしれませんね。