JavaScript クラス #1

株式会社リュディアです。JavaScript のクラスについてまとめてみます。オブジェクト指向やクラスについて丁寧に記載すると膨大な分量になるので雰囲気がわかる程度に記載してみます。掲載するソースコードはすべて GAS の開発環境で動作確認をしています。

まずオブジェクト指向プログラミング、オブジェクト指向言語の勉強を始めると必ず出てくるクラスという用語についてです。いろいろな定義があるのですが直感的には「データと、データを扱う関数を1つのパッケージにまとめたもの、それがクラス」と言えると思います。

以下のコードをみてください。

function add( a, b ) { return a + b ; }
function sub( a, b ) { return a - b ; }
function mul( a, b ) { return a * b ; }
function div( a, b ) { return a / b ; }

function myFunction1() {
 a = 10 ;
 b = 2 ;
 console.log( add( a, b ) ) ;
 console.log( sub( a, b ) ) ;
 console.log( mul( a, b ) ) ;
 console.log( div( a, b ) ) ;
}

// 実行結果
// 12
// 8
// 20
// 5

2 つの数の四則演算をする関数 add, sub, mul, div を個別に定義し、メインとなる myFunction1 から各種演算用の関数を呼び出しています。いわゆる手続き型プログラミングで実装する方法です。

次に同様の処理をオブジェクト指向っぽい方法でクラスを使って実装してみます。以下のコードをみてください。

class manipulatorManager {
 constructor( arg1, arg2 ) {
   this._a = arg1 ;
   this._b = arg2 ;
 }
 add( ) { return this._a + this._b ; }
 sub( ) { return this._a - this._b ; }
 mul( ) { return this._a * this._b ; }
 div( ) { return this._a / this._b ; }
}

function myFunction2() {
 const manipulator = new manipulatorManager( 10, 2 );
 console.log( manipulator.add() ) ;
 console.log( manipulator.sub() ) ;
 console.log( manipulator.mul() ) ;
 console.log( manipulator.div() ) ;
}

// 実行結果
// 12
// 8
// 20
// 5

class というキーワードで maniupulatorManager を定義しています。manipulatorManagerクラスは「扱う変数が 2 変数であること、4 種の演算用関数を持つこと」を定義しています。クラスとは「データと、データを扱う関数を1つのパッケージにまとめたもの」と記載した意味は理解いただけましたか。

クラスの内容の説明は後に回してまずはメインとなる myFuncion2 の内容を見ていきます。最初の const manipulator = new manipulatorManager( 10, 2 ) は、定義したクラスを利用してオブジェクトを生成する処理に相当します。生成したオブジェクトをインスタンスと呼びます。インスタンスは「具体化したもの」という意味です。クラス定義は「定義だけで実体は存在しない」のですが、new でオブジェクトを生成することで具体的なデータ、つまりインスタンスになるということです。ここでは manipulatorManager というクラスを引数 10, 2 でインスタンスしたものが manipulatorという名前をつけられたオブジェクト ということになります。

今回のまとめの重要点は以下の 2 つです。
A : クラスの定義は「定義」であって実体ではない
B : new で定義したクラスを呼び出すと実体となるオブジェクトが生成され、そのオブジェクトをインスタンスと呼ぶ

次回からも引き続きクラスを扱っていきます。少しずつ進んでいきましょう。

では、ごきげんよう。