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?

ES6「for-of」構文が動かない問題

More than 3 years have passed since last update.

現象

ios11だと動いていたJSが、ios10だと動かない。

原因

デバッグしたところ、そもそもJSファイルを読み込み時にエラーが出た。
ios10, ios9でfor-of構文が動かない。
※IEでも動かないみたい。

以下、実際のコード。

ios10,ios9で動かないコード
const items = document.getElementsByClassName('js_item');
for (const item of items) {
    item.addEventListener('click', e => {
        ...
    });
};

対応手順

以下、一つずつ解説しながら対応していく。

対応方法1

1. for-ofが動かないので、forEachに書き換える

修正前
const items = document.getElementsByClassName('js_item');
for (const item of items) { // for-of構文
    item.addEventListener('click', e => {
        ...
    });
};

修正後
const items = document.getElementsByClassName('js_item');
items.forEach(function(item) { // forEach構文
    item.addEventListener('click', e => {
        ...
    });
});

for-ofとは

オブジェクトのプロパティの値についての繰り返しを行うためのメソッド。
ES6(ES2015)から導入された構文。なので、ブラウザのバージョンが古い場合に動かない可能性がある。
もし動かない場合は、後述のArray.forEachで配列に対する繰り返しを行うことができる。

forEachとは

配列の各要素について繰り返し処理を行うためのメソッド。できることは前述のfor-ofと同じで、配列のみに適用可能。
Array.prototype.forEach() - JavaScript - MDN - Mozilla

2.「配列のようなオブジェクト」だとforEachが動かないので、配列に変換する

修正前
const items = document.getElementsByClassName('js_item'); //配列のようなオブジェクト
items.forEach(function(item) {
    item.addEventListener('click', e => {
        ...
    });
});

「配列のようなオブジェクト」であるitemsはArrayのメソッドを使えない。なので、itemsを配列に変換する。
callメソッドを使って、Array.prototype.sliceメソッドを実行し、新しい配列に変換する。

修正後
const items = Array.prototype.slice.call(document.getElementsByClassName('js_item'),0); //配列に変換
items.forEach(function(item) {
    item.addEventListener('click', e => {
        ...
    });
});

「配列のようなオブジェクト」とは

Array(配列)ぽいのにArrayのメソッドを持っていない「配列のようなオブジェクト」。
Arrayオブジェクトには多くのメソッドがあるが、「配列のようなオブジェクト」ではそのArray(配列)のメソッドが使えない。
なので、Array.prototype.forEach()が使えなかった。

「配列のようなオブジェクト」といえば、HTMLCollectionやNodeList、argumentsなどがある。

Array.prototype.sliceとは

配列の一部を取り出して新しい配列を返す。Arrayのメソッドなので、前述の「配列のようなオブジェクト」では使えない。

Array.prototype.slice() - JavaScript - MDN - Mozilla

callメソッドとは

本来使えないはずのメソッドを使うことができる。

 全ての関数が共通して持っているメソッド。全ての関数はFunctionクラスのオブジェクトで、callはFunction.prototypeの中にある。なので、関数宣言、関数式、new Functionのいずれの方法で関数を生成しても、callメソッドが継承される。
callメソッドの第一引数には、あるメソッドを実行させたいオブジェクトを指定する。

applyとcallの使い方を丁寧に説明してみる - あと味

例えば、以下。

callメソッドとは
class Hoge {
  constructor() {
    this.name = "hoge";
  };
  echo() {
    console.log(this.name);
  };
};
class Fuga {
  constructor() {
    this.name = "fuga";
  };
};

const h = new Hoge();
const f = new Fuga();

h.echo();       //「hoge」と表示される
f.echo();       //これはFugaに定義されていないので、使うことができない。
h.echo.call(f); //「fuga」と表示される

Fugaを「主体」として、Hogeが保有しているecho「メソッド」を実行することができる。

つまり、「Aが持っていないメソッド」.call(A);で、「Aが持っていないメソッド」を「A」で実行することができる。

Array.prototype.slice.call();

Array(配列)ぽいのにArrayのメソッドを持っていない「配列のようなオブジェクト」でも、Arrayのメソッドであるsliceメソッドを使うことができる。
なので、「配列のようなオブジェクト」を配列に変換することができる。

今回の場合、配列ではないdocument.getElementsByClassName('js_item')をcallメソッドを使って、Arrayのメソッドであるsliceメソッドを実行し、配列に変換している。

「配列のようなオブジェクト」を配列に変換する
const items = Array.prototype.slice.call(document.getElementsByClassName('js_item'),0); //配列に変換
items.forEach(function(item) {
    item.addEventListener('click', e => {
        ...
    });
});

以下、修正したコード全文

修正前
const items = document.getElementsByClassName('js_item');
for (const item of items) {
    item.addEventListener('click', e => {
        ...
    });
};
修正後
const items = Array.prototype.slice.call(document.getElementsByClassName('js_item'),0);
items.forEach(function(item) {
    item.addEventListener('click', e => {
        ...
    });
});

対応方法2

こちらの方が記述量が少なく済む。
もしかしたら、前述の対応方法1を読んでいた方の中には、こちらの方法でもいいのでは?と思った方もいるでしょう。

「配列のようなオブジェクト」だとforEachが動かないので、callメソッドを使ってforEachを実行する

修正前
const items = document.getElementsByClassName('js_item');
for (const item of items) {
    item.addEventListener('click', e => {
        ...
    });
};
修正後
const items = document.getElementsByClassName('js_item');
Array.prototype.forEach.call(items, function(item) { // callメソッドを使ってforEachを実行
    item.addEventListener('click', e => {
        ...
    });
});

そもそも「配列のようなオブジェクト」でもforEachを動かしたいのだから、Array.sliceメソッドを使わずにcallメソッドでforEachを実行すればいいのでは。

以下、修正したコード全文

修正前
const items = document.getElementsByClassName('js_item');
for (const item of items) {
    item.addEventListener('click', e => {
        ...
    });
};
修正後(対応方法1の場合)
const items = Array.prototype.slice.call(document.getElementsByClassName('js_item'),0);
items.forEach(function(item) {
    item.addEventListener('click', e => {
        ...
    });
});
修正後(対応方法2の場合)
const items = document.getElementsByClassName('js_item');
Array.prototype.forEach.call(items, function(item) {
    item.addEventListener('click', e => {
        ...
    });
});

修正してみて

なんでもES6など新しいのを使えばいいというわけではなかった。
対応ブラウザや仕組みを理解することが必要だと痛感した。
今回をきっかけに、Javascriptの配列についてもっと調べようと思った。

Apprentice_engineer
社内共有用のアカウントです。 大したことは書きません、memo程度です。 下書きに溜まっていたものがいくつかあるので、一気に出せたらなと思ってます。。
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