Javascriptの「クラス」
JavaScript(ES6)から実装されました。
「クラス」かぁ・・・。
覚えるの面倒だな・・・。
私も説明するのが面倒です。
なんちゃって。
Javascriptの「クラス」
1つ1つ丁寧に説明していきます。
Javascript「クラス」ってなに？
以下のように記述します。
class クラス名{ }
始まりにclassを記述します。これは決まった型です。
クラス名は自分できます。
決め事として「クラス名」の頭文字は大文字にします。
後で見て、これだクラスだと判断がつくようにです。
例）Animal Man
Javascript「クラス」何に使うの？
Javascriptでたくさんのデータを管理しなければならないとしましょう。
何千、何万人という個人のデータを管理しなければならないとしましょう。
しかも個人のデータというのは、色々な種類があります。
その人の身長、体重、年齢、職業、家族構成などなどです。
毎回毎回、そのデータを作成するのは面倒です。
ざっくり言うと、class クラス名{ }ではデータのひな型を作成することが出来ます。重要なことが伝わりますでしょう。
class クラス名{ }
後ろには何の記号もつきません。
Javascript「クラス」に中身を設定
Javascript「クラス」に中身を設定します。
クラスの中にデータを設定する。これは決まった形があります。
constructor(){ }
constructor意味:建設者
class Human {
constructor() {
}
}
実際にコードを書いてみましょう。
class Human{
constructor(){
console.log("おはよう");
}
}クラスはコードを書いただけでは実行はされません。
関数もそうでした。
関数の場合は「関数の呼び出し」をかく必要がありました。
例
const introduction = function() {
console.log(“おはよう”);
};
introduction();
クラスの場合は、クラス独自のインスタンスを記述する必要があります。
Javascript「クラス」のインスタンスとは？
先ほどのコードなら、
class Human{
constructor() {
console.log(“おはよう”);
}
}
new Human();
new Human();がインスタンスになります。
そして今回なら、Humanインスタンスと呼ばれます。
「new クラス名()」
newは決まった単語です。
「class」を使うなら「new」をつくる。
セットで考えて下さい。
クラスはインスタンスがあることで初めて処理が実行されます。
クラスの中にデータを入れる
class Human{
constructor(){
データを入れる。
}
}
new Human();
↓
class Human{
constructor(){
this.name = “太郎”;
}
}
new Human();
const human = new Human();
console.log(human.name);
実際にコードを書いてみましょう
class Human{
constructor(){
this.name = "太郎";
}
}
new Human();
const human = new Human();
console.log(human.name);ディスプレイに
太郎
が、出力されます。
補足
new Human();
const human = new Human();
console.log(human.name);
↓説明のため2行にわけました。慣れてきたら1行でかいたほうがシンプルです。
const human = new Human();
console.log(human.name);
クラスにデータを入れるには、constructor（コンストラクタ）の中で「this.プロパティ = 値」と記述します。
name太郎がクラスHumanのデータに入ります。
console.log(human.name);
そしてname内のデータの指定方法です。
「human.name」
プロパティを指定します。
現段階でクラスの便利さのイメージがわかないと思います。
どう便利なのか考えてみましょう。
Javascript「クラス」便利なの？
class Human{
constructor(name,age){
this.name = name;
this.name = age;
this.hobby = hobby;
}
}
const human = new Human("太郎",25,"読書");
console.log(`${human.name}です。`);
console.log(`${human.age}歳です。`);
console.log(`趣味は${human.age}です。`);引数をかえれば出力される記述を変えることができます。
Javascriptのクラス「メソッド」とは？
メソッドとは、そのインスタンスの「動作」のようなものです。
「メソッド名() { }」とすることでメソッドは定義できます。
メソッド名は自分でつけます。
メソッドは関数と似たようなもので、中括弧「{ }」の中にそのメソッドで行いたい処理を記述します。
メソッドは「そのクラス」から生成したインスタンスに対して呼び出します。
「インスタンス.メソッド名( )」でメソッドを呼び出して処理を実行します。
先ほどのコードを使って実際に記述してみます。
class Human{
constructor(name,age){
this.name = name;
this.name = age;
this.hobby = hobby;
}
greet(){
console.log("こんにちは")
}
}
const human = new Human("太郎",25,"読書");
console.log(`${human.name}です。`);
console.log(`${human.age}歳です。`);
console.log(`趣味は${human.age}です。`);
human.greet();メソッド内で値を使う場合
メソッド内でインスタンスの値を使用するには「this」という値を使います。
「this.プロパティ名」記述します。
class Human{
constructor(name,age){
this.name = name;
this.name = age;
this.hobby = hobby;
}
greet(){
console.log(`はじめまして${this.name}です。`)
}
}
const human = new Human("太郎",25,"読書");
console.log(`${human.name}です。`);
console.log(`${human.age}歳です。`);
console.log(`趣味は${human.age}です。`);
human.greet();Javascriptのクラス「継承」とは？
すでにある「クラス」をもとにして、新しく「クラス」を作成する方法のことです。全ての機能を引き継ぐことができます。
クラスHuman から、新しいクラスManに機能を引き継ぐとします。
また、「継承」では元となるクラスを親クラス（今回はHumanクラス）、
新しく作成するクラスを子クラス（今回はManクラス）と呼びます。
継承するコードの記述です。
class Man extends Human {
}
※extends意味：拡張する 拡大する
class Human {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
this.greet();
console.log(名前は${this.name}です);
console.log(${this.age}歳です);
}
}
class Man extends Human {
}
「Manクラス」はHumanクラスのすべての機能を引き継いでいます。
greeメソッドを使用することができます。
「class Man」の「new Man」を作成します。
↓
class Human {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
this.greet();
console.log(`名前は${this.name}です`);
console.log(`${this.age}歳です`);
}
}
class Man extends Human {
}
const man = new Man("次郎",23);
man.greet();ディスプレイには
名前は次郎です
23歳です
が、出力されます。
