質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.71%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 5,927

kenji0202

score 2

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; 
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • miyabi_takatsuk

    2019/10/10 14:03

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

    キャンセル

  • kenji0202

    2019/10/10 15:03

    index.html を基準としたとき、
    js/script.js
    js/class.js

    となります。
    (すみません、階層と言う意味はこれで間違いないでしょうか?)

    キャンセル

  • miyabi_takatsuk

    2019/10/10 15:19

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

    キャンセル

  • kenji0202

    2019/10/10 15:31

    ご返信ありがとうございます。

    今の所、他の回答者様の回答でも解決していない状況です。

    なにかお気づきのところがありましたら、また投稿していただけると幸いです。

    キャンセル

回答 3

+4

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/10 13: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

    というエラーが出ました。

    キャンセル

  • 2019/10/10 13:52

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

    キャンセル

  • 2019/10/10 15:01

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

    キャンセル

  • 2019/10/10 16:08

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

    キャンセル

+3

Uncaught SyntaxError: Cannot use import statement outside a module

はつまり

モジュールの外じゃimport statement使えへんよ

MDN

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/10 13:26

    ご回答ありがとうございます。

    MDN を読んでみたのですが、恥ずかしながら理解できず、具体的にどう修正したらいいかわかりません。

    キャンセル

checkベストアンサー

+2

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

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

  • ブラウザのオプション起動
    オプション起動によって、ローカルファイルへのアクセスを許可させる方法です。
    やり方はご自身でお調べください。
  • ローカルサーバーを立てる
    ローカルサーバーを立てて起動すれば、同ドメインとなるため、CORSエラーはでません。
    (検証済)
    XAMPP(Windows)、MAMP(Mac)が有名です。
    こちらもご自身でお調べください。

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/13 15:34

    miyabi_takatsukさん、ご回答ありがとうございました。

    MAMPでローカルサーバーを立てて起動したところインポートされました。

    JavaScriptをウェブブラウザで表示させながら確認していく方法は、今後もなにかと問題が出そうなので、他の開発環境を構築したいと考えています。

    キャンセル

  • 2019/10/13 15:44

    解決されて何よりです。
    私も、ES Moduleが、スクリプトによるファイル直読み込みに該当することを知れたのは大変に勉強になりました。

    他にも、さまざまなファイルを、直接読み込み、扱う場合に、必ずひっかかるセキュリティエラーとなりますので、
    今回の知識が役立つはずです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.71%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる