##経緯
私はいま、p5.jsとJavaScriptを使ってローカルでWebアプリケーションを作っており、以下の作業ディレクトリで作業しています:
my_directory ├ index.html ├ module.js <- sketch.jsにexportする自作モジュールが入っているファイル ├ p5.dom.min.js ├ p5.min.js ├ p5.sound.min.js ├ sketch.js └ sketch.css
ある日、sketch.js
で使っているモジュールの管理のためにimport/export
を使いたいと思い、module.js
という自作関数やクラスが入ったファイルを追加しました。また、import/export
はローカル環境では使用できず、httpサーバーを立てる必要があるとのことで、http-server
という簡易にサーバーを立てられるツールでこの作業ディレクトリmy_directory
をルートディレクトリとしてhttpサーバーを立てることにしました。
shellでmy_directory
に移動してhttp-server
コマンドを実行すると、httpサーバーが立ち上がり、http://192.168.100.106:8080
http://127.0.0.1:8080
というアドレスが割り当てられたので、192から始まる方をChromeの検索窓に入れると、アプリが立ち上がりました。
##問題発生
しかし、いざ動かそうとすると、アプリがいつも通りに動きません。Chrome開発者ツールのconsoleを見ると、以下のような内容のエラーメッセージが出ていました:
loadPixels
など、p5であらかじめ用意された各種グローバル変数がなぜかnot defined
になっているsketch.js
上で定義されている関数setup()
,draw()
などを開発者ツールのconsoleに打ち込んでも、not defined
になる
何がいけないのでしょうか?http-server
の問題なのか、p5.js
の仕様の問題なのか、私の書き方のミスなのか、Chromeの仕様なのか、問題の切り分けをしたく思います。
ご回答よろしくお願いします。
以下、index.html
,sketch.js
,module.js
のソースコードを記します:
index.html
<!DOCTYPE html><html><head> <script src="p5.min.js"></script> <script src="p5.dom.min.js"></script> <script src="p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8"> </head> <body> <script type="module" src="sketch.js"></script> </body></html>
sketch.js
import {Foo} from './module.js'; const myFoo = new Foo(); myFoo.myMethod(); function setup() { //セットアップ処理 } function render() { //loadPixels(),pixels,updatePixels()など、p5で用意された関数・グローバル変数群を含んだ処理 } function draw() { //各種処理 render(); }
module.js
export class Foo{ constructor(...){ ... ... } ... ... myMethod(){ //sketch.js内のrender()を含んだ処理 } ... ... }
##追記
新たに気付いたことがあるので追記致します。
- importを諦めて、
Foo
クラスの宣言をsketch.js
に持ってきてmyFoo
インスタンスを作ってみても、consoleにmyFoo
を打ってもnot defined
と言われた index.html
のsketch.js
用のscriptタグからtype="module.js"
の記述を取り去ると、やっといつも通りに作動した
これより、もしかするとp5.js
の仕様上、sketch.js
用のスクリプトタグのtype
属性をいじくるのはご法度なのではないか?、と予想しています(見当違いかもしれませんが)
また、
- Chrome開発者ツールの
sources
を確認すると、なぜかmodule.js
だけ表示されていない(ローカルには存在するにも関わらず) - 試しに
module.js
をindex.html
のスクリプトタグに追加してみると、sources
に追加された(しかし、上のバグは消えない)
という現象を確認しました。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/29 09:19
2021/03/29 10:20
2021/03/29 10:27 編集
2021/03/29 10:32
2021/03/29 11:29 編集
2021/03/29 11:32