質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.37%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

4967閲覧

javascriptの関数が未定義になる

misskabu

総合スコア28

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/12/31 12:40

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();">

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

misskabu

2020/12/31 17:09 編集

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

回答2

0

ベストアンサー

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

総合スコア7899

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

function自体を実行していますか?

投稿2020/12/31 12:49

educ_gt

総合スコア282

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

misskabu

2020/12/31 17:11

<input type="checkbox" onclick="allowInputAmend();">の記述で関数をコールしているつもりです。 同じファイルにベタでスクリプトを書くと動くのでそこは合っている認識です(私の勘違いかもしれませんが)。
educ_gt

2020/12/31 17:24

失礼しました。 では、defer はずしたらいかがでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問