外部ファイルからJavaScriptを読んだときにクラス名が読み込まれない

こんばんは。

JavaScriptで外部ファイルから読み込めるmoduleを作成しようとしています。

しかし、class名がないとコンソールでエラーになってしまいます。

以下はサンプルコードです。

外部読み込みファイル(ex: 127.0.0.1:3000/test.js)

javascript
1class Foo {
2  static foo {
3    console.log('foo');
4  }
5}

実行先ファイル(test.html)

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'>
5<meta content='width=device-width' name='viewport'>
6<script src="http://127.0.0.1:3000/test.js"></script>
7<script>
8  Foo.foo()
9</script>
10</head>
11

javascript
1test.html:8 Uncaught ReferenceError: Foo is not defined
2    at test.html:8

なぜ、test.htmlではFoo.foo()が読み込みがされないのでしょうか？
jQueryやlodashはCDNで読み込みをしてからも、そのライブラリのメソッドが利用できます。
どのように書けばそのようになるのかわからず、もしよろしければ教えていただきたいです。

maisumakun

2020/09/04 13:26

test.htmlをHTTPS環境に置いている、ということはないでしょうか？あと、使っているブラウザは何でしょうか。

ayu

2020/09/04 13:30

test.htmlは`file:///Users/xxx/test.html`で読み込んでいるものです。 HTTPS環境にはしていないつもりです。。。使っているブラウザはchromeです。 CDN的にjavascriptを配置したくて、どうやったら読み込めるのだろうか。。。というところです。

maisumakun

2020/09/04 13:31

HTMLからのtest.jsの読み込みには成功していますか？

ayu

2020/09/04 13:36

https://gyazo.com/b5fdb0abdf3ebb2163a088458b788b80 ファイル自体は読み込みに成功していますね。 ``` class Foo { static foo() { console.log("foo") } } console.log("Foo") ```

Y.H.

2020/09/04 14:00

http://127.0.0.1:3000/にtest.htmlを配置して http://127.0.0.1:3000/test.html でアクセスした場合は正常に動作しますか？

ayu

2020/09/05 12:33

Y.H様返信が遅くなりました。そちらで読み込むと大丈夫でした。

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

回答2件

ベストアンサー

よく見たら、test.jsの文法が間違っているようです。

javascript
1class Foo {
2  static foo() { // メソッド定義なので丸括弧が必要
3    console.log('foo');
4  }
5}

投稿2020/09/04 13:53

maisumakun

総合スコア145183

maisumakun

2020/09/04 13:54

あとは、何らかの事情でclassがグローバルにならないので、window.Foo = Foo;のようなエクスポートが必要、ということなのかもしれません。

ayu

2020/09/04 13:55

maisumakun様文法ミスの指摘、ありがとうございます！ ``` Uncaught ReferenceError: Foo is not defined at test.html:8 ``` 元々のクラス名が読み込できず、エラーになってしまいますね。。。

maisumakun

2020/09/04 13:56

「window.Foo = Foo;のようなエクスポート」は、test.jsでclass Fooより後に書いてください。

ayu

2020/09/05 12:33

maisumakun様 windowの方法を教えていただき、ありがとうございます！無事に読み込むことができました！ありがとうございます！

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

test.jsをこうして

class Foo {
  foo(){
    console.log('foo');
  }
}

本体からはこうしてみては？

(new Foo()).foo()

投稿2020/09/04 13:32

yambejp

総合スコア114814

ayu

2020/09/04 13:39

ありがとうございます！試しましたが、うまくいかないですね。。。 ``` test.html:8 Uncaught ReferenceError: Foo is not defined at test.html:8 ``` ```javascript class Foo { static foo() { console.log("foo") } foo() { console.log("not static foo") } } console.log("x") ``` ``` test.html:8 Uncaught ReferenceError: Foo is not defined at test.html:8 ``` https://gyazo.com/874b5b687c67b3515ff22cbe46cafc16

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

あなたの回答