JavaScriptクラス：ガイド

JavaScriptはプロトタイプに基づいています。オブジェクトを宣言するたびに、そのオブジェクトに関連付けられているプロパティとメソッドを拡張するプロトタイププロパティが作成されます。

過去数年にわたって、多くのJavaScript開発者は、オブジェクト指向設計をコードに組み込む方法を模索してきました。これにより、プロトタイプを拡張するクラスと呼ばれるJavaScriptの新しいタイプのオブジェクトが生まれました。

このガイドでは、クラスとは何か、それらが使用される理由、およびコードにクラスを実装する方法について説明します。クラスを始めるのに役立つ例を紹介します。

JavaScriptクラスとは何ですか？

クラスは、オブジェクトのテンプレートを宣言する方法です。

オブジェクト指向プログラミング言語に精通している場合は、それらがクラスとオブジェクトに大きく依存していることをご存知でしょう。クラスは、ある種のデータの青写真のようなものです。つまり、保存できるデータとアクセスできるメソッドを示します。オブジェクトはそのクラスのインスタンスです。

クラスの例は、Bookです。 。このクラスには、書籍に保存できる情報とそのデータを変更する方法の青写真が含まれます。オブジェクトは、個々の本である「欲望という名前の路面電車」である可能性があります。

JavaScriptでは、クラスは私たちがシンタックスシュガーと呼んでいるものです。クラス構文は便利ですが、必ずしも新しい機能を追加するわけではありません。

クラスは、ReactやNext.jsなどの最新のJavaScriptフレームワークで一般的に使用されています。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

クラスと関数

この記事の1つを覚えている場合は、それを次のようにしましょう。クラスは単なる通常の関数です。

クラスと関数式の唯一の違いは、それらがどのように宣言されるかです。関数はfunctionを使用します キーワードとクラスはclassを使用します キーワード。技術的には、classキーワードを使用しなくてもクラスを宣言できます。

2つの関数を作成し、それらのプロトタイプを印刷することで、それらが同じであることがわかります。

const PlayerFunction = function() {}
const PlayerClass = class {}

console.log(Object.getPrototypeOf(PlayerFunction));
console.log(Object.getPrototypeOf(PlayerClass));

クラス式と関数は次を返します。

関数（）

関数 （）

関数とクラスの両方が同じプロトタイプベースのアーキテクチャを使用しています。

クラスを定義する方法

クラスをどのように定義しますか？それは素晴らしい質問です。

classを使用してクラスを定義できます キーワード。クラスを定義したら、constructor（）関数を使用して、いくつかのデフォルト値でクラスを初期化できます。

JavaScriptコンソールを開き、次のコードを貼り付けます。

	class Book {
constructor(title, author) {
		this.title = title;
		this.author = author;
	}
}

これにより、Bookというクラスが作成されます 。このクラスには、クラスコンストラクターメソッドで定義したtitleとauthorの2つの値を格納できます。このクラスのオブジェクトを作成するには、次のコードを使用できます。

var streetcar = new Book("A Streetcar Named Desire", "Tennessee Williams");

他のオブジェクトと同じように、クラスから値を取得できます。

console.log(streetcar.title);

コードが返されます：Desireという名前のStreetcar。

クラスメソッドを定義する方法

プロトタイプよりもクラスを使用する利点の1つは、クラス内でメソッドを宣言できることです。これは、prototypeを使用する必要がないことを意味します 既存の関数に新しいメソッドを追加するための構文。

この例を考えてみましょう。

class Book {
	constructor(title, author) {
		this.title = title;
		this.author = author;
	}
	
	getDetails() {
		console.log(`${this.title} is a book written by ${this.author}.`);
	}
}

getDetails()というメソッドを宣言しました これはクラス内に存在します。これは、すべてのコードをグループ化しておくので便利です。 getDetails()と呼びましょう 関数：

var streetcar = new Book("A Streetcar Named Desire", "Tennessee Williams");
streetcar.getDetails();

私たちのコードは次を返します：

欲望という名の電車は、テネシーウィリアムズが書いた本です。

クラスの継承

他のオブジェクト指向構造と同様に、クラスは他のクラスからプロパティを継承できます。

継承とは、子クラスが親クラスのメソッドとデータにアクセスできるプロセスを指します。クラスを継承するには、extendsを使用できます キーワード。 JavaScriptファイルを作成するか、JavaScriptコンソールを開いて、次のコードを貼り付けます。

class Fiction extends Book {
	constructor(title, author, fiction) {
		super(title, author);

		this.fiction = true;
	}
}

以前に青写真として宣言したBookクラスを使用するFictionというクラスを作成しました。このコードでは、super()を使用しました Bookという親クラスから値titleとauthorを継承するキーワード。次に、新しい属性fictionを定義しました 、その値はデフォルトでtrueに設定されています。

新しいフィクションクラスのオブジェクトを作成しましょう。

var gatsby = new Fiction("The Great Gatsby", "F. Scott Fitzgerald");
console.log(gatsby.fiction);

コードはtrueを返します。 Fictionクラスは、fictionというアイテムを格納します これはデフォルトでtrueです。 Bookクラスのインスタンスからこの値にアクセスしようとしても、何も返されません。これは、「フィクション」にはフィクションクラスでのみアクセスできるためです。

ゲッターとセッター

クラスを操作するときは、getter関数とsetter関数を使用する必要があります。

ゲッター関数を使用すると、クラスからメソッドを取得できます。セッター関数を使用すると、クラス内の特定のアイテムの値を変更できます。これらの関数は、getを使用して示されます およびset それぞれキーワード。

次のコードを検討してください。

class Book {
	constructor(title, author) {
		this.title = title;
		this.author = author;
	}
	
	get author() {
		return this.author;
	}

	set author(author) {
		this.author = author;
	}
}

この例では、authorという2つのメソッドを宣言しています。 。これらのメソッドの1つを使用すると、authorの値を取得できます。;それが私たちのgetです 方法。もう1つの方法では、authorの値を変更できます 。

次のコードを使用して、これが実際に動作していることを確認できます。

var streetcar = new Book("A Streetcar Named Desire", "");
streetcar.author = "Tennessee Williams";
console.log(streetcar.author);

コードが返されます：TennesseeWilliams。

streetcarというオブジェクトを初期化しました A Streetcar Named Desireというタイトルを付けました 。次に、authorの値を設定します Tennessee Williamsへ コードで定義したセッターを使用します。最後に、authorの値を出力しました getterメソッドを使用してコンソールに移動します。

結論

クラスはJavaScriptに新しい機能を追加しませんが、オブジェクト指向プログラミングに慣れている場合は、関数の記述を理解しやすくします。

クラスは、JavaScriptのプロトタイプベースの設計を抽象化し、よりオブジェクト指向に見えるようにします。クラスは関数であるため、「見える」という言葉は非常に重要です。クラスは構文糖衣にすぎません。

これで、JavaScriptエキスパートのようなクラスの使用を開始する準備が整いました。