Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

対象者

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

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

気を付けたこと

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

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

更新予定

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

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ページ目まで見た

ご協力のお願い

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

siruku6
【①記事を書く理由】最初は自分のメモのために書いていた。が、意外と評価されたりもしたので、なるべく日本語の記事がない情報を書いていこうと思っています。(英語読むの時間かかるからね) 【②目標】2021年中の目標は、システムトレードでまず年間を通して収支をプラスにすること。まずはそこからだよ(`・ω・´)ギリィ...(←儲かると思って定額寄付を始めたが、たぬきの計算となった)
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away