【勉強ノート】Progate⑥ JavaScript学習コースⅣ（有料コース）学習で、できる事、調べた事　まとめ

異業種からITエンジニア、ブロガー転換を目指す４０歳おじさんの勉強ノート。

スキル書き溜めとして、簡潔まとめ。

レッスン内容

クラスの基本

オブジェクトの復習

クラスとは

インスタンスの生成

コンストラクタ（１）、（２）、（３）

メソッド（１）、（２）

メソッド内でのメソッド呼び出し

クラスの継承

継承とは

継承したクラスを使う

メソッドの追加

オーバーライド（１）、（２）

Progate　JavaScript学習コースⅣ　より

身につくスキル（これが出来る）

  • オブジェクトの値に関数を用いる
  • クラスを定義することができる
  • クラスのコンストラクタを定義できる
  • クラスからインスタンスを生成し、プロパティと値を追加できる
  • クラスにメソッドを定義し、扱える
  • 親クラスからの継承で子クラスを扱える
  • 子クラスでのオーバーライドを理解し、扱える

勉強になったこと

① オブジェクトの復習

  • オブジェクトの値の部分には関数を用いることもできる
// 定義
const 定数名 = {
	プロパティ名: () => { 処理 }
};

// 関数の呼び出し
定数名：プロパティ名();

// 例文
const staff = {
	name:"John",
	age:22,
	greet:()=>{ console.log("新人です！"); }
 };
console.log( staff.name );
staff.greet();

② クラス

  • クラスとは、オブジェクトの設計図のこと
  • クラス名は基本的に頭文字は大文字にすること

③ インスタンス

  • インスタンスとは、クラスから生成したオブジェクトのこと
// 基本文法
 class Staff {}
 const staff = new Staff();

④ コンストラクタ

  • インスタンスを生成するときに「実行したい処理や設定」を「使いやすくするための機能」のこと
// 基本文法
 class Staff {
	constructor() {
	}
 }

⑤ インスタンスとコンストラクタ

// 生成されたインスタンスにプロパティと値を追加する
// この場合、プロパティ名はname、値は"John"
 class Staff {
	constructor() {
	}
 }

 class Staff {
	constructor() {
	this.name = "John";
	}
 }

// インスタンスはオブジェクトなので、コンストラクタの中で追加した値は
// 「インスタンス.プロパティ」とすることでクラス外で使用できる
 class Staff {
	constructor() {
		this.name = "John";
		this.age = 22;
	}
 }
const staff = new Staff();
console.log(`名前：${staff.name}`);
console.log(`年齢：${staff.age}`);

// コンストラクタに引数を渡す
 class Staff {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
 }
const staff = new Staff("John", 22);

⑥ メソッド

  • メソッドとは、インスタンスの動作のようなもの
// 基本文法
 class クラス名 {
	constructor() {
	}
	メソッド名() {
		// 行いたい処理
	}
 }

// 例文
 class Staff {
	constructor(name, age) {
	}
	greet() {
		console.log(`こんにちは！`);
	}
 }
const staff = new Staff("John", 22);
console.log(`名前：${staff.name}`);
console.log(`年齢：${staff.age}`);
staff.greet();

// メソッド内で値を使う
 class Staff {
	constructor(name, age) {
	this.name = name;
	this.age = age;
	}
	info() {
		console.log(`名前は${this.name}です);
	}
 }
const staff = new Staff("John", 22);
staff.info();

// メソッド内で他のメソッドを呼び出す
 class Staff {
	constructor(name, age) {
	this.name = name;
	this.age = age;
	}
	greet() {
		console.log("こんにちは");
	info() {
		this.greet();
	}
 }
const staff = new Staff("John", 22);
staff.info();

⑦ 継承

  • 継承とは、「既ににあるクラス」をもとに「新しくクラスを作成」すること
  • 継承元の機能を改めて記述しなくても、継承元の機能を使用することができる
  • 子クラスで独自に定義されたことは、親クラスのインスタンスからは呼び出せない
// 基本文法
 class Programmer extends Staff {
 }

// 例文
 class Staff {
	constructor(name, age) {
	this.name = name;
	this.age = age;
	}
	greet() {
		console.log("こんにちは");
	info() {
		this.greet();
		console.log(`名前は${this.name}です`);
		console.log(`${this.age}歳です`);
	}
 }
const staff = new Staff("John", 22);
staff.info();

class Programmer extends Staff{
}
const prog = new Programmer("Nancy", 27);
prog.info();

// メソッドの戻り値
// 22歳入社として経験年数を「実年齢-22歳」で計算
 class Programmer extends Staff{
	getExperience() {
		return this.age-22;
}
const prog = new Programmer("Nancy", 27);
const exp = prog.getExperience();
console.log(exp);

⑧ オーバーライド

// メソッドのオーバーライド
// 親クラスに存在するメソッドを子クラスで同じ名前のメソッドを定義した場合
// 子クラスで定義したメソッドが優先して使用される

// コンストラクタのオーバーライド
// １行目に「super()」と記述する必要がある
// 「super()」で親クラスのコンストラクタを呼び出した後に「skillプロパティ」を追加している
 class Staff {
	constructor(name, age) {
		this.name = name;
		this.age = name;
	}
 }
 class Programmer extends Staff {
	constructor(name, age, skill) {
		super(name, age);
		this.skill = skill;
	}
 }

勉強不足だと思ったこと、調べたこと、感想

補足で調べたことは特になし。

クラスや継承の考え方は分かりやすくて演習もスムーズに進められるけど、上手な活用方法が見えづらいかな。

「何回も同じようなコードを書く」とか「コードを見た人が内容が分かりづらい、メンテしづらい」といった問題が起こらないように考えられていることだと思うので、コーディングでは重要なポイント。

そろそろコードディングの実例を見ていかないと「文法を覚えるだけ」だとイメージが整理しづらくなってきましたね。

次回以降のレッスンでそういった機会があればいいけど、Progateは文法レッスンがメインになってしまう？

レッスンを全部終わらせてから「習得に必要なこと」がProgateで足りないのであれば、考えなければなりませんね。

-プログラミング