みなさんこんにちは！Kotonoです。
今回はJavaScriptにおける「オブジェクト指向プログラミング」について解説していきたいと思います。
この記事では
・オブジェクト指向を学ぶメリット
などといった基本的な内容からオブジェクト指向プログラミングの実践方法など、より具体的な内容に関してもわかりやすく説明していきます。
オブジェクト指向とは
みなさんは「オブジェクト指向言語」が何かわかりますか？
英語ではOOP（Object Oriented Programming）と呼ばれている、プログラムを書く上での「考え方」のひとつです。オブジェクト指向以外にも多数の「考え方」が存在します。例えば、構造化プログラミングや、関数型プログラミングなどが挙げられます。
オブジェクト指向プログラミングは、その名の通り「オブジェクト」を主に扱います。
オブジェクトとは「モノ」のことです。オブジェクト指向プログラミングにおいて、プログラマーは「モノ」を作成しそれを操ります。
主なオブジェクト指向言語はJavaやC＋＋、JavaScriptなどが挙げられます。
オブジェクト指向についてのもっと詳しい説明は、以下のリンクを参照してください。
JavaScriptの特徴
同じオブジェクト指向言語といっても、JavaとJavaScriptのオブジェクト指向には違いがあります。
Javaでは「クラス」が存在し、そのクラスのオブジェクトは「インスタンス」と呼ばれます。
しかし、JavaScriptには「クラス」という概念は存在しません。その代わりJavaScriptには「プロトタイプ」というものが存在します。
プロトタイプ・オブジェクトと呼ばれるものが他のオブジェクトの基となり、Javaにおけるクラスの役割を果たしているのです。実際、JavaScriptは「プロトタイプ・ベースのオブジェクト指向言語」と言われています。
プロトタイプに関するより詳しい説明は、以下のリンクを参照してください。
オブジェクト指向を学ぶメリット
オブジェクト指向という「考え方」、あるいは「概念」を学ぶメリットは何でしょうか。
主に挙げられるのは、プログラムの読みやすさが改善され、誰にでも理解出来るものに仕上げることが出来るということ。また、プログラムの仕様変更などにも素早く対応することが出来、なおかつコードの再利用などにもより便利になります。
オブジェクト指向独特の「継承」などの概念なども、様々なオブジェクトを作成する際に便利で、プログラマーにより柔軟性を与えるのです。
オブジェクト指向プログラミングを実践してみよう
では実際に、JavaScriptにおいてオブジェクト指向プログラミングを実践してみましょう。
「オブジェクト指向」を意識してプログラムを書くと、コードもスッキリし誰が見てもわかりやすいものに仕上がるのでとても有意義なんです。
オブジェクト指向プログラミング（基本編）
では、早速以下のコードをご覧ください。
var Student = function(name, id) {
this.name = name;
this.id = id;
this.getName = function() {
return this.name;
}
this.getFullData = function() {
return "Student Name: " + this.name + "; ID number: " + this.id;
}
};
上のコードでは、変数Studentに関数を定義しました。
これが、JavaScriptにおける「クラス」を表しています。クラスなので変数の頭文字は大文字に設定するようにしましょう。
上の関数は引数にnameとidを持ちます。this.name = name この行の意味は、ユーザーが任意で引数に指定した文字列をnameに格納する、ということです。
nameやidは「プロパティ」と呼ばれます。Javaで「フィールド」と呼ばれるものです。getName関数はプロパティではなく「メソッド」と呼ばれます。
getName関数はnameの値を返し、getFullData関数はnameとidの値を返します。Studentクラスの定義が出来たら、Studentクラスのインスタンスを作成します。
var stud = new Student("Samurai Taro", 1000);
console.log(stud.getFullData());
実行結果は以下の通りです。
Student Name: Samurai Taro; ID number: 1000
インスタンスの作成は new クラス名(引数) となります。
実際上のコードでは、変数studにStudentクラスのインスタンスを格納しています。
上のコードで作成したインスタンスは、nameはSamurai Taro、idは1000というプロパティを持っています。
その為、getFullData関数の戻り値をJavaScriptコンソールに表示させると、上記のような文字列が表示されました。
しかし、このコードは改善の余地があります。
それは、プロパティとメソッドを分けて定義するということです。
var Student = function(name, id) {
this.name = name;
this.id = id;
};
Student.prototype = {
getName : function() {
return this.name;
},
getFullData : function() {
return "Student Name: " + this.name + "; ID number: " + this.id;
}
};
上のコードは、プロパティの定義までは先ほどものと一緒です。
しかし、メソッドの定義方法が先ほどとは違います。ここでは、Studentクラスをプロパティのみで形成したあと、Studentクラスのprototypeプロパティへアクセスします。
そして、そのprototypeプロパティの値として、 getNameメソッドや getFullDataメソッドを定義しているのです。では、インスタンスを先ほどと同じように作成してみましょう。
var stud1 = new Student("Samurai Taro",1111)
var stud2 = new Student("Yamada Hanako",2222)
console.log(stud1.getFullData());
console.log(stud2.getFullData());
実行結果は以下の通りです。
Student Name: Samurai Taro; ID number: 1111 Student Name: Yamada Hanako; ID number: 2222
ご覧いただけるように、stud1とstud2という別々のインスタンスを作成し、getFullDataを使用し中身を表示させてみました。
オブジェクト指向プログラミング（応用編）
先ほどは、基本的なオブジェクト指向プログラミングについて解説しました。
しかし、オブジェクト指向はとても奥が深く、他にも様々な概念などが存在します。それらについて知識を増やすためには、以下のリンクが参考になるのでぜひご覧ください。
まとめ
今回はJavaScriptにおける「オブジェクト指向」について解説しました。
JavaScriptも数あるオブジェクト指向言語の仲間なので、オブジェクト指向の考え方や概念をしっかりと把握している必要があります。
みなさんもこの記事を通して、オブジェクト指向についての知識をどんどん深めていってくださいね。
