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

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

新規登録して質問してみよう
ただいま回答率
85.40%
import

自身のプラットフォーム・プログラム・データセットに対して、外部ソースを取り込むプロセスをimportと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

33171閲覧

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

kenji0202

総合スコア6

import

自身のプラットフォーム・プログラム・データセットに対して、外部ソースを取り込むプロセスをimportと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

6クリップ

投稿2019/10/10 04:08

編集2019/10/10 04:15

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;

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

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_takatsuk

2019/10/10 06:19

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

2019/10/10 06:31

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

回答3

0

ベストアンサー

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

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

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

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

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

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

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

投稿2019/10/10 10:22

miyabi_takatsuk

総合スコア9555

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kenji0202

2019/10/13 06:34

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

2019/10/13 06:44

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

0

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

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

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

投稿2019/10/10 04:11

maisumakun

総合スコア145747

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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サーバを用意してそこ経由でアクセスするかをしてみてください。
guest

0

Uncaught SyntaxError: Cannot use import statement outside a module

はつまり

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

MDN

投稿2019/10/10 04:14

kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kenji0202

2019/10/10 04:26

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.40%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問