JavaScriptでのクラス定義方法とコンストラクタ定義まで！ミニマム実践してみる！

みなさんこんにちは！

ひろぽんです！

最近JavaScriptの勉強をしているのですが、ついにここまできました！

オブジェクト指向言語には欠かせないクラスという概念！

かくいう私、仕事でc#と使っているため、オブジェクト指向をはじめクラスという考え方が好きなんですね！

なので今回はJavaScriptでのクラスの定義方法をコンストラクタとは何か？というところまで書いていければと思います！

JavaScriptでのクラス定義方法

では早速！JavaScriptでのクラス定義方法についてみていきましょう！

JavaScriptではクラスを以下のように定義します。

JavaScriptでのクラス定義方法 (javascript)#6dffc51c6042

class human {
    constructor(コンストラクタでの引数){
        コンストラクタ内での処理
    }
    インスタンスメソッド(){
        インスタンスを生成しないと使えない関数の処理
    }
 
    static クラスメソッド(){
        インスタンスを生成しなくても使える関数の処理
    }
}

▸ この snippet は実行結果未収録

▸ 実行結果は未収録です

簡単ですよね！

c#ではアクセス装飾子など考えたり、戻り値なども考えないといけないのですが、JavaScriptではそんなことはありません！

JavaScriptでは結構シンプルな感じでクラス宣言できるんだなーーと思いました！

コンストラクタとは？

では続いてクラスを考えるうえで避けては通れないコンストラクタについて簡単に説明します！

コンストラクタとは、とどのつまりクラスインスタンスを生成した時に自動的に呼ばれる関数の事です。

インスタンス生成とはなんぞや？という声も聞こえるので以下で一度上記humanインスタンスを作ってみましょう。

コンストラクタとは？ (javascript)#92eab64d49da

class human {
    constructor(){
        console.log('Hello World')
    }
}
 
let taro = new human();

▸ 実行ボタンで結果を表示

taroという名前の変数にhumanというインスタンスを生成してみました！

インスタンス作成は「new　クラス名」といった形で行います。

このhumanというクラスは、インスタンス作成＝コンストラクタ実行時に、コンソールにHelloWorldと表示されます。

実際に実行してみると！

しっかりと実行されていますね！

とりあえず、コンストラクタとは、インスタンス作成時に自動で呼ばれる関数と覚えておきましょう！

正直クラスの中では「constructor」と定義していうのに、実際使うときは「new　クラス名」なので違和感しかないと思いますが、最初はそんなものです！

ミニマム実践！HumanクラスをつくってBMIを計算してみる

では何に使うのか全く分からないクラス。名前と身長と体重を渡したら、bmiを計算してくれるクラスを作ってみましょう！

まずはコンストラクタの定義！

class human {
    constructor(name,height,weight){
        this.name = name;
        this.height = height;
        this.weight = weight;
    }
}

これでこのクラス内ではthis.name、this.height、this.weightを使えるようになりました！

では次に身長をメートルに直して2乗してくれるメソッドを宣言しましょう！

class human {
    constructor(name,height,weight){
        this.name = name;
        this.height = height;
        this.weight = weight;
    }
    
    getSquare(){
        return parseFloat(this.height/ 100 ^ 2)
    }
    
}

しっかりとthis.heightにアクセスできています！

では続いて体重　÷　身長(m)の2乗の体重を割る部分の宣言をしてみましょう！

ミニマム実践！HumanクラスをつくってBMIを計算してみる (javascript)#c1325fffc440

class human {
    constructor(name,height,weight){
        this.name = name;
        this.height = height;
        this.weight = weight;
    }
 
    getSquare(){
        return parseFloat(this.height/ 100 ^ 2)
    }
 
    getBmi(){
        return this.weight / this.getSquare()
    }
 
}

▸ この snippet は実行結果未収録

▸ 実行結果は未収録です

先ほど宣言したgetSquareにアクセスできていますし、this.weightにもアクセスできていますね！

ではbmi値をコンソールに残してくれる関数を作りましょう！

ミニマム実践！HumanクラスをつくってBMIを計算してみる (javascript)#f37a77a8c6bb

class human {
    constructor(name,height,weight){
        this.name = name;
        this.height = height;
        this.weight = weight;
    }
 
    getSquare(){
        return parseFloat(this.height/ 100 ^ 2)
    }
 
    getBmi(){
        return this.weight / this.getSquare()
    }
 
    showBmi(){
        console.log(`${this.name}さんのBMIは${this.getBmi()}です`)
    }
 
}

▸ 実行ボタンで結果を表示

最後にこのクラスを使ってみましょう！

ミニマム実践！HumanクラスをつくってBMIを計算してみる (javascript)#6268bb7340a3

class human {
    constructor(name,height,weight){
        this.name = name;
        this.height = height;
        this.weight = weight;
    }
 
    getSquare(){
        return parseFloat(this.height/ 100 ^ 2)
    }
 
    getBmi(){
        return this.weight / this.getSquare()
    }
 
    showBmi(){
        console.log(`${this.name}さんのBMIは${this.getBmi()}です`)
    }
 
}
 
let taro = new human('taro',170,60);
taro.showBmi();