###質問
WordPressで、JSで2回目のconstを宣言した場合、そのJSファイルが読み込まれなくなります。
これがなぜか理由をお聞きしたいです。
###発生している問題
以下「functions.php」で「ok.js」と「test.js」を読み込ませたいのですが、「test.js」だけが読み込まれません。
「functions.php」
php
1add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' ); 2function my_enqueue_scripts(){ 3 4 $template_directory_uri = get_template_directory_uri(); 5 6 // 読み込まれる 7 wp_enqueue_script( 'ok.js', $template_directory_uri . '/js/ok.js', array(), '1.0.0', true ); 8 9 // 読み込まれない 10 wp_enqueue_script( 'test.js', $template_directory_uri . '/js/test.js', array(), '1.0.0', true ); 11 12}
下記が「test.js」です。
js
1(function($){ 2 3 $(document).on('click','.button', function(){ 4 5 const item = $(this).closest('.item'); 6 7 const item = $(this).closest('.item'); 8 9 }); 10 11})(jQuery);
###再現条件
なんで読み込まれいのか、数時間かけてやっと「2回目のconstを宣言した場合」という再現条件にたどりつきました。つまり上の「test.js」です。
これはどうしてですか?
2回目のconstがエラーになるのは当然として、ならばファイルを読み込んでから「const2回宣言してますよ」というエラーを出せばいいでしょ!と思います。
そのように「読み込んでからエラーを出す」という仕様にせず、「そもそも読み込まなくする」という仕様に、どんなメリットがあるののでしょうか。
エラーも出ないためにこの再現条件を見つけるのに本当に苦労しましたので、明らかにデメリットを大きく感じております。
###補足(ブラウザによる違い)
ご報告です。エラーがでずファイルの読み込みもないのはFirefoxでの場合だけでして、Chromeでは下記エラーが無事出ました。
test.js:7 Uncaught SyntaxError: Identifier 'item' has already been declared
###補足(全ファイル)
全てのファイルの【ディレクトリ】と【中身】は下記です。(親テーマでも一緒ですがわかりやすいので子テーマにします)
プラグイン等が無いまっさらなWordPress(最新の5.0.3)に入れて、Firefoxでお試しいただければ再現するかと思います。
【ディレクトリ】
twentynineteen-child ├ functions.php ├ style.css ├ js ├ test.js ├ ok.js
【中身】
「functions.php」
php
1<?php 2add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); 3function theme_enqueue_styles() { 4 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); 5 6} 7 8add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' ); 9function my_enqueue_scripts(){ 10 11 $template_directory_uri = 'http://example.com/wp-content/themes/twentynineteen-child'; 12 13 // 読み込まれる 14 wp_enqueue_script( 'ok.js', $template_directory_uri . '/js/ok.js', array(), '1.0.0', true ); 15 16 // 読み込まれない 17 wp_enqueue_script( 'test.js', $template_directory_uri . '/js/test.js', array(), '1.0.0', true ); 18 19}
「style.css」
css
1/* 2Theme Name: twentynineteen child 3Template: twentynineteen 4*/
「test.js」
js
1(function($){ 2 3 $(document).on('click','.button', function(e){ 4 5 const item = $(this).closest('.item'); 6 7 const item = $(this).closest('.item'); 8 9 }); 10 11 12})(jQuery);
「ok.js」
js
1console.log('this is ok.js');
回答1件
あなたの回答
tips
プレビュー