JSの初期化エラーについてご教授いただきたいです。

Question

自分の状況

現在JSのサイトを作って練習しているのですが、独学の為少しつまずいてしまったのでご教授いただければ幸いです。

分からないこと

初期化エラーのエラーコードが出てきたのだが、自分のコードのどこが出来ていないのか理解できなかった。

script.js:28 Uncaught ReferenceError: Cannot access 'checkPlaying' before initialization at HTMLImageElement.<anonymous> (script.js:28)

試したこと

エラーコードを検索してみたところ初期化のエラーだと分かった。検索結果

しかし、該当箇所のコードを見たところletなどを使用しておらず、知識も浅いため初期化についての理解が出来なかった。

コード

<div class="app">
        <div class="vid-container">
            <video loop>
                <source src="video/rain.mp4">
                </source>
            </video>
        </div>

        <div class="time-select">
            <button data-time="1500">25 Minutes</button>
            <button data-time="300">5 Minutes</button>
            <button data-time="600">10 Minutes</button>
        </div>
        <div class="player-container">
            <audio class="song">
                <source src="sounds/rain.mp3">
            </audio>
            <img src="svg/play.svg" alt="play" class="play">
            <svg class="track-outline" width="453" height="453" viewBox="0 0 453 453" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20" />
            </svg>
            <svg class="moving-outline" width="453" height="453" viewBox="0 0 453 453" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20" />
            </svg>
            <h3 class="time-display">0:00</h3>
        </div>
        <div class="sound-picker">
            <button data-sound="sounds/rain.mp3" data-video="sounds/rain.mp4"><img src="svg/rain.svg"
                    alt="rain"></button>
            <button data-sound="sounds/beach.mp3" data-video="sounds/beach.mp4"><img src="svg/beach.svg"
                    alt="beach"></button>
        </div>
    </div>

const app = () => {
    const song = document.querySelector(".song");
    const play = document.querySelector(".play");
    const outline = document.querySelector(".moving-outline circle");
    const video = document.querySelector(".vid-container video");

    const sounds = document.querySelectorAll(".sound-picker button");

    const timeDisplay = document.querySelector(".time-display");
    const timeSelect = document.querySelector("time-select button");

    const outlineLength = outline.getTotalLength();

    let fakeDuration = 600;

    outline.style.strokeDasharray = outlineLength;
    outline.style.strokeDashoffset = outlineLength;

    sounds.forEach(sound => {
        sound.addEventListener("click" , function(){
            song.src = this.getAttribute("data-sound");
            video.src = this.getAttribute("data-video");
            checkPlaying(song);
        });
    })

    play.addEventListener("click", () => {
        checkPlaying(song);
    });

    timeSelect.forEach(option => {
        option.addEventListener("click", function () {
            fakeDuration = this.getAttribute("data-time");
            timeDisplay.textContent = `${Math.floor(fakeDuration / 60)}:${Math.floor(fakeDuration % 60)}`;
        });
    });

    const checkPlaying = song => {
        if (song.paused) {
            song.play();
            video.play();
            play.src = "svg/pause.svg";
        } else {
            song.pause();
            video.pause();
            play.src = "svg/play.svg";
        }
    };

    song.ontimeupdate = () => {
        let currentTime = song.currentTime;
        let elapsed = fakeDuration - currentTime;
        let seconds = Math.floor(elapsed % 60);
        let minutes = Math.floor(elapsed / 60);

        let progress = outlineLength - (currentTime / fakeDuration) * outlineLength;
        outline.style.strokeDashoffset = progress;

        timeDisplay.textContent = `${minutes}:${seconds}`;

        if(currentTime >= fakeDuration) {
            song.pause();
            song.currentTime = 0;
            play.src= "svg/play.svg";
            video.pause();
        }
    }
};

app();

Comments

[so87]

掲載しているソースコードは実際に該当のエラーが発生しているソースコードと相違がありますか？わたしが試してみたところ別のエラー「Uncaught TypeError: Cannot read property 'forEach' of null」を確認しました。
const timeSelect = document.querySelector("time-select button");
ではなく
const timeSelect = document.querySelectorAll(`.time-select button`);
となるはずです。

Answer 1

投稿されたコードでは別のエラー「Uncaught TypeError: Cannot read property 'forEach' of null」が発生しており、いったん

<source src="video/rain.mp4">の閉じタグを削除と、下記修正を行った上で検証してみたところ ```js // const timeSelect = document.querySelector("time-select button"); const timeSelect = document.querySelectorAll(".time-select button"); ``` 該当の初期化エラーは確認できませんでした。

？と思ったのでソースを元に戻して、timeSelect.forEachでエラーが発生しているのは無視をして、playボタンを押してみたところ、該当のエラーコードが出てきました。初期化エラーということで初期化の段階でエラーが発生しているのだと勘違いしてしまいました。

