jsでexport/importできない

html
1<!DOCTYPE html>
2<html lang="" dir="ltr">
3  <head>
4    <link rel="stylesheet" href="stylesheet.css">
5    <script type="text/javascript" src="sample.js"></script>
6    <meta charset="utf-8">
7    <title></title>
8  </head>
9  <body>
10    <p>button: <span id="count1">0</span> </p>
11    <input type="button" onclick="Count();" value="count">
12   </body>
13</html>
14

js
1import Count from "./sample2";

js
1class Count{
2  var number = 0;
3  const Count = () =>{
4    document.getElementById( "count1" ).innerHTML = ++number;
5  }
6}
7
8export default Count;
9

htmlとjsファイルはそれぞれデスクトップ上に作りました。

一つ目のjsファイルのimport Count from "./sample2"
にUncaught SyntaxError: Unexpected identifierとエラーがでます
どこが間違っているのでしょうか

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

回答2件

ベストアンサー

importをブラウザ内から使うには、注意点がいくつかあります。

IE11など、対応していないブラウザがあります。
<script type="module">としないとimportは有効になりません。
ブラウザから利用する場合、import './filename.js'のように、拡張子は省略できません。

そして、importで読み込んだものは、グローバルに現れません。HTML上から読み込んだものを使いたい場合は、importした箇所でwindow.Count = Count;のようにwindow経由で結びつけておく必要があります。

投稿2019/04/10 03:59

maisumakun

総合スコア145183

TAIniko

2019/04/10 04:31

ありがとうございます！

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

そもそも、どんな環境でexport/importを使おうとしてるのでしょうか?

純粋にブラウザ上で動作するJavaScriptでは使えませんよ。
export/importはNode.js等で使える物です。

また、一部擬似的にexport/importを使用出来る様にするライブラリ等はありますが、メジャーにならない限りブラウザ上のJavaScriptで使うのはおすすめ出来ません。

投稿2019/04/10 03:38

fukumi822

総合スコア228

maisumakun

2019/04/10 03:55

importのブラウザ対応も徐々に進んでいます。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import#Browser_compatibility

miyabi-sun

2019/04/10 04:04 編集

export/importはES2015で定義されている正式なJavaScriptの構文です。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import そしてNode.jsではexport/importにデフォルトで対応していません。特殊なオプション付けて実行するとmjs拡張子のファイルがexport/importに対応出来るというおまけ機能です。 https://blog.hiroppy.me/entry/nodejs-esm

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

あなたの回答