JavaScriptでクラスを作成する方法を学ぶ

JavaScriptでクラスを作成する方法を学ぶ

2015年に、JavaScriptプログラミング言語のES6バージョンがリリースされました。このリリースでは、言語にいくつかの主要なアップグレードが導入され、JavaやC ++などの他の言語の中でもオブジェクト指向プログラミング言語のカテゴリに正式に配置されました。





オブジェクト指向プログラミングは、オブジェクトとオブジェクトに対して実行できる操作に焦点を当てています。ただし、オブジェクトを作成する前に、クラスを作成する必要があります。



2つのファイルを比較するnotepad ++

JavaScriptクラスは、ES6バージョンの言語に付属していたゲームを変える機能の1つです。クラスは、オブジェクトの作成に使用される青写真として説明できます。





このチュートリアル記事では、JavaScriptクラスを使用してオブジェクトを作成および操作する方法を学習します。

JavaScriptクラス構造

JavaScriptでクラスを作成する場合、常に必要となる基本的なコンポーネントが1つあります。それは、 クラス キーワード。 JavaScriptクラスの他のほとんどすべての側面は、正常に実行するために必要ではありません。



コンストラクターが提供されていない場合、JavaScriptクラスは自然に実行されます（クラスは実行中に空のコンストラクターを作成するだけです）。ただし、コンストラクターなどの関数を使用してJavaScriptクラスを作成し、classキーワードを使用しない場合、このクラスは実行できません。

NS クラス キーワード（常に小文字である必要があります）は、JavaScriptのクラス構造で必要です。次の例は、JavaScriptクラスの一般的な構文です。 JavaScriptクラスの構文は次のとおりです。



class ClassName{
//class body
}

JavaScriptでクラスを作成する

プログラミングでは、クラスは、特殊なオブジェクトを作成するために使用される一般化されたエンティティと見なすことができます。たとえば、学校環境では、一般化されたエンティティ（クラス）は学生であり、学生のオブジェクトはジョンブラウンである可能性があります。ただし、オブジェクトを作成する前に、オブジェクトが格納するデータを知っておく必要があります。ここでJavaScriptコンストラクターが役立ちます。

JavaScriptクラスでのコンストラクターの使用

コンストラクターは、いくつかの理由から、クラス作成プロセスに不可欠です。オブジェクトの状態を（その属性を介して）初期化し、新しいオブジェクトがインスタンス化（定義および作成）されると自動的に呼び出されます。



コンストラクターの例の使用

以下に、コンストラクターの例とその意味の説明を示します。

class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
}

上記のコードは、JavaScriptクラスコンストラクターの重要な側面を示しています。 JavaやC ++などの他の言語とは異なり、JavaScriptのコンストラクターはクラス名を使用してコンストラクターを作成しません。それは使用します ビルダー 上記の例でわかるように、キーワード。

関連している： Javaでクラスを作成する方法を学ぶ

NS ビルダー 上記の例では、3つのパラメータを取り、 これ クラスの現在のインスタンスにパラメータを割り当てるキーワード。少し紛らわしいように思えるかもしれませんが、理解する必要があるのは、クラスは多くの家を作成するために使用される青写真と見なすことができるということです。

建設された各家は、このクラスのオブジェクトと見なすことができます。これらの家はそれぞれ同じ青写真で作成されていますが、特定の地理的位置または所有者によって区別できます。

NS これ キーワードは、クラスによって作成された各オブジェクトを区別するために使用されます。これにより、同じクラスを使用して作成されたオブジェクトごとに正しいデータが保存および処理されます。

JavaScriptでオブジェクトを作成する

コンストラクターは、特定のクラスのオブジェクトが持つべき属性の数を示すため、JavaScriptのような言語では重要です。一部の言語では、コンストラクターやその他のメソッドで使用する前に、属性（変数）を宣言する必要があります。ただし、これはJavaScriptには当てはまりません。

関連：JavaScriptで変数を宣言する方法

上記の学生クラスコンストラクターを見ると、このクラスのオブジェクトには3つの属性があることがわかります。

オブジェクトの例の作成

以下に、JavaScriptでオブジェクトを作成する例を示します。

//create a new object
const john = new Student('John', 'Brown', '2018');

上記のコードは 学生 オブジェクトを作成するクラス。