ということで下記のセレクタの記述ミスが原因です。

const timeSelect = document.querySelector("time-select button");

ここでNodeListではなくElementを返すquerySelectorを選択してしまっているのと、引数のセレクタもクラス指定ができておらず、結果はnullとなるはずです。nullで初期化された変数timeSelectに対してforEachメソッドがコールされたので、JSとしては処理がそこ(timeSelect.forEach部分)で落ちます。checkPlaying関数を定義する前にJSが終了しているため、playボタンに登録されているイベントリスナーから存在しないcheckPlaying関数をコールしようとして、今回のエラーが発生という流れです。「checkPlayingなんてないよ。初期化ちゃんとした？」ということですね。

script.js:28 Uncaught ReferenceError: Cannot access 'checkPlaying' before initialization at HTMLImageElement.<anonymous> (script.js:28)

Comments

[LEMON_]

ご回答ありがとうございます。so87様の回答を繰り返しながら確認していく形となってしまっているので、間違いがあればご指摘いただきたいです。
ここでNodeListではなくElementを返すquerySelectorを選択してしまっているのと、引数のセレクタもクラス指定ができておらず、結果はnullとなるはずです。
→クラス指定見落としていました....Nodelistを返すquerySelectorAllではなく、Elementを返すquerySelectorを指定してしまっていたので、forEach関数が使えずにエラーが出てしまっていたということですね....
nullで初期化された変数timeSelectに対してforEachメソッドがコールされたので、JSとしては処理がそこ(timeSelect.forEach部分)で落ちます。checkPlaying関数を定義する前にJSが終了しているため、playボタンに登録されているイベントリスナーから存在しないcheckPlaying関数をコールしようとして、今回のエラーが発生という流れです。「checkPlayingなんてないよ。初期化ちゃんとした？」ということですね。
→関数を定義した段階で、timeSelectが初期化＝Nullしてしまっていた。そのあとは上記のような状況と認識しています。
「checkPlayingなんてないよ。初期化ちゃんとした？」ということですが、初期化の必要があるということなのでしょうか....？基礎的なところだと思うので、スルーしていただいてもかまわないです。

[so87]

少し認識が違うようです。Javascriptはインタプリタ方式で実行される動的なスクリプト言語という類のもので、`const checkPlaying = song => {`というアロー関数式が処理される前に、エラーでブロックを抜けてプログラムが完了しています。checkPlayingがアロー関数式を使った関数定義ではなく、`function checkPlaying(song){}`というような往年のユーザー関数定義ならばエラーにはならなかったはずです。関数宣言はスコープ内ならばどこに書いていても実行されますが、関数式は実行しながら順番にメモリに読み込まれます。これはJSの仕様で、`関数宣言`と`関数式`の挙動の違いとなります。LEMON_さんはcheckPlayingを定義して初期化してるつもりでも、今回の場合はエラーで処理が飛ばされているので、jsのインタプリタ上ではまだ読み込まれていない状態となります。

[so87]

今回のように`関数式`で関数定義するのであれば、使う箇所よりも上のほうに書いておきましょう。であれば、今回はforEachのエラーだけで済んだはずです。エラーが発生する箇所より、後ろに書いたため今回のエラーとなりました。でも理解が深まるはずなので、今回のquerySelectorミスは無駄ではなかったと思います＾＾

[so87]

少し認識が違うようですと述べさせていただいたのは
>>→関数を定義した段階で、timeSelectが初期化＝Nullしてしまっていた。
という解釈のところです。関数定義まで来ていない状況なので、「関数を定義した段階」とは表現できないということです。「timeSelectが初期化＝Nullされていたので、関数の定義(初期化)ができなかった」という認識なら大丈夫です。
>> 初期化の必要があるということなのでしょうか
はい。`関数宣言`と`関数式`で初期化のタイミングが異なるので、それぞれにあった適切な箇所で初期化を行う必要があります。

[LEMON_]

丁寧にご返信ありがとうございます。とても助かっています....
07/06に送っていただいたものを四苦八苦しながら読ませて貰ってたのですが、7日に送っていただいたもので理解が簡単になりました、ありがとうございます。

まずは、関数式と関数宣言のところですが知識が薄かったため、自分なりに調べてみたところhttps://www.atmarkit.co.jp/ait/articles/1605/18/news018.html
関数宣言と関数式の違いとは？の欄と今回の問題が一致していると思ったので読み、理解出来ました。ありがとうございます。
次に、初期化について認識違いをしており、func1 = "" などの工程が初期化なのかなと勝手に勘違いしていたことが原因でした。関数式と関数宣言のそれぞれ違ったタイミングでの初期化を行っていきます、ありがとうございました。