LoginSignup
136
124

More than 1 year has passed since last update.

@siruku6

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

Last updated at Posted 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追記

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

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

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

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

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

SCRIPT438

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

before

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

after

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

replaceWith

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

prepend

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

append

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

trimStart

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

trimEnd

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

startsWith

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

endsWith

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

replaceAll

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

find

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

findIndex

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

codePointAt

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

includes

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

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>

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');

class

class
class Hoge {

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

...array

スプレッド構文（...array）
var some_array = [1, 2, 3];
var copy_array = [...some_array];
-> SCRIPT1002: 構文エラーです。

オブジェクトの省略

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

for-of

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

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

関数のデフォルト値
function sum(x, y = 5) {
  console.log(x + y);
}
sum(3);
-> SCRIPT1006: ')' がありません。

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: 識別子がありません。

`文字列${hoge}`

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

SCRIPT5009

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

Promise

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

fetch

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

IntersectionObserver

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

その他

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

Set

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

# Chrome
-> 3

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の中でも動かないバージョンと動くバージョンがあるのかもしれない

javascriptでURL欄に膨大な文字数を入力するとエラー

[IE] URL に使用可能な文字数は最大 2,083 文字

http://support.microsoft.com/kb/208427/ja

内容精査中...（追記予定）

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

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

IE6-8の話

昔の話なので略

CSS/その他

理解できなかったする気にならなかったモノ

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

ES6で追加された記法はこのページにまとまっていました。
ECMAScript 6 — New Features: Overview & Comparison

また、その一部ではありますが、5で書き直す方法も書かれています。
わかりやすい例としては、アロー関数のとこなんかを見れば、どんなことがまとまっている記事なのか、すぐに理解できるかと思います。

備考

google検索

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

ご協力のお願い

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

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

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

136
124
9

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
136
124