javascript の import export error

Question

progateのjavascrip[es6]を実際に環境を構築して写経しています。

コース5/ファイルを分割しよう/2.ファイルの分割(2)で、progateの通りにコードを書いてもファイルのimport/exportができず困っています。

コードは以下の通りです。

・animal.js

constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
console.log("こんにちは");
}

info() {
this.greet();
console.log(名前は${this.name}です);
console.log(${this.age}歳です);
}
}

export default Animal;

・dog.js

import Animal from "./animal";

class Dog extends Animal {
constructor(name, age, breed) {
super(name, age);
this.breed = breed;
}

info() {
this.greet();
console.log(名前は${this.name}です);
console.log(犬種は${this.breed}です);
console.log(${this.age}歳です);
const humanAge = this.getHumanAge();
console.log(人間年齢で${humanAge}歳です);
}

getHumanAge() {
return this.age * 7;
}
}

export default Dog;

・script.js

import Dog from "./dog";

const dog = new Dog("レオ", 4, "チワワ");
dog.info();

エラー内容は以下のものが出てきます。

minami:es6sample minami$ node src/script.js
/Users/minami/es6sample/src/script.js:2
import Dog from "./dog";
^^^

SyntaxError: Unexpected identifier
at new Script (vm.js:80:7)
at createScript (vm.js:274:10)
at Object.runInThisContext (vm.js:326:10)
at Module.compile (internal/modules/cjs/loader.js:664:28)
at Object.Module.extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module.load (internal/modules/cjs/loader.js:531:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)
at startup (internal/bootstrap/node.js:283:19)
minami:es6sample minami$

エラーの解決方法を教えていただけると嬉しいです。

Comments

[Y.H.]

タグに「Node.js」を追加してください。

Answer 1

Node.jsで直接実行した場合、import/exportを処理させるには「拡張子を.mjsにする」「特殊な引数付きでNode.jsを実行する」などの措置が必要です（参考）。

Progateの方で、何かしらのコンパイル環境は整えていませんか？