export
まずは「animal.js」内のAnimalクラスを他のファイルでも使用できるようにしましょう。
クラスの定義の後で「export default クラス名」とすることで、そのクラスをエクスポート（出力）し、他のファイルへ渡すことができます。
import
次に「dog.js」内でAnimalクラスを使用できるようにしてみましょう。
他のファイルで定義されているクラスを使用するにはインポート（読込）をする必要があります。使用するファイルの先頭で「import クラス名 from “./ファイル名”」と書くことでインポートすることができます。
なお、ファイル名の拡張子の「.js」は省略することができます。
export default Animal;
import Animal from “./animal”;
値のエクスポート
クラスのエクスポートを行いましたが、エクスポートできるのはクラスだけではありません。文字列や数値や関数など、どんな値でもエクスポートが可能です。
エクスポートする際は、下図のように「export default 定数名」とします。インポートする際は「import 定数名 from “./ファイル名”」とします。
デフォルトエクスポート
export defaultはデフォルトエクスポートと呼ばれ、そのファイルがインポートされると自動的に「export default 値」の値がインポートされます。そのためエクスポート時の値の名前と、インポート時の値の名前に違いがあっても問題ありません。
デフォルトエクスポートの注意点
デフォルトエクスポートは1ファイル1つの値のみ使えます。このファイルをインポートする際には、デフォルトエクスポートの値を自動でインポートするため、値が1つのみとなっています。
複数の値をエクスポートしたい場合は、次のスライドで紹介する「名前付きエクスポート」を用います。
名前付きエクスポート（1）
名前付きエクスポートとは左の図のように、defaultを書かずに、名前を{}で囲んでエクスポートする書き方です。
名前付きエクスポートした値をインポートする場合は、エクスポート時と同じ名前で値を指定します。インポートする値は、エクスポート時と同様に、「import { 値の名前 } from “./ファイル名”」と{}で囲んで指定します。
名前付きエクスポートは、デフォルトエクスポートと違い、複数の定数やクラスを指定してエクスポートが出来ます。
また、左の図のように、「export { 名前1, 名前2 }」という形で書くことにより、1つのファイルから複数のエクスポートが出来ます。
インポートの際も、コンマで区切ることで複数のインポートができます。
export {dog1, dog2};
import {dog1, dog2} from “./dogData”;
相対パス（1）
これまでファイルの指定は「./ファイル名」としてきました。
これは相対パスと言い、記述されているファイルからみた位置関係を示しています。
右の図では”./dogData”と書いてあります。
この相対パスは「script.js」からみた「dogData.js」の位置を表しています。
同じディレクトリの
ファイル指定
ドット1つの「./」は相対パスが書かれているファイルと同じディレクトリを意味します。
つまり右の図で書かれている相対パス”./dogData”は「script.js」と同じsrcディレクトリの中にある「dogData.js」ファイルを意味します。
1つ上の階層に戻る場合はドット2つの「../」を用います。
左の図のように「dogData.js」でclassディレクトリに入っている「dog.js」をインポートする場合は下図のような相対パスになります。
パッケージ
JavaScriptの世界では、誰かが作った便利なプログラムがパッケージという形で公開されています。また、JavaScriptの機能を使うことで、このパッケージを自分のプログラムの中に組み込んで使うことができます。
このレッスンでは、右の図のようなパッケージを使ってみます。
パッケージのimport
パッケージを自分のプログラムで使うためには、importを用いてパッケージをインポートします。
パッケージのimportは、ファイル名ではなくパッケージ名を指定します。
今回は右の図のようにchalkというパッケージをインポートします。
import chalk from “chalk”
chalkパッケージの使い方
インポートすれば、そのファイルでパッケージが使えるようになります。
chalkは出力する文字の色を変えることが出来ます。
左の図のように文字列を、chalk.yellowやchalk.bgCyanで囲むだけで、文字の色を変更できます。
// chalkパッケージをインポートしてください
import chalk from “chalk”;
import Animal from “./animal”;
class Dog extends Animal {
constructor(name, age, breed) {
super(name, age);
this.breed = breed;
}
info() {
const humanAge = this.getHumanAge();
this.greet();
// console.logの中身をchalkを使って書き換えてください
console.log(chalk.yellow(`名前は${this.name}です`));
// console.logの中身をchalkを使って書き換えてください
console.log(chalk.bgCyan(`犬種は${this.breed}です`));
console.log(`${this.age}歳です`);
console.log(`人間年齢で${humanAge}歳です`);
}
getHumanAge() {
return this.age * 7;
}
}
export default Dog;
readline-syncの使い方
readline-syncというパッケージを導入すると、コンソールへの値の入力と、その入力された値をプログラムの中で使うことができるようになります。
左の図のようにインポートし、readlineSync.question(質問文) のように記述します。質問文が出力されると一旦処理が止まり、コンソールに値が入力されると、次の処理に進みます。
整数の入力
前のスライドではquestionを用いましたが、年齢のように整数を入力してほしい場合はquestionIntを用います。
あとは入力値を用いて、Dogのインスタンスを生成すれば完成です。
// readline-syncをインポートしてください
import readlineSync from “readline-sync”;
import Dog from “../class/dog”;
const dog1 = new Dog(“レオ”, 4, “チワワ”);
// readlineSync.questionを使って書き換えてください
const name = readlineSync.question(“名前を入力してください: “);
// readlineSync.questionIntを使って書き換えてください
const age = readlineSync.questionInt(“年齢を入力してください: “);
// readlineSync.questionを使って書き換えてください
const breed = readlineSync.question(“犬種を入力してください: “);
const dog2 = new Dog(name, age, breed);
export { dog1, dog2 };