1

いつもお世話になっています。
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。


【質問の主旨】

【質問の補足】で記述したindex.htmlを表示させてコンソール画面を確認するとUncaught SyntaxError: Unexpected token { class_private.js:4 という文法エラーが表示されます。
エラーを表示させないためには、class_private.jsのどこを修正すれば良いでしょうか?

【質問の補足】

1. index.hmtl
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>オブジェクト指向構文</title>
</head>
<body>
  <h1>オブジェクト指向構文</h1>
  <script src="scripts/class_private.js"></script>
</body>
</html>
2. class_private_lib.js
'use strict';

{
    const NAME = Symbol();
    const BIRTH = Symbol();

    export class Person {
        constructor (name, birth) {
            this[NAME] = name;
            this[BIRTH] = birth;
        }
    }

    getName() {
        return this[NAME];
    }

    getBirth() {
        return this[BIRTH];
    }

}
3. class_private.js
'use strict';

{
    import { Person } from './class_private_lib.js';

    let p = new Person('Taro Yamada', '2000/10/12');

    console.log(p.getName());
    console.log(p.getBirth());
}
4.

上記の3つのファイルは「JavaScript逆引きレシピ 第2版」のP240に掲載されている「147 外部からアクセスできないプロパティ/メソッドを定義したい」を参考にしています。
https://www.shoeisha.co.jp/book/detail/9784798157573


以上、ご確認よろしくお願い申し上げます。

1 件の回答 1

1
  1. import 文や export 文はファイルのトップレベル(一番外側)でのみ使うことができます。ご提示の例のように{ }で囲んだブロックの中で使うことはできません。import文やexport文は{ }の外側に出す必要があります。

  2. import文やexport文を使用できるのは「モジュール」扱いで読み込まれたJavaScriptファイルの中だけです。JSファイルをモジュール扱いで読み込むには、index.html内のscript要素にtype="module"属性を追加します。

    <script type="module" src="scripts/class_private.js"></script>
    

ただ、以上の点を修正してもclass_private_lib.jsが変なようです(getNamegetBirthの定義がclassの外に出ていて文法的に正しくない)。書籍の内容は確認できていませんが、目的を達成するには別の工夫が必要かもしれません。

3
  • 蛇足ですが、インポートに dynamic import を用いることで、最上位でインポートせずにモジュールを使用出来ると思います。dynamic import は Stage 3 ですが、Can I use によれば、ほとんどのモダンブラウザは対応しているようです。
    – supa
    Commented 2019年5月29日 9:06
  • おっしゃる通りです。ただ、dynamic importを用いると必然的に非同期処理になるのでその点は注意する必要があります。 Commented 2019年5月29日 11:25
  • Faily Feelyさん。コメントありがとうございます。index.html, class_private.js, class_private_lib.jsについてそれぞれご指摘いただいた点を修正すると意図どおりの動作ができるようになりました。変更箇所についてはGitHubにて公開しています。今後ともどうぞよろしくお願いします。 Commented 2019年5月30日 8:35

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。