20b. ProgateでJavaScript Ⅳ～Ⅴ

JavaScriptⅣ

クラスの基本

クラスはES6から導入された文法で、JavaScriptのライブラリ(React, Vue.js)を使用する上で必須の知識です。

オブジェクトと関数

// script.js
const user = {
	name: "にんじゃわんこ",
	greet: function() {				// greetプロパティに対応する値に関数を使用
		console.log("こんにちは！");
	}
};
user.greet();						// 関数の呼び出し

// 実行結果
こんにちは！

クラスとは
ユーザーのデータを幾つも作成する場合、「ユーザーを生成するための設計図」を用意し、その設計図をもとにユーザーのデータを生成します。その設計図のことをJavaScriptではクラスと呼びます。

インスタンスの生成
クラスからオブジェクトを生成するには、下記のように「new クラス名()」とします。

// script.js
class Animal {					// クラス名は大文字から始める
}
const animal = new Animal();	// クラスから生成したオブジェクトをインスタンスと呼びます

コンストラクタ
クラスにはコンストラクタと呼ばれる、インスタンスを生成する時に「実行したい処理や設定を追加」するための機能があります。

// script.js
class Animal {
	constructor() {				// コンストラクタ内で実行したい処理を追加
	console.log("こんにちは！");
	}
}
const animal1 = new Animal();
const animal2 = new Animal();

// 実行結果
こんにちは！
こんにちは！

コンストラクタでプロパティと値を追加する

// script.js
class Animal {
	constructor() {
	this.name = "レオ";			// 「this.プロパティ = 値」とすることで、生成されたインスタンスにプロパティと値を追加できる
	}
}
const animal = new Animal();
console.log(animal.name);		// コンストラクタの中で追加した値は、「インスタンス.プロパティ」で使用できる

// 実行結果
レオ

コンストラクタの引数

// script.js
class Animal {
	constructor(name, age) {			// 受け取った値を変数に格納
	this.name = name;
	this.age = age;
	}
}
const animal = new Animal("レオ", 3);		// 引数に値を渡す
console.log(`名前: ${animal.name}`);
console.log(`年齢: ${animal.age}`);

// 実行結果
名前: レオ
年齢: 3

メソッド
メソッドは「挨拶をする」「値を計算する」などの処理のまとまりを表します。

// script.js
class Animal {
	constructor(name, age) {
		・・・
	}
	greet() {						// メソッド名
		console.log("こんにちは！");	// 処理
	}
}
const animal = new Animal("レオ", 3);
animal.greet();

// 実行結果
こんにちは！

メソッド内で値を使う

// script.js
class Animal {
		:
	info() {
		console.log(`名前は${this.name}です`);
	}
}
const animal = new Animal("レオ", 3);
animal.info();

// 実行結果
名前はレオです

メソッド内でメソッドを使う

// script.js
class Animal {
	greet() {
		console.log("こんにちは！");
	}
	info() {
		this.greet();		// 同じクラスのメソッドを呼び出すことも可能
		・・・
	}
}

クラスの継承

継承とは、すでにあるクラスをもとに、新しくクラスを作成する方法のことです。

継承したクラスを使う

class Animal {
	info() {
	this.greet();
	console.log(`名前は${this.name}です`);
	console.log(`${this.age}歳です`);
	}
}
class Dog extends Animal {			// 「Animalクラス」を継承して「Dogクラス」を作成
}
const dog = new Dog("レオ", 4);
dog.info();							// Animalクラスに定義されているメソッドを使用できる

メソッドの追加
継承して作成したクラスにも、メソッドを追加できます。

class Dog extends Animal {
	getHumanAge() {					// メソッドの追加
		return this.age * 7;
	}
}
const dog = new Dog("レオ", 4);
const humanAge = dog.getHumanAge();
console.log(humanAge);

// 実行結果
28

メソッドのオーバーライド
親クラスと同じ名前のメソッドを子クラスに定義すると、子クラスのメソッドが優先(オーバーライド)して使用されます。

class Animal {
	info() {
		・・・
	}
}
class Dog extends Animal {
	info() {
		・・・
	}
}
const dog = new Dog("レオ", 4);
dog.info();						// 子クラスのinfoメソッドが呼び出される

コンストラクタのオーバーライド
メソッドと同じように、コンストラクタもオーバーライドすることができます。

class Animal {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
	  :
}
class Dog extends Animal {
	constructor(name, age, breed) {
	super(name, age);					// コンストラクタのオーバーライドには「super()」が必要
	this.breed = breed;					// 子クラス独自の処理を実行
	}
	  :
}

JavaScriptⅣ

ファイルの分割

JavaScriptのコードを複数ファイルに分割することで、維持・更新のしやすいコードを書くことができます。

// animal.js
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;					// Animalクラスをエクスポート

// dog.js
import Animal from "./animal";			// 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;						// Dogクラスをエクスポート

// script.js
import Dog from "./dog";				// Dogクラスのインポート

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

// 実行結果
こんにちは
名前はチワワです
4歳です
人間年齢で28歳です

エクスポート

クラス以外の文字列や数値や関数なども、エクスポートが可能です。

// sample1.js
const text = "Hello World";
export default text;			// 定数のエクスポート

// sample2.js
import text from "./sample1";	// 定数のインポート
console.log(text);

// 実行結果
Hello World

デフォルトエクスポート

// dogData.js
const dog = new Dog("レオ", 4, "チワワ");
export default dog;

// script.js
// デフォルトエクスポートは、エクスポート時の値の名前とインポート時の値の名前は違っても問題ありません
import doggy from "./dogData";
doggy.info();

// 実行結果
こんにちは
名前はチワワです
4歳です
人間年齢で28歳です

名前付きエクスポート

// dogData.js
const dog1 = new Dog("レオ", 4, "チワワ");
export { dog1 };							// {}で囲んでエクスポート

// script.js
import { dog1 } from "./dogData";			// {}で囲んでインポート
dog1.info();

// 実行結果
こんにちは
名前はチワワです
4歳です
人間年齢で28歳です

// dogData.js
const dog1 = new Dog("レオ", 4, "チワワ");
const dog2 = new Dog("ベン", 2, "プードル");
export { dog1, dog2};						// 複数の定数やクラスをエクスポート可能

// script.js
import { dog1, dog2 } from "./dogData";		// カンマで区切って複数のインポート
console.log("--------")
dog1.info();
console.log("--------")
dog2.info();

パッケージ

JavaScriptの世界では誰かが作成した便利なプログラムがパッケージという形で公開されており、このパッケージを自分のプログラムの中に組み込んで使うことができます。

// script.js
import chalk from "chalk";		// import 定数名 from "パッケージ名";
console.log(chalk.yellow("Hello World"));	// 文字を黄色に
console.log(chalk.bgCyan("Hello World"));	// 背景色をシアンに

readline-syncパッケージ
readline-syncというパッケージを導入すると、コンソールへの値の入力と、その入力された値をプログラムの中で使うことができるようになります。

import readlineSync from "readline-sync";
const name = readlineSync.question("名前を入力してください：");		// コンソールで入力された値を受け取る
const age = readlineSync.questionInt("年齢を入力してください：");		// 整数を受け取る場合はquestionIntを使用する
console.log(`名前は${name}です`);
console.log(`${age}歳です`);
// 実行結果
名前を入力してください：ケン			// 一旦入力待ちになる
名前を入力してください：10			// 一旦入力待ちになる
名前はケンです
10歳です