laravel、 jsファイルで、読み込んだスクリプトの関数が実行できない。

Question

前提・実現したいこと

jsファイルで関数を作って,htmlのonclickから発火させたい。

発生している問題・エラーメッセージ

scriptタグ直で書いた関数(test)は実行できるが、jsファイル由来の関数(test)は実行されずReferenceErrorとなってしまう。

1:170 Uncaught ReferenceError: test is not defined

該当のソースコード

<x-app-layout>
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="max-w-5xl w-full mx-auto bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 mx-auto bg-white border-b border-gray-200 text-center">
                    <h1 class="text-4xl mb-4">{{ $group->title }}</h1>
                    <p class="mb-8">製作者: {{ $group->username }}</p>
                    <p class="mb-8">問題数: {{ $count }}</p>
                    <div class="relative max-w-md mx-auto">
                        <label style="left: 10.5rem" class="py-1 px-2 -top-4 bg-white absolute" for="info">
                            クイズの概要
                        </label>
                        <p class="w-full py-4 px-4 mb-8 border border-yellow-500" id="info" class="mb-8">
                            {{ $group->information }}</p>
                        <label for="good-count">
                            いいね
                        </label>
                        <p id="good-count" class="mb-8 mt-2"><span data-control="0" onclick="test()"
                                class="fas fa-heart mr-3 cursor-pointer"></span>{{ $group->good_count }}</p>
                        <div class="flex flex-col">
                            <button data-control="1" class="mb-8 border border-sky-400 py-2 px-4">お気に入りに追加</button>
                            <button
                                class="py-2 px-4 text-white border border-red-400 bg-red-400 focus:border-red-500 focus:bg-red-500 animate-pulse">クイズを解く</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <script src="{{ asset('js/like.js') }}"></script>
    <script>
        // test();
        // function test() {
        //     console.log('test');
        // }
    </script>
</x-app-layout>

function test() {
    console.log('test');
}

// test();

試したこと

laravelMixで新たなエントリーポイントを作り(like.js)それを、scriptで読み込ませています。
like.js自体は、200でしっかりと読み込まれています。
npm run dev でコンパイルしてます。

like.js内で、test()を実行したところ、testとコンソールに表示されました。しかしhtmlからは上手く実行できないのが謎です。

また js/like.jsで読み込んだ後のスクリプトでも、test()の実行を試みましたが、同じエラーが起きました。グローバルスコープであるはずなのになぜでしょうか？

Answer 1

JSの変数スコープの勉強が必要になるでしょう

参考記事: 関数とスコープ - JavaScript Primer

function test () {
  console.log(123);
}
test(); // これは実行出来るが

// 関数を定義してその中で関数や変数を定義しても
(function(){
  function test () {
    console.log(123);
  }
})();

// test関数は他の箇所のスコープにあるので使えない
test(); // Uncaught ReferenceError: test is not defined

JavaScriptは関数を定義する度にスコープが作られます。

JavaScriptは指定した名前の変数・関数が今のスコープに無ければ
「親のスコープ」に確認しに行きます。
兄弟や子孫は探しに行きません。

function test2 () {
  console.log(234);
}

(function(){
  // 関数スコープを切ってtest関数を定義
  function test () {
    console.log(123);
  }
})();

(function(){
  // これは兄弟スコープになるのでアウト
  // 親→祖父といった風に上にしか辿れない
  test();

  // こちらは親スコープに関数が存在しているのでセーフ
  test2();
})();

---

laravelMixで新たなエントリーポイントを作り(like.js)それを、scriptで読み込ませています。

ブラウザに搭載されたデベロッパーツールのNetworkタブを開いて
一度リロードしてlike.jsファイルに具体的にどんなコードが書き込まれているかを確認してみてください。

恐らくですが、ファイルの全体を大きく関数で包んでいるはずです。
そしてスコープを作ってからその中で処理を記述しているはずです。

こういう関数で包んでスコープ作る作戦をクロージャーと呼びます。

Comments

[Patao_program]

本当ですね！バンドルされるとラッピングされてしまうのですね。
グローバルとして作用してほしかったので、like.jsを読み込む前に、変数を宣言して関数を代入するという対処をするしかない感じですかねー

[miyabi-sun]

最近PHPには疎いのでLaravelには詳しくないですが、
Laravel MixではWebpackを使っているようです。

Webpackは
Node.jsが利用しているrequireを再現したJSファイルにコンパイルして
メインロジックとともに書き出すという手法です。

JavaScriptに直書きした場合、
グローバルスコープに値を保存したければ
`window.state = 123;`という風にwindowオブジェクトがほぼグローバルスコープになっているので
windowオプジェクトにぶら下げるコードを記述してやれば動くかと思います。

でもまぁ、Node.js流儀の方が綺麗なコードになるので
Webpackを覚えてそれに準拠した形で利用することを推奨します。

[Patao_program]

> Node.js流儀の方が綺麗なコードになる
これは、どういうことですか？

[miyabi-sun]

整理整頓の話です。

大昔はC言語やPHPでグローバルスコープにとりあえず関数や変数を置いておいて……
みたいな事をやる人が多かったのですが、
システムの規模が大きくなるにつれ、相互上書き等で動作しないとかバグが大量に出るという問題に悩まされていました。

それを解決する為に
「お前ら外部のファイルに書いてある関数を利用したければ、ソースコードの上の方に提供元を書くような設計にしろ」
こういうプログラミングのテクニックというものが出来て、
一般常識みたいになっています。

なのでグローバル変数スコープは出来るだけ利用しないようにしましょう。

しかしJavaScriptには外部のライブラリを読み込む概念がありません。
scriptタグを跨いで宣言した場合、グローバルスコープ(window.変数名)に変数を定義して決め打ちで利用する必要があります。
上記の通り、宣言したと思った関数が無いとか、違うモノを参照している等中々バグを解消出来ません。
PHPやC言語で培ってきたテクニックが通用しないのです。

とりあえずJavaScriptでは暫定措置として現場レベルでは関数で括って、
外のグローバルスコープを汚さないようにしましょうねというのが暗黙の了解になりました。

SassのuseやNode.jsのrequireはグローバルスコープを汚さない為
何のライブラリの何を利用するかをソースコードの上の方に記述して
そこから引っ張るような仕組みになっています。

Webpack越しにNode.js→JavaScriptを生成する時は
requireをふんだんに使えるので、Node.js流儀に従うのがコードが綺麗になります。
恐らくその目的でLaravelはNode.js(Webpack)を採用しているのでしょう。
嫌なら素のJavaScriptで管理して、Laravelが用意しているJSサポート機能は削って使う方が良いと思います。

[Patao_program]

そもそも、requireでモジュール化して汚染を防いできれいにという以前に、htmlに関数を埋め込んでも、webpackによる関数のスコープに阻まれているため、跨がらせざるおえないと思うですが、もしくは、webpackの設定をいじれば、バンドルをして出力するファイルは関数スコープで囲ませないようなことはできるのですか？

[Patao_program]

上記では表されてないのですが、phpからデータを渡すような実装も加えています。

[hentaiman]

> 、htmlに関数を埋め込んでも、webpackによる関数のスコープに阻まれているため、

なのでエントリーポイントとなる変数をexportとしてbootstrapまたはそれに相当するファイルでwindowオブジェクトにexportした変数を持たせて使います