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

# ※注意事項

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追記

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

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

[^1]: 気が向けば、もしかしたら更新する可能性もなくはないですが、今保有しているPCにはもうIEを入れておらず動作確認も行えないため、やはり可能性は低いと思います(´；ω；｀)

# IEによる対応状況を調べる方法
ここで調べられるらしい
https://caniuse.com/

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

## SCRIPT438

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

### before
```javascript:before
// before から append までは、jQuery メソッドではなく、javascriptのメソッドを指しています
// jQueryのメソッドは試してないですが、動くのではないでしょうか？
var $element = document.getElementById('element1');
$element.before('<span>content</span>')
-> SCRIPT438: オブジェクトは 'before' プロパティまたはメソッドをサポートしていません。
```
- 情報元
    - [IE非対応のJavascriptをまとめてみた](https://yukimonkey.com/fix-error/ie/)


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

### replaceWith
```javascript:replaceWith
var $element = document.getElementById('element1');
$element.replaceWith('<span>content</span>')
-> SCRIPT438: オブジェクトは 'replaceWith' プロパティまたはメソッドをサポートしていません。
```
- 情報元
    - [IE非対応のJavascriptをまとめてみた](https://yukimonkey.com/fix-error/ie/)

### prepend
```javascript:prepend
var $element = document.getElementById('element1');
$element.prepend('<span>content</span>')
-> SCRIPT438: オブジェクトは 'prepend' プロパティまたはメソッドをサポートしていません。
```
- 情報元
    - [IE非対応のJavascriptをまとめてみた](https://yukimonkey.com/fix-error/ie/)

### append
```javascript:append
var $element = document.getElementById('element1');
$element.append('<span>content</span>')
-> SCRIPT438: オブジェクトは 'append' プロパティまたはメソッドをサポートしていません。
```
- 情報元
    - [IE非対応のJavascriptをまとめてみた](https://yukimonkey.com/fix-error/ie/)


### trimStart
```javascript:trimStart
var greeting = '   Hello world!   ';
greeting.trimStart();
-> SCRIPT438: オブジェクトは 'trimStart' プロパティまたはメソッドをサポートしていません。
```
- 情報元
    - [MDN Web Docs: String.prototype.trimStart()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart)
    - [MDN Web Docs: String](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String)

### trimEnd
```javascript:trimEnd
var greeting = '   Hello world!   ';
greeting.trimEnd();
-> SCRIPT438: オブジェクトは 'trimEnd' プロパティまたはメソッドをサポートしていません。
```
- 情報元
    - [MDN Web Docs: String.prototype.trimEnd()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd)
    - [MDN Web Docs: String](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String)

### startsWith
```javascript:startsWith
'Saturday night plans'.startsWith('Sat');
-> SCRIPT438: オブジェクトは 'startsWith' プロパティまたはメソッドをサポートしていません。
```
- 情報元
    - [MDN Web Docs: String.prototype.startsWith()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith)
    - [MDN Web Docs: String](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String)

### endsWith
```javascript:endsWith
'Cats are the best!'.endsWith('best', 17));
-> SCRIPT438: オブジェクトは 'endsWith' プロパティまたはメソッドをサポートしていません。
```
- 情報元
    - [MDN Web Docs: String.prototype.endsWith()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith)
    - [MDN Web Docs: String](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String)

### replaceAll
```javascript: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()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll)
    - [MDN Web Docs: String](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String)


### find
```javascript: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をまとめてみた](https://yukimonkey.com/fix-error/ie/)


### findIndex

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

- 情報元
    - [N04hさんのコメント](https://qiita.com/siruku6/items/3465fd6e0588ee35cc78#comment-243508208e094d01bbff)
    - [MDN Web Docs: Array.prototype.findIndex()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)


### codePointAt
```javascript:codePointAt
'☃★♲'.codePointAt(1);
-> SCRIPT438: オブジェクトは 'codePointAt' プロパティまたはメソッドをサポートしていません。
```
- 情報元
    - [MDN Web Docs: String.prototype.codePointAt()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt)
    - [MDN Web Docs: String](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String)


### includes
```javascript:includes
var some_array = ['Eins', 'Zwei'];
console.log(some_array.includes('Eins'));
-> SCRIPT438: オブジェクトは 'includes' プロパティまたはメソッドをサポートしていません。
```
- 情報元
    - [IE非対応のJavascriptをまとめてみた](https://yukimonkey.com/fix-error/ie/)


### querySelectorAll × forEach
```html: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で使う時の注意点](http://nextclip.net/front-end/185)
    - [IEで NodeList を forEach するとエラーになる問題の対処方](https://qiita.com/snjssk/items/8d179566b023703c0663)


## SCRIPT10xx

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

### =>
```javascript: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をまとめてみた](https://yukimonkey.com/fix-error/ie/)


### class
```javascript:class
class Hoge {

}
-> SCRIPT1002: 構文エラーです。
```
- 情報元
    - [IE非対応のJavascriptをまとめてみた](https://yukimonkey.com/fix-error/ie/)


### ...array
```javascript:スプレッド構文（...array）
var some_array = [1, 2, 3];
var copy_array = [...some_array];
-> SCRIPT1002: 構文エラーです。
```
- 情報元
    - [IE非対応のJavascriptをまとめてみた](https://yukimonkey.com/fix-error/ie/)


### オブジェクトの省略
```javascript:オブジェクトの省略
var obj = {
  shortFunction () {
    return 'オブジェクト内の関数が省略ができます！';
  }
};
console.log(obj.shortFunction());
-> SCRIPT1003: ':' がありません。
```
- 情報元
    - [注意！IE11で使えない最新JavaScritコード（ES6）](https://blog.capilano-fw.com/?p=1273)

### for-of
```javascript:for-of
items = ['one', 'two', 'three']
for (var item of items) {
  console.log(item);
}
-> SCRIPT1004: ';' がありません。
```
- 情報元
    - [IE非対応のJavascriptをまとめてみた](https://yukimonkey.com/fix-error/ie/)


### function method_name(x, y = 5) { ; }
```javascript:関数のデフォルト値
function sum(x, y = 5) {
  console.log(x + y);
}
sum(3);
-> SCRIPT1006: ')' がありません。
```
- 情報元
    - [注意！IE11で使えない最新JavaScritコード（ES6）](https://blog.capilano-fw.com/?p=1273)


### var [a, b] = ['a', 'b'];
```javascript:複数変数同時定義
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）](https://blog.capilano-fw.com/?p=1273)


### \`文字列${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をまとめてみた](https://yukimonkey.com/fix-error/ie/)

### fetch
```javascript:fetch
fetch(' ... ').then(  );
-> SCRIPT5009: 'fetch' は定義されていません。
```
- 情報元
    - [IE非対応のJavascriptをまとめてみた](https://yukimonkey.com/fix-error/ie/)


### IntersectionObserver
```javascript:IntersectionObserver
var io = new IntersectionObserver( ... )
io.observe($target)
-> SCRIPT5009: 'IntersectionObserver' は定義されていません。
```
- 情報元
    - [IE非対応のJavascriptをまとめてみた](https://yukimonkey.com/fix-error/ie/)

## その他

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

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

# Chrome
-> 3
```
- 情報元
    - [注意！IE11で使えない最新JavaScritコード（ES6）](https://blog.capilano-fw.com/?p=1273)

### RadioNodeList
```html: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>
```

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

-> 特に問題なく動いた
-> IEの中でも動かないバージョンと動くバージョンがあるのかもしれない
```
- 情報元
    - [IEでjavascriptが動かない！！](https://aokakes.hatenablog.com/entry/2018/11/11/IE%E3%81%A7javascript%E3%81%8C%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%84%EF%BC%81%EF%BC%81)


### javascriptでURL欄に膨大な文字数を入力するとエラー
> [IE] URL に使用可能な文字数は最大 2,083 文字  
> http://support.microsoft.com/kb/208427/ja

- 情報元
    - [Query Studioでレポートを開くと、IE側でJavaScriptエラーが起こる](https://www.ibm.com/support/pages/query-studio%E3%81%A7%E3%83%AC%E3%83%9D%E3%83%BC%E3%83%88%E3%82%92%E9%96%8B%E3%81%8F%E3%81%A8%E3%80%81ie%E5%81%B4%E3%81%A7javascript%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E8%B5%B7%E3%81%93%E3%82%8B)


## 内容精査中...（追記予定）
- [IEでAjaxのスクリプトが初回処理後に動かない原因！一時ファイルの設定で解決する方法！](http://jisakupc-technical.info/programing/jquery/4110/)
- [InternetExproler(IE)だけjQueryが使えない](http://n-portal.com/system/ajax_ie)
- [IEのセキュリティ設定が「高」になっている場合は、「信頼済みサイト」にドメインを登録するとJavascriptも動作するようになる](https://2nose.com/blog/2017/06/ie-security-high.html)
- [Shows date as NAN in IE only](https://www.sitepoint.com/community/t/shows-date-as-nan-in-ie-only/263193)
- [Apex Date Parse Invalid Date in IE11 - Valid In Chrome](https://salesforce.stackexchange.com/questions/254750/apex-date-parse-invalid-date-in-ie11-valid-in-chrome)
- [IE11 で使える機能と使えない機能](http://var.blog.jp/archives/58522825.html)  
よさげな情報が多そう
- [MDN Web Docs: String] (https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String)  
IEで動かないのがいっぱい載ってた...

# ちょっと信じられない対処法

試してません(`・ω・´)ｷﾘｯ

- [IEでだけ動かないスクリプトが一発逆転動くかもしれない](https://qiita.com/rev84/items/f7ca6a2af00daefa065c)  
本当に？
- [Polyfilling Internet Explorer 11](https://codepureandsimple.com/polyfilling-internet-explorer-11-a715c5b3c72)  
1行足すだけでPromiseが動くようになるらしい。信じられない。

# IE6-8の話
昔の話なので略

- [JavaScript初級者が調べるInternet Explorer特有の仕様いろいろ](https://havelog.ayumusato.com/develop/javascript/e199-js_difference_on_ie.html)
- [JavaScriptで.trim（）がIEで動作しない](https://codeday.me/jp/qa/20181122/10499.html)
- [[Javascript]「こまけぇーこたぁいいんだよ！」な人の為のIE対応スクリプトまとめ](http://webcre8.jp/collect/javascript-ie-correspondence.html)

# CSS/その他

- [【JavaScript】ブラウザ毎に使用出来ないcssを判別して分岐する方法【IE対策】](https://hirakublog.com/code/288/)

- Angularのprecompile失敗の可能性について
https://www.oipapio.com/question-4477848

# 理解~~できなかった~~する気にならなかったモノ
- [なぜIEがローカルHTMLページのJavaScriptファイルを制限するのですか？](https://codeday.me/jp/qa/20190301/341178.html)
- [Conditional Compilation of JScript/ JavaScript in IE](http://www.javascriptkit.com/javatutors/conditionalcompile.shtml)

# ES6の記法をES5で書き直す！？

ES6で追加された記法はこのページにまとまっていました。
[ECMAScript 6 — New Features: Overview & Comparison](http://es6-features.org/#Constants)

また、その一部ではありますが、5で書き直す方法も書かれています。
わかりやすい例としては、[アロー関数](http://es6-features.org/#ExpressionBodies)のとこなんかを見れば、どんなことがまとまっている記事なのか、すぐに理解できるかと思います。

# 備考

google検索

- 「ie javascript」 7ページ目まで見た
- 「ie11 javascript 動かない 原因」 3ページ目まで見た

# ご協力のお願い

他にもありましたら、是非ともこの記事上にコメント下さい.....(´・ω・`)

更新予定は今のところありませんが、多くの方が参照されているので、そのコメントがどなたかのお役に立てるかもしれません。