More than 1 year has passed since last update.

[Javascript] IE11非対応らしきモノをかき集める

Last updated at 2022-01-13Posted at 2019-09-30

※注意事項

IEは、2022/06/16にサポートが終了されるそうです。
https://www.mdn.co.jp/di/newstopics/79744/

なので、こんな記事を見ていないで、「IE対応の廃止」を進言しましょう！！><
お客様にも、PMにも、経営層にも、幹部にも....

それでも聞き入れていただけない場合は、やむを得ないのでこの記事を参考としてください(ง ˘ω˘ )วｽﾔｯｽﾔｯ

対象者

IE（11）で動作するjavascriptコードを書きたい
⇒ この記事に掲載されているメソッドや記法を避ける
IEのブラウザでのみ動かないjavascriptがあって困っている
⇒ この記事に掲載されているメソッドや記法が使用されていないか一つずつ確認する...>_<。ﾂﾗｲ

ちなみに、IEに対応させる方法は記載していないので、各自調査されたし！！

気を付けたこと

資料をコンパクトにするため、以下の2点に力を入れました

各メソッドや記法自体の説明は省略
IEをbreakさせ得る記述を必要最低限に絞り込んで記載

更新予定

~~まだまだ他にも動かないものがありそうなので、今後も追記・修正していこうと思っています~~

2022/01/13追記

大変申し訳ないのですが、フロントエンドの開発に関わる機会が全くなくなったので、私がこの記事を更新する予定は基本的にはなさそうです。

せっかくコメントをいただいている中、心苦しいのですが、今は自分のすべきことに集中したいと考えています。¹

IEによる対応状況を調べる方法

ここで調べられるらしい
https://caniuse.com/

本題 - IE11で動作しないモノたち -

SCRIPT438

SCRIPT438は、「プロパティまたはメソッド」が使用できないパターン

before

// before から append までは、jQuery メソッドではなく、javascriptのメソッドを指しています
// jQueryのメソッドは試してないですが、動くのではないでしょうか？
var $element = document.getElementById('element1');
$element.before('<span>content</span>')
-> SCRIPT438: オブジェクトは 'before' プロパティまたはメソッドをサポートしていません。

情報元
- IE非対応のJavascriptをまとめてみた

after

var $element = document.getElementById('element1');
$element.after('<span>content</span>')
-> SCRIPT438: オブジェクトは 'after' プロパティまたはメソッドをサポートしていません。

replaceWith

var $element = document.getElementById('element1');
$element.replaceWith('<span>content</span>')
-> SCRIPT438: オブジェクトは 'replaceWith' プロパティまたはメソッドをサポートしていません。

情報元
- IE非対応のJavascriptをまとめてみた

prepend

var $element = document.getElementById('element1');
$element.prepend('<span>content</span>')
-> SCRIPT438: オブジェクトは 'prepend' プロパティまたはメソッドをサポートしていません。

情報元
- IE非対応のJavascriptをまとめてみた

append

var $element = document.getElementById('element1');
$element.append('<span>content</span>')
-> SCRIPT438: オブジェクトは 'append' プロパティまたはメソッドをサポートしていません。

情報元
- IE非対応のJavascriptをまとめてみた

trimStart

var greeting = '   Hello world!   ';
greeting.trimStart();
-> SCRIPT438: オブジェクトは 'trimStart' プロパティまたはメソッドをサポートしていません。

情報元
- MDN Web Docs: String.prototype.trimStart()
- MDN Web Docs: String

trimEnd

var greeting = '   Hello world!   ';
greeting.trimEnd();
-> SCRIPT438: オブジェクトは 'trimEnd' プロパティまたはメソッドをサポートしていません。

情報元
- MDN Web Docs: String.prototype.trimEnd()
- MDN Web Docs: String

startsWith

'Saturday night plans'.startsWith('Sat');
-> SCRIPT438: オブジェクトは 'startsWith' プロパティまたはメソッドをサポートしていません。

情報元
- MDN Web Docs: String.prototype.startsWith()
- MDN Web Docs: String

endsWith

'Cats are the best!'.endsWith('best', 17));
-> SCRIPT438: オブジェクトは 'endsWith' プロパティまたはメソッドをサポートしていません。

情報元
- MDN Web Docs: String.prototype.endsWith()
- MDN Web Docs: String

replaceAll

'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?'.replaceAll('dog', 'monkey');
-> SCRIPT438: オブジェクトは 'replaceAll' プロパティまたはメソッドをサポートしていません。

情報元
- MDN Web Docs: String.prototype.replaceAll()
- MDN Web Docs: String

find

var array1 = [5, 12, 8, 130, 44];
var found = array1.find(function(element) {
  return element > 10;
});
-> SCRIPT438: オブジェクトは 'find' プロパティまたはメソッドをサポートしていません。
// https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find

情報元
- IE非対応のJavascriptをまとめてみた

findIndex

const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = function (element){ return element > 13 };
console.log(array1.findIndex(isLargeNumber));
-> SCRIPT438: オブジェクトは 'findIndex' プロパティまたはメソッドをサポートしていません。

情報元
- N04hさんのコメント
- MDN Web Docs: Array.prototype.findIndex()

codePointAt

'☃★♲'.codePointAt(1);
-> SCRIPT438: オブジェクトは 'codePointAt' プロパティまたはメソッドをサポートしていません。

情報元
- MDN Web Docs: String.prototype.codePointAt()
- MDN Web Docs: String

