一つのJavaScriptのファイルを３つに分けたい。

Question

前提・実現したいこと

一つの.jsファイルを３つに分けたです。一つのファイルの時はうまく作動しています。
ProgateのJavaScriptの練習Ⅴの状態ではできていますが、VSCodeで同じこと（コードをコピペ）をしてもうまく作動しません。

発生している問題・エラーメッセージ

uncaught SyntaxError: Cannot use import atatment outside a module

該当のソースコード

//1枚目のファイル。ファイル名script.jp
import Dog from "./dog";

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


//2枚目のファイル。ファイル名dog.jp
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;

//3枚目のファイル。ファイル名animal.jp
class Animal {
  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;

//もともとのファイル（うまく作動しています）
class Animal {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
    
    greet() {
      console.log("こんにちは");
    }
    
    info() {
      this.greet();
      console.log(`名前は${this.name}です`);
      console.log(`${this.age}歳です`);
    }
  }
  
  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;
    }
  }
  
  const dog = new Dog("レオ", 4,"チワワ");
  dog.info();
  
  

試したこと

違うファイルをつかったり、再起動したしました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[K_3578]

JavaとJavaScriptを勘違いされている気がします。

[N.Yam]

JavaScriptです。すみません。JavaとJavaScriptは違うものなのですね。

[K_3578]

はい。JavaとJavaScriptは名前が似ているだけで全く違う物ですので覚えておいて下さい。
後、Progeteではなく、Progateですね。自分はやったことないのですが

その様子だと内容を間違えているのかも？

[yambejp]

なにをどう分けたいのですか？
一つではどうしてだめなのですか？

[K_3578]

質問編集されましたが、
「JavaScript」と「Java Script」ではこれまた意味が変わってきますので前者に書き換えた上で
「JavaScript」タグを付けて下さい。

[N.Yam]

色々すみません、ありがとうございます。

[N.Yam]

yamabejpさんありがとうございます。
《なにをどう分けたいのですか？》
A.jsというファイルを　「a.js」　と　「b.js」　と　「c.js」　の三つのファイルに分けたいです。
（機能は同じです。）

《一つではどうしてだめなのですか？》
Progate というプログラミング練習サイトの課題に出てきたからです。
Progate の解説では以下の様に書いてあります
「コードの量が増えてくると1つのファイルで管理するのが大変になるため、複数のファイルでコードを管理することがあります。」

[miyabi_pudding]

JavaScriptのimportは、ローカルでは使用できなく、ローカルの場合は、サーバーを立てて（ローカルサーバーでもOK）httpアクセスでないと使用できませんが、
そこらへんの環境の整備はされてますか？
つまり、HTMLをダブルクリックで開いた状態では、import機能は使うことができないってことです。

[N.Yam]

miyabi_takatsukさんありがとうございます。
「サーバーを立てて」たぶんこれかもしれません。「サーバーを立てる」で調べなおしてみます。

[N.Yam]

VSCodeの「Live Server」拡張機能を使用しているのでサーバーは立っている（？）のではないかと思います。

[miyabi_pudding]

なるほど。maisumakunさんの回答は、この話のことを言われています。
ローカルサーバー で調べると良いかと。
ただし、
ローカルサーバーを構築するアプリケーションは、
OSによって相性があるため、
Windows → XAMPP
macOS → MAMP
を使用してください。
逆にすると、
初学者には到底手に負えない不都合が生じる可能性があります。

[N.Yam]

XAMPPは何かの時にインストールしているのでその辺で見てみます。（私はWindowsです）

[miyabi_pudding]

なるほど、それは、httpアクセスであり、ドメインの名前解決はされている機能なのでしょうか？
（名前解決は必要ないかもですが、httpアクセスである必要はあります）
また、
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import
にある通り、
<script type="module">という記述はしておりますか？

[miyabi_pudding]

XAMPPでやった方が無難ですね。
VSCodeのその機能は、もっと調べないと私自身わからないですが。

[N.Yam]

<script type="module">は書くのも試しました。XAMPP関係もう少し探してみます。ありがとうございます。

[miyabi_pudding]

> <script type="module">

この記述は最低限必要になります。
読み込みを行う（importを行う）JSファイルにて必要です。
それでもできなかったのであれば、
Live Serverではimportは使えないのかも。

XAMPPでうまくいくとよいですね。

[N.Yam]

ありがとうございます。がんばります

[N.Yam]

.jsを付けたらできました。
（progateではなしで動いてますが、、、）
import Animal from "./animal.js";
import Dog from "./dog.js";

みなさまありがとうございました。
感謝感謝です！！

Answer 1

uncaught SyntaxError: Cannot use import atatment outside a module

エラーメッセージのとおり、ブラウザで直接importを処理するには特殊な条件が必要となります。

プロゲートでは、importを使える仕組みを予め作っていたので問題なく通っていたとか、そういうことではないでしょうか。

Comments

[N.Yam]

はい、おっしゃる通りではないかと私も思って
何が足りないのかを調べてみたのですが分かりませんでした。
そこで「特殊な条件」とは何かを知ることができないかと思いまして質問させていただきました。

[K_3578]

すいません、横槍失礼します。
多分ですけどJavaとJavaScriptを勘違いしていたようなので調べ方が間違っていたのではないかと。
｢JavaScript import｣とかで調べたら分かると思います。

[maisumakun]

エラーメッセージの通りブラウザにモジュールとして読ませるか、ローカルにimportを処理できるような環境を構築する、のどちらかです。

（progateの過去の回に、その前提となるような話は出てきませんでしたか？）

[N.Yam]

K＿3578さんありがとうございます。
　　再度調べてみます。
maisumakunさんありがとうございます。
　　別の記事かなにかにあるかもしれません。もう一度調べてみます。

[N.Yam]

.jsを付けたらできました。
（progateではなしで動いてますが、、、）
import Animal from "./animal.js";
import Dog from "./dog.js";

みなさまありがとうございました。
感謝感謝です！！