ユーザー登録が必要なサイトとかだと
ユーザーが登録を行うとオブジェクトとして作成しているそうで
コード
const user1={name:"田中",hobby:"読書"};
const user2={name:"鈴木",hobby:"スポーツ"};
・
・
・
const user100={name:"佐藤",hobby:"スキー"};
このように１つずつオブジェクトを作成してたら無茶苦茶面倒です。
そこで「nameは（）」「hobbyは（）」という、
設計図？をあらかじめ作成しておき、
後から情報を入れるようにすると毎回の手間がなく便利です。
この設計図のことを「クラス」と言うそうです。
コード
class User{
constructor(){
}
}
const user=new User();
意味
クラス「User」を設定
コンストラクタを追加
定数「user」を定義し、Userインスタンスを生成
上記コードとすることであらかじめクラスを設定し、
後から情報であるオブジェクトを入れることができます。
（このクラスから生成したオブジェクト「new User()」を「Userインスタンス」というそうです）
コードに記述のように
「class」の後に半角開けた後「クラス名」を入れますが、
このクラス名は最初だけ大文字なのが望ましいそうです。
コンストラクタの{}内には処理を入れることができ、
この処理はインスタンスの生成後実行されます。
コード
class User{
constructor(){
this.name="田中";
}
}
const user=new User();
console.log(user.name);
このようにコンストラクタ内の処理部分に「this.プロパティ=値」と記述すると、
オブジェクトであるインスタンス「new User();」のプロパティが「田中」ということになり、
その後のconsole.logでの出力で、
オブジェクト（user）のプロパティ(name)が出力されるようになります。
ですがこれだとインスタンスをいくら生成しても「田中」にしかなりません。
そこでこの「田中」の部分を引数で呼び出せるようにします。
コード
class User{
constructor(name){
this.name=name;
}
}
const user=new User("田中");
console.log(user.name);
このように、コンストラクタに引数を設定し、
コンストラクタ内の処理でこの引数を受け取れるようになったため、
インスタンスの（）内に「田中」と記述すると、引数として渡すことができました。
これを最初の記述情報で書き換え、テンプレリテラルを使ってそれっぽく記述すると
コード
class User{
constructor(name,hobby){
this.name=name;
this.hobby=hobby;
}
}
const user=new User("田中","読書");
console.log(`名前:${user.name}`);
console.log(`趣味:${user.hobby}`);
出力
名前:田中
趣味:読書
となるわけです。
次にコンストラクタのようなクラスの機能の１つである「メソッド」についてです。
コード
class User{
constructor(name,hobby){
this.name=name;
this.hobby=hobby;
}
introduction(){
console.log("私はtanakaです");
}
}
const user=new User("田中","読書");
user.introduction();
出力
私はtanakaです
「メソッド」（上記コードの「introduction(){}」にあたる）は、
そのクラスから生成したインスタンスの動作処理のまとまりのようなものです。
メソッドを呼び出すには、インスタンスの後ろに「.メソッド名()」とすると出力できます。
次に、「tanaka」の部分をコンストラクタのプロパティ「name」を用いて出力しようとすると
コード
class User{
constructor(name,hobby){
this.name=name;
this.hobby=hobby;
}
introduction(){
console.log(this.name);
}
}
const user=new User("田中","読書");
user.introduction();
このように、メソッド内でインスタンスの「田中」を使いたいので、
コンストラクタのプロパティ「this.name」を使います。
このプロパティ「this.name」を使う理由として、
このプロパティはコンストラクタの引数（name,hobby）を代入しており、
インスタンスの値「田中」を引数として渡しているためこのプロパティを使用しています。
では田中さんの紹介を出力するメソッドを作成してみます。
コード
class User{
constructor(name,hobby){
this.name=name;
this.hobby=hobby;
}
introduction(){
console.log(`私は${this.name}と申します`);
console.log(`趣味は${this.hobby}です`);
}
}
const user=new User("田中","読書");
user.introduction();
出力
私は田中と申します
趣味は読書です
このようにメソッド「introduction」が出力できました。
次はメソッド内で別のメソッドを使用してみます。
コード
class User{
constructor(name,hobby){
this.name=name;
this.hobby=hobby;
}
greet(){
console.log("はじめまして")
}
introduction(){
console.log(`私は${this.name}と申します`);
console.log(`趣味は${this.hobby}です`);
}
}
const user=new User("田中","読書");
user.introduction();
出力
私は田中と申します
趣味は読書です
コンストラクタとメソッド「introduction」の間にメソッド「greet」を入れました。
しかしこのコードだとメソッド「introduction」しか出力してないので上記の内容になります。
コード
class User{
constructor(name,hobby){
this.name=name;
this.hobby=hobby;
}
greet(){
console.log("はじめまして")
}
introduction(){
this.greet();
console.log(`私は${this.name}と申します`);
console.log(`趣味は${this.hobby}です`);
}
}
const user=new User("田中","読書");
user.introduction();
出力
はじめまして
私は田中と申します
趣味は読書です
メソッド「introduction」内に「this.別メソッド名();」を入れることで、
今回だとメソッド「greet」を出力処理する内容をメソッド「introduction」内に入れることができました。