> For the complete documentation index, see [llms.txt](https://super-yusuke.gitbook.io/udemy-course/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://super-yusuke.gitbook.io/udemy-course/state-wottakonpnento/es2015-no-class.md).

# ES2015 の class

[参考コード](https://codesandbox.io/s/rjon921l5q)

React.Component を ES2015 の class 構文で書く前に、単なる JavaScript の ES2015 class 構文を復習します。

```javascript
// class クラスネームで class を作成する
class Human {
  // constructor はクラスからインスタンスを作成した時に実行される
  constructor(name, age) {
    // this は作成されたインスタンスを指す
    this.name = name;
    this.age = age;
  }

  // クラスメソッド
  // クラスが持つファンクションのこと
  callMyProfile() {
    // 自分自身の値を参照するためにここでも this を使う
    console.log(this.name, this.age);
  }
}

// class からインスタンスを作成するために new 演算子を使う
// その際に引数も与える
const Nakanishi = new Human("Nakanishi", 30);

// console.log(Nakanishi.name);
// console.log(Nakanishi.age);

const Tanaka = new Human("Tanaka", 40);

// console.log(Tanaka.name);
// console.log(Tanaka.age);

// クラスメソッドにアクセスする
Nakanishi.callMyProfile();
Tanaka.callMyProfile();
```

## 最小限のクラスの作成

何もプロパティを持たない Human というクラスの作成と、Human クラスからインスタンスを作成し、Nakanishi という変数に代入する方法。

```javascript
// クラスを定義する
class Human() {
  constructor() {}
}

// new 演算子を使って class からインスタンスを作成する
const Nakanishi = new Human();
```

## new でインスタンスを作成する際に、引数を渡し、インスタンスのプロパティにアサインする

```javascript
class Human() {
  constructor(name, age) {
    // this は new で作成されたインスタンスを指す
    // つまり自分自身
    this.name = name
    this.age = age
  }
}

const Nakanishi = new Human('Nakanishi', 30);
console.log(Nakanishi);
```

## class が持つファンクション = class method を定義する

```javascript
class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  callMyProfile() {
    console.log(this.name, this.age);
  }
}

const Nakanishi = new Human("Nakanishi", 30);
// クラスメソッドの呼び出し
Nakanishi.callMyProfile();
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://super-yusuke.gitbook.io/udemy-course/state-wottakonpnento/es2015-no-class.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.