【JavaScript入門】すぐわかる!JSにおけるオブジェクト指向とは

みなさんこんにちは!Kotonoです。

今回はJavaScriptにおける「オブジェクト指向プログラミング」について解説していきたいと思います。

この記事では

・オブジェクト指向とは
・オブジェクト指向を学ぶメリット

などといった基本的な内容からオブジェクト指向プログラミングの実践方法など、より具体的な内容に関してもわかりやすく説明していきます。

オブジェクト指向とは

みなさんは「オブジェクト指向言語」が何かわかりますか?

英語ではOOP(Object Oriented Programming)と呼ばれている、プログラムを書く上での「考え方」のひとつです。オブジェクト指向以外にも多数の「考え方」が存在します。例えば、構造化プログラミングや、関数型プログラミングなどが挙げられます。

オブジェクト指向プログラミングは、その名の通り「オブジェクト」を主に扱います。

オブジェクトとは「モノ」のことです。オブジェクト指向プログラミングにおいて、プログラマーは「モノ」を作成しそれを操ります。

主なオブジェクト指向言語はJavaやC++、JavaScriptなどが挙げられます。

オブジェクト指向についてのもっと詳しい説明は、以下のリンクを参照してください。

オブジェクト指向とは何か?わかりやすい例で説明してみた。
更新日 : 2019年9月11日

JavaScriptの特徴

同じオブジェクト指向言語といっても、JavaとJavaScriptのオブジェクト指向には違いがあります。

Javaでは「クラス」が存在し、そのクラスのオブジェクトは「インスタンス」と呼ばれます。

しかし、JavaScriptには「クラス」という概念は存在しません。その代わりJavaScriptには「プロトタイプ」というものが存在します。

プロトタイプ・オブジェクトと呼ばれるものが他のオブジェクトの基となり、Javaにおけるクラスの役割を果たしているのです。実際、JavaScriptは「プロトタイプ・ベースのオブジェクト指向言語」と言われています。

プロトタイプに関するより詳しい説明は、以下のリンクを参照してください。

【JavaScript入門】プロトタイプ(prototype)の使い方と継承まとめ!
更新日 : 2019年5月13日

オブジェクト指向を学ぶメリット

オブジェクト指向という「考え方」、あるいは「概念」を学ぶメリットは何でしょうか。

主に挙げられるのは、プログラムの読みやすさが改善され、誰にでも理解出来るものに仕上げることが出来るということ。また、プログラムの仕様変更などにも素早く対応することが出来、なおかつコードの再利用などにもより便利になります。

オブジェクト指向独特の「継承」などの概念なども、様々なオブジェクトを作成する際に便利で、プログラマーにより柔軟性を与えるのです。

オブジェクト指向プログラミングを実践してみよう

では実際に、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

ご覧いただけるように、stud1stud2という別々のインスタンスを作成し、getFullDataを使用し中身を表示させてみました。

オブジェクト指向プログラミング(応用編)

先ほどは、基本的なオブジェクト指向プログラミングについて解説しました。

しかし、オブジェクト指向はとても奥が深く、他にも様々な概念などが存在します。それらについて知識を増やすためには、以下のリンクが参考になるのでぜひご覧ください。

オブジェクト指向「継承」とは?わかりやすく解説してみた
更新日 : 2016年8月10日
脱初心者のためのオブジェクト指向再入門
更新日 : 2019年8月15日

まとめ

今回はJavaScriptにおける「オブジェクト指向」について解説しました。

JavaScriptも数あるオブジェクト指向言語の仲間なので、オブジェクト指向の考え方や概念をしっかりと把握している必要があります。

みなさんもこの記事を通して、オブジェクト指向についての知識をどんどん深めていってくださいね。

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

Kotono

Kotono

イタリア在住15年目の22歳です。イタリアの大学で情報科学&応用数学を学んでいます。主にJavaScriptやPythonについての記事を書いたりしています。