ProgateのJavaScript Ⅴ
モジュールを組み合わせよう
JavaScriptのコードを複数ファイルに分割＆組み合わせる方法
ファイルの分割：
Ex.
script.js：プログラムの実行部分
animal.js：Animalクラスの定義部分
dog.js：Dogクラスの定義部分
dogData.js：Dogクラスのインスタンス部分
ファイルを分割した時のエラーが出る場合：
ファイル同士が関連づいていないとエラーが起きる
分割前：
Script.js
■Class Animal {・・・}
■Class Dog extends Animal {・・・}
■Const dog = new Dog(“”レオ, 4, “チワワ”);
↓
分割後：
Animal.js
■Class Animal {・・・}
Dog.js
■Class Dog extends Animal {・・・}
*Dog.jsファイルにAnimalクラスが読み込まれていないのでエラー発生
ファイルを関連づける：
ファイルを正しく分割するにはそれぞれのファイルを関連づける必要がある。
エクスポート（出力）：
クラスの定義後、「export default クラス名」でエクスポート（出力）することで、出力されたクラスが他ファイルで使用可能になる。
Ex.
Animals.js
■Class Animal {・・・}
■export default Animal;
*Animalクラスが他ファイルで使えるようになった
インポート（読込）：
エクスポートされたクラスを読み込むため「import クラス名 from “./ファイル名”」を使用するファイルの先頭に置く。
Ex.
Dog.js
■import Animal from “./animal”;
*animal.jsの拡張子である「js」は省略することが出来る。
値のエクスポート：
エクスポート出来るのはクラスだけではない。
文字列、数値、関数などどんな値もエクスポートすることができる。
エクスポート：export default 定数名
インポート：import 定数名 from “./ファイル名”;
Dogインスタンスのエクスポートしてみよう：
変更前：
script.js
■import Dog from “./dog”;
■const dog = new Dog(“レオ”, 4, “チワワ”);
■dog.info()
↓
変更後：
dogData.js
■import Dog from “./dog”;
■const dog = new Dog(“レオ”, 4, “チワワ”);
■export default dog;
script.js
■import dog from “./dogData”;
■dog.info();
デフォルトエクスポート：
インポート時の値の名前と、エクスポート時の値の名前が違っても、問題はない。
Ex.
dogData.js
export default dog;
script.js
import doggy from “./dogData”
*「dog」と「doggy」だと名前が異なってしまうが、doggyの部分には「export default 値」の部分が送信されて読み込まれるから問題はない。
デフォルトエクスポートの注意点：
デフォルトエクスポートができるのは1ファイル1値のみ。
エラー：SyntaxError : src/dogData.js: only one default export allowed per module.
複数の値をエクスポートしたい場合：
「名前付きエクスポート」を以下のように行う。
エクスポート：export { 値①の名前, 値②の名前 };
インポート：import { 値の名前①の名前、値②の名前 } from “./ファイル名”;
今回の課題でのインポート/エクスポートの例：
Ex.
animal.js：animalクラスをエクスポート
dog.js：animalクラスをインポート、dogクラスをエクスポート
dogData.js：dogクラスをインポート、dogDataの定数をエクスポート
script.js：dogDataの定数をインポート
相対パス：
相対パスとは、記述されているファイルから見た位置関係を示している。
「./dogData」の「./」の部分が相対パスの書き方である。
ドット1つの場合：同じディレクトリに存在するという意味
ドット２つの場合：１つ上のディレクトリに移動するという意味
異なるディレクトリのファイルを指定する：
「./data/dogData」は異なるディレクトリのファイルを指定している。それぞれ次のように順に移動している。
①「./」： 同じディレクトリの、
②「data」：dataディレクトリに移動、
③「dogData」：dataディレクトリのdata.jsファイルを指定する
パッケージ：
他の人が作った便利なプログラムを「パッケージ」と呼ぶ。
パッケージの例：
chalk：コンソール出力の文字に色をつける
readline-sync：コンソールに値を入力できる
パッケージのインポート：
「import 定数名 from “パッケージ名”;」でパッケージのインポートが可能。
chalkパッケージの使い方：
使い方：Console.log(chalk.色(“文字列”));
Ex.
■import chalk from “chalk”;
■console.log(chalk.yellow(“こんにちは”));
■console.log(chalk.bgcyan(“こんばんは”));
*bgはバックグラウンドの略で、背景色が変わる
readline-syncパッケージの使い方：
使い方：
文字列の入力の場合：readlineSync.question(“質問文”);
整数の入力の場合：readlineSync.questionInt(“質問文”);
Ex.
■import readline-sync from “readline-sync”;
■readlineSync.question(“名前を入力してください：”);
*質問文が出力されると一旦処理が停止する
readline-syncの実際の使い方：
質問文に対するコンソールの入力（答え）を定数や変数に代入する
■import readline-sync from “readline-sync”;
■const name = readlineSync.question(“名前を入力してください：”);
■console.log(`名前は${name}と入力されました`);
早見表
①ファイルを分割する
今回の演習では以下の4つのファイルに分割した
実行部分（script.js）、親クラス（animal.js）、子クラス（dog.js）、子クラスのインスタンス（dogData.js）
②ファイルを紐付ける
エクスポート：
・デフォルトエクスポート（単出力）：export default クラス名;
・名前付きエクスポート（複数出力）：export { 定数1, 定数2};
インポート
・普通のインポート：import クラス名 from "./ファイル名";
・複数値のインポート：import { 定数1, 定数2 } from "./ファイル名"
＊相対パス：ファイルから見た位置関係を示す。「./」同じディレクトリ、「../」１つ上のディレクトリに移動。
③パッケージを読み込む
誰かが作った便利なパッケージを使用できる。
・chalkパッケージ：色
例1：chalk.yellow("こんにちは")
例2：chalk.bgCyan("こんにちは")
・readlineSycパッケージ：コンソールに値を入れる
例1：const name = readlineSync.question("名前を入力：");
例2：const age = readlineSync.questionInt("年齢を入力：");