javascriptの関数が未定義になる

LaravelとLaravelMixを使用して、
チェックボックスのon/offによって入力欄の活性/非活性を切り替える処理を作っています。

jsファイルを外部ファイルに切り出すと関数が読み込めず、詰まってしまいました。
jsファイルそのものは読み込めており、関数でなく、グローバルにalert('test');などと記述するとページ読み込み時に反応はします。
またこの関数の中身をダイレクトにbladeの</body>タグの付近に記述しても正しく動作します。
外部ファイルに切り出した関数だけが読めません。

読み込み箇所をbodyタグの閉める前、headタグの中と試しましたがいずれも同じ反応でした。
何が間違っているか分かる方おられませんか？

webpack.mix.js

javascript
1mix.js('resources/assets/js/app.js', 'public/js')
2   .js('resources/assets/js/planning_document_manage/regist_form_component/staff_meeting.js','public/js')
3   .sass('resources/assets/sass/app.scss', 'public/css');

read.js

javascript
1function allowInputAmend() {
2    alert('test');
3}

base.blade.php

php
1<head>
2<script defer type="text/javascript" src="{{ mix('js/read.js') }}"></script>
3</head>

test.blade.php(上記、base.blade.phpを継承している。)

php
1<input type="checkbox" onclick="allowInputAmend();">

hoshi-takanori

2020/12/31 13:43

window.allowInputAmend = function() { alert('test'); }; としたらうまくいくかも？ https://stackoverflow.com/questions/51175235/how-to-add-global-functions-in-laravel-webpack-mix-js

misskabu

2020/12/31 17:09 編集

hoshi-takanoriさんのコードの通りにしたら期待通りの動作になりました。ありがとうございました。あなたの回答をベストアンサーとしたいのですが、この欄からはできそうにないので、もしポイントを御所望の場合はお手数ですが普通に回答でお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

read.js の内容を次のようにしたらうまくいくのでは。

js
1window.allowInputAmend = function() {
2    alert('test');
3};

参考: javascript - How to add global functions in Laravel webpack.mix.js? - Stack Overflow

問題はなぜそう書くとうまくいくのかですが、まずブラウザの JavaScript においては、グローバル変数とは window オブジェクトのプロパティのことです。なので、window のプロパティに無名関数を代入するとグローバル関数を定義したことになります。

参考: windowオブジェクトとグローバルの実態について | JavaScript応用編 - ウェブプログラミングポータル

そして、元の書き方ではうまくいかない理由ですが、Laravel-Mix の mix.js() では、webpack を使って JavaScript のモジュール機構 (ES2015 モジュールとも言う) が実装されており、異なる .js ファイルで同じ名前の変数や関数が定義されても問題が起こらないように、各 .js ファイルが独立した名前空間を持つ (つまり、普通に function allowInputAmend() { 〜 } のように定義されたものはその .js ファイルのローカル関数になる) ようになっているためです。

(window オブジェクトのプロパティをいじるのは、モジュールシステムの抜け道になりますが、現状はまだブラウザで直接モジュールを使うのは一般的ではないようなので…。)

参考: ブラウザで覚えるES Modules入門 - JavaScriptでモジュールを使う時代 - ICS MEDIA

投稿2020/12/31 23:06

hoshi-takanori

総合スコア7895