Q&A
script に type=module をつけることは試しましたでしょうか？
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules
参考: https://livecodes.io/?x=id/5p5u2s9ge4v
WEBサイト訪問時にサーバーでいくつかデータを取得し、その JSON をブラウザに渡し JavaScript で加工し HTML として表示する。
以上のような流れにおいて、JSON はどうやってブラウザに渡せばいいのでしょうか？
例えば php に次のように書いても、この data という変数はグローバルを汚染しますよね？
php
1<head> 2ㅤㅤ<script> 3ㅤㅤㅤㅤconst data= <?= json_encode(User::getData()); ?>; 4ㅤㅤ</script> 5</head>
もしかして、次のように即時関数を利用してスコープに閉じ込めればいいのでしょうか？（しかし <head> 内にやたら長いコードが入ってしまい HTML としてどうなのでしょうか？）
php
1<head> 2ㅤㅤ<script> 3ㅤㅤㅤㅤ(function() { 4ㅤㅤㅤㅤㅤㅤconst data = <?= json_encode(User::getData()); ?>; 5ㅤㅤㅤㅤㅤㅤ// dataを使ってHTMLに反映する処理をここに書く 6ㅤㅤㅤㅤ})(); 7ㅤㅤ</script> 8</head>
それとも、php から渡すのはやめて、JavaScript ですぐに .fetch() して data を取ってくればいいのでしょうか？（しかしこれではワンテンポ遅くなりますよね？）
極論を言えば好きにすればいいのかもしれませんが、とにかく実装経験がゼロなので、ご経験から思いついたアドバイスを頂ければと思って質問させていただきました。
ちなみに、JavaScript ファイルは全てモジュールを使っています。
うおお、そういうことですか。なるほど、ありがとうございます！
module は ".jsファイルごとの範囲でスコープを限定しれくれる" のかと思っていました。
そうではなくて、" <script type="module"> から </script> までの範囲でスコープを限定してくれる" という理解であっていますでしょうか？
両方です。（厳密には import / export できる空間内を他と隔離するです。
PHP で js を書きだして、必要なモジュールで import すれば、headが大きくなる問題は解消できそうな気がします。
---
あ、すでにご解決だったのですね。失礼しました。
juner様、なるほど、ありがとうございます。そういえば同じ .js ファイルに export を2回書くとVSCodeがエラーを出してくれますね。
Lhankor_Mhy様、コメントありがとうございます。PHP で js を書きだすとはこれまた初耳な方法でした。調べてみます。
回答2件
0
ベストアンサー
script に type=module の指定を行うことは確認されましたでしょうか？
JavaScript モジュール - JavaScript | MDN
試しに下記の様なコードを書いてみます。
html
1<script type="module"> 2 // 変数の宣言 3 const data1 = {}; 4 // グローバルへの書き込み 5 globalThis.data3 = {}; 6</script> 7<script> 8 // 変数の宣言 9 const data2 = {}; 10 // グローバルへの書き込み 11 globalThis.data4 = {}; 12</script> 13<script> 14 alert("module script(data1) x normal script:",typeof data1); 15 alert("normal script(data2) x normal script:",typeof data2); 16 alert("module script(data3) x normal script:",typeof data3); 17 alert("normal script(data4) x normal script:",typeof data4); 18</script> 19<script type="module"> 20 alert("module script(data1) x module script:",typeof data1); 21 alert("normal script(data2) x module script:",typeof data2); 22 alert("module script(data3) x module script:",typeof data3); 23 alert("normal script(data4) x module script:",typeof data4); 24</script>
結果は次の様になりました。
output
1module script(data1) x normal script: undefined 2normal script(data2) x normal script: object 3module script(data3) x normal script: undefined 4normal script(data4) x normal script: object 5module script(data1) x module script: undefined 6normal script(data2) x module script: object 7module script(data3) x module script: object 8normal script(data4) x module script: object
| 書き込み \ 読む側 | normal | module |
|---|---|---|
| normal (変数) | 見える | 見える |
| normal (グローバル) | 見える | 見える |
| module (変数) | 見えない | 見えない |
| module (グローバル) | 見える | 見える |
まとめ
つまり type="module" を指定して top level で 変数を宣言するだけなら全くグローバル変数は汚染しない。
以上。
参考
投稿2024/11/11 09:02
編集2024/11/12 01:04総合スコア437
なんとまぁ分かりやすく丁寧なご回答を誠にありがとうございます。
なるほど、type="module" の方は data3 が object になっている一方で、type="module" ではない方の data3 には影響なし。ということですね。納得しました。
しかもサクッと書いてくださったテストコードがもう大変勉強になります。globalThis なんて全く見たことありませんし、値を代入するよりも typeof で型を見る方がミニマムですね。
typeof は 存在しなくてもエラーにならないので便利なんですよね
0
結果として変数にうけるのであればconstで指定してもなにか別の処理をかましても同じです
グローバルなvar設定とかしなければ問題ないでしょう。
もちろんapiを用意してfetchでウケてもウケたデータは変数にうけますよね？
jsonpや無名変数で受ける手はありますが、結局は変数でうけているならその変数はなくなるわけではありません
html
1<?PHP 2$data=[1,"a",3]; 3var_dump(json_encode($data)); 4?> 5<script> 6(arg=>{ 7 console.log(arg); 8})(<?=json_encode($data)?>); 9</script>
これだってargが残っているといえば残ってますよね？
投稿2024/11/11 08:46
総合スコア116443
ありがとうございます。根本的な理解が欠けていて「残っている」の感覚がなかなか掴めておりませんが、そうですよね。あとから data = null; など代入したところで、どうやったって「残っている」ですよね。
あなたの回答
tips
プレビュー