includes

var some_array = ['Eins', 'Zwei'];
console.log(some_array.includes('Eins'));
-> SCRIPT438: オブジェクトは 'includes' プロパティまたはメソッドをサポートしていません。

情報元
- IE非対応のJavascriptをまとめてみた

querySelectorAll × forEach

querySelectorAll×forEach

<ul>
  <li class='foods'>おやさい</li>
  <li class='foods'>おさかな</li>
  <li class='foods'>おにくう</li>
</ul>

<script>
  // not working ... on IE
  var foods_list = document.querySelectorAll('.foods');
  foods_list.forEach(function(elem, index){
    console.log(elem);
  });
</script>
-> SCRIPT438: オブジェクトは 'forEach' プロパティまたはメソッドをサポートしていません。

<script>
  // it will work !
  var foods_list = document.querySelectorAll('.foods');
  var nodes = Array.prototype.slice.call(foods_list, 0);
  nodes.forEach(function(elem, index){
    console.log(elem);
  });
</script>

情報元
- [javascript]forEachをIEで使う時の注意点
- IEで NodeList を forEach するとエラーになる問題の対処方

SCRIPT10xx

SCRIPT10xxは、「構文エラー」など、文法の誤り扱いになるパターン

=>

arrow

// arrow1
var some_function = hoge => window.cosole.log(hoge);
some_function('string');
-> SCRIPT1002: 構文エラーです。

// arrow2
var arrow = () => {
  return 'アロー関数';
};
-> SCRIPT1002: 構文エラーです。

// old
var some_function = function(hoge) { window.cosole.log(hoge); }
some_function('string');

情報元
- IE非対応のJavascriptをまとめてみた

class

class Hoge {

}
-> SCRIPT1002: 構文エラーです。

情報元
- IE非対応のJavascriptをまとめてみた

...array

スプレッド構文（...array）

var some_array = [1, 2, 3];
var copy_array = [...some_array];
-> SCRIPT1002: 構文エラーです。

情報元
- IE非対応のJavascriptをまとめてみた

オブジェクトの省略

var obj = {
  shortFunction () {
    return 'オブジェクト内の関数が省略ができます！';
  }
};
console.log(obj.shortFunction());
-> SCRIPT1003: ':' がありません。

情報元
- 注意！IE11で使えない最新JavaScritコード（ES6）

for-of

items = ['one', 'two', 'three']
for (var item of items) {
  console.log(item);
}
-> SCRIPT1004: ';' がありません。

情報元
- IE非対応のJavascriptをまとめてみた

function method_name(x, y = 5) { ; }

関数のデフォルト値

function sum(x, y = 5) {
  console.log(x + y);
}
sum(3);
-> SCRIPT1006: ')' がありません。

情報元
- 注意！IE11で使えない最新JavaScritコード（ES6）

var [a, b] = ['a', 'b'];

複数変数同時定義

var [a, b] = ['a', 'b'];
console.log(a);
console.log(b);
-> SCRIPT1010: 識別子がありません。

var { name: name, height: height, weight: weight } = {
  name: 'kirby',
  height: '80',
  weight: '99999' // 隕石を飲み込んだ後
};
-> SCRIPT1010: 識別子がありません。

情報元
- 注意！IE11で使えない最新JavaScritコード（ES6）

`文字列${hoge}`

```javascript:テンプレートリテラル/文字列内での変数展開（文字列${hoge}）
var name = 'Miki'
console.log(`Hi, ${name} !`);
-> SCRIPT1014: 文字が正しくありません。

- 情報元
    - [IE非対応のJavascriptをまとめてみた](https://yukimonkey.com/fix-error/ie/)
    - [javascript IEで動かない時の対処法を教えてください。](https://teratail.com/questions/121517)  

## SCRIPT5009

`SCRIPT5009`は、おそらく、その名前を認識できていないパターン。

### Promise
```javascript:promise
var promise = new Promise(  );
promise.then(  );
-> SCRIPT5009: 'Promise' is undefined
-> SCRIPT5009: 'Promise' は定義されていません。

情報元
- IE非対応のJavascriptをまとめてみた

fetch

fetch(' ... ').then(  );
-> SCRIPT5009: 'fetch' は定義されていません。

情報元
- IE非対応のJavascriptをまとめてみた

IntersectionObserver

var io = new IntersectionObserver( ... )
io.observe($target)
-> SCRIPT5009: 'IntersectionObserver' は定義されていません。

情報元
- IE非対応のJavascriptをまとめてみた

その他

IEと、それ以外のブラウザで動作が異なるなど、特殊なパターンや、エラーコードが示されないものなどをここに入れました。

Set

set

var names_set = new Set(['Roman', 'Elysion', 'Moira'])
console.log(names_set.size);
# IE11
-> 0

# Chrome
-> 3

情報元
- 注意！IE11で使えない最新JavaScritコード（ES6）

RadioNodeList

RadioNodeList(html)

<form id="target">
  <input name="food" type="radio" value="fish"> お魚
  <input name="food" type="radio" value="meat"> お肉
  <input name="food" type="radio" value="vegetable"> お野菜
</form>

RadioNodeList(javasscript)

var $element = document.getElementById("target") ;
var radioNodeList = $element.food ;
console.log(radioNodeList[0]);
// https://lab.syncer.jp/Web/JavaScript/Snippet/30/

-> 特に問題なく動いた
-> IEの中でも動かないバージョンと動くバージョンがあるのかもしれない