WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： プログラム >JavaScript

6月末頃にIE11のサポート終了のお知らせが話題になっていましたね。IE11は2022年6月でサポート終了なので、あと1年もない！と驚いています。
ただ、まだまだお客様の中にはIE11でWebサイトを閲覧される方もいらっしゃるので、IE11への対応というのは続きそうです。
そんな時にIE11への対応をしていて非対応のJavascriptの記述で頭を抱える場面があったので、どんなものが非対応なのか、また解決策をご紹介致します。

IE11に対応しているかのチェック

まず、IE11に対応をしているかどうかCan I useで確認することができます。
使用したJavascriptでエラーが出ているときには、まず使用できる関数だったのかを「Can I use」で確認してみましょう。

Javascriptで使えない関数

一例になりますが、IE11では非対応の関数をご紹介します。

• var()
  変数を定義する際に使用されるキーワードです。最近ではconstやletを使用することが多いです。
• promise
  非同期処理を行うことができます。
• fetch
  XMLHttpRequestのようなJavascriptの仕様で、XMLHttpRequestよりも簡単にAPIなどの読み込みを実装することができます。
• arrow
  functionを矢印（=>）に置き換えることができます。

どれもIE11以外のブラウザであれば動くだけに、中々歯痒い気持ちになりますね。
検証作業をしてエラーにすぐに気付けた場合でも、何をどう修正したら良いか悩みます。
そこで、簡単にエラーを正しい構文に変換してくれるサイトをご紹介します！

解決策！変換サイトを使ってみよう

一つ一つどこがエラーになっていてどのようにを直せば良いのか悩むときにおすすめの変換サイトです。まず、Babelにアクセスします。

次に、サイドメニューにあるTARGETSの入力欄を「default」だけにします。他の設定はいじらなくてOKです！

続いて、エラーがでているjavascriptのソースコードを左側に貼り付けます。

右側にエラーが修正されたコードを生成してくれます！
なんて便利なサービスなのでしょう…！これで、手直しする時間が短縮されますね。

まとめ

IE11のサポートが切れるといってもまだ対応が求められるブラウザかと思います。
どんな関数でエラーになるのか事前に把握しておくことと、修正を効率化できるサービスを使用することで解決への道をスピーディーにしていきましょう！

確かな力が身につくJavaScript「超」入門 第2版 単行本