クラスのオブジェクトを作成するときは、を使用する必要があります 新着 キーワードの後に​​、クラス名とそれぞれの属性に割り当てる値が続きます。これで、名前がJohn、名前がBrown、開始日が2018の新しい学生ができました。定数変数もあります。 ジョン。 この変数は、作成されたオブジェクトを使用できるようにするために重要です。

なしで ジョン 変数を使用して、新しいオブジェクトを作成することはできます 学生 クラスですが、このオブジェクトにアクセスして、クラスのさまざまなメソッドで使用する方法はありません。

JavaScriptクラスでのメソッドの使用

メソッドは、クラスから作成されたオブジェクトに対して操作を実行するために使用されるクラスの関数です。学生クラスに追加する良い方法は、各学生に関するレポートを生成する方法です。

クラスメソッドの作成例

以下は、JavaScriptでクラスメソッドを作成するための例です。

class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
}
}

上記のクラスには、で作成された各生徒に関するレポートを生成するメソッドが含まれています。 学生 クラス。を使用するには 報告（） メソッド単純な関数呼び出しを行うには、クラスの既存のオブジェクトを使用する必要があります。

上記のオブジェクトの作成の例のおかげで、次のオブジェクトが必要になります。 学生 変数に割り当てられているクラス ジョン 。使用する ジョン 、これで正常に呼び出すことができます 報告（） 方法。

クラスメソッドの使用例

以下は、JavaScriptでクラスメソッドを使用する例です。

//create a new object
const john = new Student('John', 'Brown', '2018');
//calling the report method and storing its result in a variable
let result = john.report();
//printing the result to the console
console.log(result);

上記のコードは 学生 コンソールで次の出力を生成するクラス：

John Brown started attending this institution in 2018

JavaScriptクラスでの静的メソッドの使用

静的メソッドは、オブジェクトなしで使用できるJavaScriptクラスの唯一のメソッドであるため、一意です。

上記の例では、 報告（） クラスのオブジェクトのないメソッド。これは、 報告（） メソッドは、オブジェクトの属性に依存して、望ましい結果を生成します。ただし、静的メソッドを使用するには、メソッドを格納するクラスの名前のみが必要です。

静的メソッドの例の作成

以下は、JavaScriptの静的メソッドの例です。

class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
}
//static method
static endDate(startDate){
return startDate + 4;
}
}

上記の例から注意すべき重要なことは、すべての静的メソッドが 静的 キーワード。

静的メソッドの例の使用

以下は、JavaScriptで静的メソッドを使用する例です。

//calling a static method and printing its result to the console
console.log(Student.endDate(2018));

上記のコード行では、 学生 コンソールで次の出力を生成するクラス：

2022

JavaScriptクラスの作成は簡単です

JavaScriptクラスを作成し、そこから1つ以上のオブジェクトをインスタンス化する場合は、覚えておく必要のあることがいくつかあります。

  • JavaScriptクラスには クラス キーワード。
  • JavaScriptコンストラクターは、オブジェクトが持つことができる値の数を示します。
  • 一般的なクラスメソッドは、オブジェクトなしでは利用できません。
  • 静的メソッドは、オブジェクトなしで使用できます。

NS コンソール 。 ログ（） この記事全体でメソッドを使用して、JavaScriptクラスで一般メソッドと静的メソッドの両方を使用した結果を提供します。このメソッドは、デバッグプロセスに役立つため、JavaScript開発者にとって便利なツールです。

に精通している console.log（） メソッドは、JavaScript開発者として実行できる最も重要なことの1つです。

共有 共有 つぶやき Eメール 究極のJavaScriptチートシート

このチートシートを使用して、JavaScript要素について簡単に復習してください。

次を読む 関連トピック
  • プログラミング
  • プログラミング
  • JavaScript
  • コーディングのヒント
  • コーディングチュートリアル
著者について カデイシャキーン（21の記事が公開されました）

Kadeisha Keanは、フルスタックソフトウェア開発者およびテクニカル/テクノロジーライターです。彼女は、最も複雑な技術的概念のいくつかを単純化する明確な能力を持っています。技術初心者なら誰でも簡単に理解できる素材を作る。彼女は、執筆、興味深いソフトウェアの開発、そして（ドキュメンタリーを通じて）世界中を旅することに情熱を注いでいます。

KadeishaKeanのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください