JavaScript 繰り返し同じ処理を書いてしまっている部分を修正したいです

Question

前提・実現したいこと

同じ記述を繰り返してしまっている部分をまとめられるかどうか知りたいです。

該当のソースコード

audioタグのロード状況を確認するために下記のコードを記述しました。
同じコードを5回書けば想定した動きにはなるのですが、
5回書いてしまっている部分をまとめたいと思い、後述の「試したこと」のように書き直そうとしたところ
フラグの変更の仕方がわからず、うまくいきませんでした。

const audioElems = document.getElementsByTagName('audio');

const audio01 = document.getElementById('audio01');
const audio02 = document.getElementById('audio02');
const audio03 = document.getElementById('audio03');
const audio04 = document.getElementById('audio04');
const audio05 = document.getElementById('audio05');

let loadedAudio01 = false;
let loadedAudio02 = false;
let loadedAudio03 = false;
let loadedAudio04 = false;
let loadedAudio05 = false;

let loadedAudiosLength = 0;
let loadedAudioAll = false;

// loadedAudio01がfalseであればロードを開始する
if (!loadedAudio01) {
    audio01.load();
    audio01.addEventListener("loadstart", function () {
        // ロードスタート後の処理
        console.log(audio01.id + ' is now loading...');
    })
    audio01.addEventListener("canplaythrough", function () {
        // ロード完了後の処理
        console.log(audio01.id + ' is loaded.');
        loadedAudio01 = true;
        loadedAudiosLength += 1;
        if (loadedAudiosLength === audioElems.length) {
            // すべての要素をロードした後の処理
            loadedAudioAll = true;
            console.log('All contents are loaded.');
        }
    })
}
// ↓この後、「01」の部分を02〜05に変更した同じコードを4回記述

//出力結果
// audio01 is now loading...
// audio02 is now loading...
// audio03 is now loading...
// audio04 is now loading...
// audio05 is now loading...
// audio02 is loaded.
// audio01 is loaded.
// audio03 is loaded.
// audio04 is loaded.
// audio05 is loaded.
// All contents are loaded.

試したこと

// 変数定義は省略

const audioElems = [audio01,audio02,audio03,audio04,audio05];
const loadedAudioTriggers = [loadedAudio01, loadedAudio02, loadedAudio03, loadedAudio04, loadedAudio05];

for (let i = 0; i < audioElems.length; i++){
    if (!loadedAudioTriggers[i]) {
        audioElems[i].load();
        audioElems[i].addEventListener("loadstart", function () {
            console.log(audioElems[i].id + ' is now loading...');
        })
        audioElems[i].addEventListener("canplaythrough", function () {
            console.log(audioElems[i].id + ' is loaded.');
            loadedAudioTriggers[i] = true; //これでは駄目だけど、やり方がわからない
            loadedAudiosLength += 1;
            if (loadedAudiosLength === audioElems.length) {
                loadedAudioAll = true;
                console.log('All contents are loaded.');
                console.log('loadedAudio01は' + loadedAudio01);
                console.log('loadedAudio02は' + loadedAudio02);
                console.log('loadedAudio03は' + loadedAudio03);
                console.log('loadedAudio04は' + loadedAudio04);
                console.log('loadedAudio05は' + loadedAudio05);
            }
        })
    }          
}

//出力結果
// audio01 is now loading...
// audio02 is now loading...
// audio03 is now loading...
// audio04 is now loading...
// audio05 is now loading...
// audio02 is loaded.
// audio01 is loaded.
// audio03 is loaded.
// audio04 is loaded.
// audio05 is loaded.
// All contents are loaded.
// loadedAudio01はfalse ←本当はload後はtrueに変更したい
// loadedAudio02はfalse
// loadedAudio03はfalse
// loadedAudio04はfalse
// loadedAudio05はfalse

補足情報

下記の質問にご回答をいただき、間違っている理由はわかったのですが、上記の場合どのように修正してよいかわからず、
周辺のコードを追加して再度質問させていただきました。何卒よろしくお願いいたします。
https://teratail.com/questions/198715

Comments

[think49]

変数 loadedAudiosLength が未定義のようです

[pecoro0321]

すみません、追加修正いたしました。ご指摘ありがとうございます。

Answer 1

audio01, audio02, ...
loadedAudio01, loadedAudio02, ...
という変数を作らず、audioElemsとloadedAudioTriggersだけで操作するようにしたらいいのでは。

const loadedAudioTriggers = [false, false, false, false, false];

とか、

const loadedAudioTriggers = (function() {
    const array = [];
    for (let i = 0; i < 5; i++) {
        array.push(false);
    }
    return array;
}());

など・・・
そうすれば、

console.log('loadedAudio01は' + loadedAudio01);
console.log('loadedAudio02は' + loadedAudio02);
console.log('loadedAudio03は' + loadedAudio03);
console.log('loadedAudio04は' + loadedAudio04);
console.log('loadedAudio05は' + loadedAudio05);

これもすっきりして、

for (let j = 0; j < loadedAudioTriggers.length; j++) {
    console.log('loadedAudio' + j + 'は' + loadedAudioTriggers[j]);
}

となります。

Comments

[pecoro0321]

配列の要素にtrue/falseを入れるべきところを間違ってしまっていたのですね。ご指摘いただいた部分を修正して無事に動くようにできました。ありがとうございました。

[退会済みユーザー]

ちなみにですが、
loadedAudio01, loadedAudio02, ...みたいな変数の作り方は、後で増減したくなるなどしたときに困るのでやめましょう、というのと、

let loadedAudio01 = false;
let loadedAudio02 = false;
let loadedAudio03 = false;
let loadedAudio04 = false;
let loadedAudio05 = false;
const loadedAudioTriggers = [loadedAudio01, loadedAudio02, loadedAudio03, loadedAudio04, loadedAudio05];

という書き方で、おそらくloadedAudioTriggers を「変数の配列」か何かと思われていますが、実際はloadedAudioxxは全部プリミティブ型なので、実際にはfalseの配列にしかなっていない、というのも覚えておいてください。（前回の質問も見ましたが、そこにある回答でも似たようなことを書いてた方がいらっしゃったと思いますが念の為）

[pecoro0321]

大変勉強になります！確かに、前回の質問からまったく成長していない間違い方をしていました。。ありがとうございます！

Answer 2

loadedAudioTriggers[i] = true; //これでは駄目だけど、やり方がわからない

それが配列である事は理解していると思いますので、audioElems, loadedAudioTriggers と同様に初期値として配列を定義してください。

• Array - JavaScript | MDN

Re: pecoro0321 さん

Comments

[think49]

編集画面に回答文はありますが、外面上は出力されないteratailシステムのバグです。
編集画面で本文に何も変更を加えずに [更新する] ボタンを押下できなくなりました(今までは出来ました)。
本バグは未修正のようなので、バグ報告の為に本回答は編集せず、コメント欄に回答本文を書きます。

[think49]

> loadedAudioTriggers[i] = true; //これでは駄目だけど、やり方がわからない
それが配列である事は理解していると思いますので、`audioElems`, `loadedAudioTriggers` と同様に初期値として配列を定義してください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

[pecoro0321]

ご回答ありがとうございました！配列の要素にtrue/falseを入れるべきを、トリガー名を入れてしまっていたのですね。。名前と値をいつも混同してしまっている気がするので、また勉強したいと思います。

Answer 3

やり方はいろいろあると思いますが、私ならこう書きます。ご参考になれば幸いです。
ループの中のイベントリスナから、ループの外の配列にアクセスするのは面倒なので、Objectで読み込みの状態を管理するようにしています。

// 読み込み状態を管理する Object
let loadedFlagState = {};

