JavaScript 別ファイルからクラスをインポートしたい

JavaScriptをブラウザ（Chrome）で表示させながら勉強中です。

別のファイルに記述したクラスをインポートして実行できるようにしたいのですが、上手くいきません。
どう修正したらいいかご教授願います。

【状況】
デベロッパーツールで"console"を表示させると、以下のように出る。
script.js:1 Uncaught SyntaxError: Cannot use import statement outside a module

ファイル構成：
index.html
script.js（メインのJavaScriptファイル）
class.js（これに書いているクラスをメインのJavaScriptファイルにインポートしたい）
（jsファイルはjsフォルダ直下に入れてある）

各ファイルは以下のように記述：

index.html

<!DOCTYPE html>
<html lang="ja">
<head>

</head>
<body>
    
    <script src="js/script.js"></script>

</body>
</html>

script.js

import TestConsole from "./class";

test = new TestConsole();

class.js

class TestConsole {
    constructor() {
        console.log("imported");
    }
}

export default TestConsole;

miyabi_pudding

2019/10/10 05:03

パスが間違ってる可能性もなくは無いので、scrpt.js、class.js、読み込んでいるHTMLの階層も掲示して下さい。

kenji0202

2019/10/10 06:03

index.html を基準としたとき、 js/script.js js/class.js となります。（すみません、階層と言う意味はこれで間違いないでしょうか？）

miyabi_pudding

2019/10/10 06:19

ありがとうございます！その、情報で大丈夫です！と聞いといて、ほかの回答者さんの回答で解決しそうな気がします　汗ただ、パスの記述違いの可能性の方向でも探ってみます。

kenji0202

2019/10/10 06:31

ご返信ありがとうございます。今の所、他の回答者様の回答でも解決していない状況です。なにかお気づきのところがありましたら、また投稿していただけると幸いです。

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

回答3件

ベストアンサー

原因がわかりましたので、
回答させていただきます。
maisumakunさんのコメントにもあります通り、
CORSエラーです。
ES Moduleは、どうやら、JavaScript上での直接ファイルアクセスとなるようですね。
つまりは、ローカルでは、同じディレクトリ上でも、そもそもドメインがないので、
異ドメイン間と認識されるのかと思われます。
そうなると、異ドメイン間のスクリプトからのファイル直でのアクセスは、ブラウザによってセキュリティが働くため、基本行えません。

下記に、ローカルでも、スクリプトのファイル直アクセスが可能な方法を二つほど記載します。

ブラウザのオプション起動

オプション起動によって、ローカルファイルへのアクセスを許可させる方法です。
やり方はご自身でお調べください。

ローカルサーバーを立てる

ローカルサーバーを立てて起動すれば、同ドメインとなるため、CORSエラーはでません。
（検証済）
XAMPP（Windows）、MAMP（Mac）が有名です。
こちらもご自身でお調べください。

って、最近同じ回答何回もしてる気がする。

投稿2019/10/10 10:22

miyabi_pudding

総合スコア9528

kenji0202

2019/10/13 06:34

miyabi_takatsukさん、ご回答ありがとうございました。 MAMPでローカルサーバーを立てて起動したところインポートされました。 JavaScriptをウェブブラウザで表示させながら確認していく方法は、今後もなにかと問題が出そうなので、他の開発環境を構築したいと考えています。

miyabi_pudding

2019/10/13 06:44

解決されて何よりです。私も、ES Moduleが、スクリプトによるファイル直読み込みに該当することを知れたのは大変に勉強になりました。他にも、さまざまなファイルを、直接読み込み、扱う場合に、必ずひっかかるセキュリティエラーとなりますので、今回の知識が役立つはずです。

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

ブラウザで直接importを扱いたい場合、

<script>にtype="module"という属性を入れる
import '../***.js'のように拡張子まで書く

といった準備が必要です。

投稿2019/10/10 04:11

maisumakun

総合スコア145183

kenji0202

2019/10/10 04:25

ご回答ありがとうございます。 <script> に　type="module" を入れ、 import TestConsole from "/class.js"; としたのですが、 Access to script at '/js/script.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. index.html:8 GET fjs/script.js net::ERR_FAILED というエラーが出ました。

maisumakun

2019/10/10 04:52

importするパスを相対パスで書いてみたらどうなりますか？

kenji0202

2019/10/10 06:01

./class.js としても結果は変わりませんでした。（すみません、相対パスの意味まちがえていますでしょうか？）

maisumakun

2019/10/10 07:08

ブラウザによってはローカルファイルだと動かないかもしれません。ブラウザを変えるか、適当なHTTPサーバを用意してそこ経由でアクセスするかをしてみてください。

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