JavaScript復習④

JavaScript復習③からの続きです。

コンストラクタのオーバーライド

JavaScriptファイル

class 子クラス extends 親クラス {
  constructor() {
    super() //1行目にsuper()の記述が必要
　　// 子クラスのコンストラクタの処理
  }
}

export

JavaScriptファイル

class Animal {
  .
  .
}
export default Animal; //Animalクラスを他のファイルでも使用できるようにする設定

import

```JavaScript:JavaScriptファイル import Animal from "./[Animalクラスを定義したコードを記述しているファイル名](.jsは省略できる)" //　↑先頭に記述する ```

値のエクスポート

sample1.js

const text = "Hello World";
export default text;

sample2.js

const text from "./sample1";
console.log(text);

コンソール

Hello World

デフォルトエクスポート

デフォルトエクスポートは1ファイル1つの値のみ使える。そのファイルがインポートされると自動的に、 「export default 値」の値がインポートされる。 →エクスポート時の値の名前と、インポート時の値の名前に違いがあっても問題ない

名前付きエクスポート

dogData.js

const dog1 = new Dog("タロウ", 20, "柴犬");
export {dog1};

script.js

import {dog1} from "./dogData";
dog1.info();

名前付きエクスポートはデフォルトエクスポートと異なり、
複数の定数やクラスを指定してエクスポートすることができる

dogData.js

const dog1 = new Dog("タロウ", 20, "柴犬");
const dog2 = new Dog("ハナコ", 8, "ブルドッグ");
export {dog1, dog2};

script.js

import {dog1, dog2} from "./dogData";

相対パス

同じディレクトリのファイル指定

JavaScriptファイル

import {dog1, dog2} from "./dogData";

異なるディレクトリのファイル指定

JavaScriptファイル

import {dog1, dog2} from "./data/dogData";
// ./dataで同じディレクトリ内のdataディレクトリに移動、 /dogDataでdogData.jsを指定

一つ上の階層に戻る

JavaScriptファイル

import Dog from "../class/dog";
// ..で一つ上の階層に移動、 /classでclassディレクトリに移動、 /dogでdog.jsを指定

パッケージのimport

JavaScriptファイル

import 定数名 from "パッケージ名";

chalkパッケージの使い方

JavaScriptファイル

import chalk from "chalk";
console.log(chalk.yellow("Hello World"));
console.log(chalk.bgCyan("Hello World")); //文字列を囲むことができる

readline-syncの使い方

JavaScriptファイル

import readlineSync from "readline-sync";
readlineSync.question("名前を入力してください:");

コンソール

名前を入力してください:

// 質問文が出力されると、一旦処理が止まり、
// コンソールに値が入力されると次の処理に進む

続きはJavaScript復習⑤へ