audioElems.forEach(elm => {
  // 読み込みが完了しているなら、StateをTrueにして次のループへ
  if(elm.readyState === 4) {
    loadedFlagState[elm.id] = true;
    confirmAllContentsLoadingAreCompleted(audioElems, loadedFlagState);
    return;
  }

  elm.addEventListener('loadstart', evt => {
    console.log(`${evt.currentTarget.id} is loading now.`);
  });
  elm.addEventListener('canplaythrough', evt => {
    console.log(`${evt.currentTarget.id} has loaded.`);
    loadedFlagState[elm.id] = true;
    confirmAllContentsLoadingAreCompleted(audioElems, loadedFlagState);
  });

  // Stateに {audioXX: false} をセットする。読み込みが完了したら true にする
  loadedFlagState[elm.id] = false;

  // 読み込み開始
  try {
    elm.load();
  } catch(e) {
    console.error(`Error on ${elm.id}: ${e.message}`);
  }
});

function confirmAllContentsLoadingAreCompleted() {
  if(Object.keys(loadedFlagState).filter(key => loadedFlagState[key]).length === audioElems.length) {
    console.log('All contents have loaded.');
  }
}

---

以下、コメントを受けて追記します。 (コメントに対するコメントではコードブロックが使用できないため)
Jul 9, 2019 08:03 AM

loadedFlagState = {

'audio01':'false',
'audio02':'false',
'audio03':'false',
'audio04':'false',
'audio05':'false'
}というようなオブジェクトを生成しているという理解で合っていますでしょうか？

はい、概ねあっていますが、true/falseは文字列ではないのでシングルクォートでは囲みません。生成している Objectは次のとおりです。

loadedFlagState = {
  'audio01': false,
  'audio02': false,
  'audio03': false,
  'audio04': false,
  'audio05': false
}

下記の部分はどういった状態の要素を意味しているのでしょうか？

Object.keys(loadedFlagState).filter(key => loadedFlagState[key])

詳細は1つ1つMDMなどを参照していただきたいですが、
Object.keys(obj) は obj が持つキーを配列で取得するメソッドで、今回は ['audio01', 'audio02' ... 'audio05'] が得られます。

Array.prototype.filter(callback(element, index, array)) は配列に条件を指定してフィルターを掛けるメソッドで、条件をcallbackで指定します。アロー関数で記載していますが省略せずに書くと、

[
  'audio01',
  'audio02',
  'audio03',
  'audio04',
  'audio05'
].filter(function(key) {
  return loadedFlagState[key];
});

になります。たとえば loadedFlagState['audio01'] と loadedFlagState['audio02'] が true (= 読み込みが完了している) で、ほかは false の場合、 ['audio01', 'audio02'] が得られます。
['audio01', 'audio02'].length は audioElems.length とは当然一致しないので、まだ読み込みが完了していないことを意味します。

余談ですが、

function confirmAllContentsLoadingAreCompleted() {
  if(Object.keys(loadedFlagState).filter(key => loadedFlagState[key]).length === audioElems.length) {
    console.log('All contents have loaded.');
  }
}

と書くよりも、

function confirmAllContentsLoadingAreCompleted() {
  if(Object.keys(loadedFlagState).filter(key => loadedFlagState[key]).length !== audioElems.length) return;
  console.log('All contents have loaded.');
}

としたほうが、無駄なインデントが省けてbetterでしたね、失礼しました。

Comments

[pecoro0321]

ありがとうございます！！大変参考になります。
loadedFlagState = {
'audio01':'false',
'audio02':'false',
'audio03':'false',
'audio04':'false',
'audio05':'false'
}というようなオブジェクトを生成しているという理解で合っていますでしょうか？
1点質問したいのですが、下記の部分はどういった状態の要素を意味しているのでしょうか？
Object.keys(loadedFlagState).filter(key => loadedFlagState[key])
ご教授いただけますと幸いです。

[pecoro0321]

大変丁寧なご説明ありがとうございました！「条件をcallbackで指定する」という意味がはじめ難しかったのですが、MDNの説明で「callbackは配列の各要素に対して実行するテスト関数です。この関数が true を返した要素は残され、false を返した要素は取り除かれます。」というのを読んで理解できました！アロー関数だとreturnも省略できるのですね。大変勉強になりました。