【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で大丈夫?

画像:Shutterstock

ここまで、JavaScriptについてご紹介しましたが、

JavaScriptの学習大変だな。難しいな
覚えることが多すぎてよくわからない!

なかにはこのように感じた方もいらっしゃるのではないでしょうか。そのような不安を少しでも抱いたのならば、一度原点に立ち返って「本当にJavascriptを学ぶべきなのか」いまいちど考えてみましょう。

JavaScriptを学ぶ目的は明確ですか?

あなたがJavaScriptを明確にやりたいことが決まっているうえで学習しているなら何も問題はありません。このまま学習を続けていきましょう。

しかし、もしあなたの学習目的が、

JavaScriptは初心者向けって聞いたから。
応用力があって何にでも使えそうな言語だから。

といったような理由であるならば、いまいちどあなたがプログラミングを学ぶ目的から見直したほうがいいかもしれません。このような漠然とした目的で学習を続けると、分からないことにぶつかった時、モチベーションを維持できず挫折してしまう可能性が非常に高くなってしまいます。

特にプログラミングは挫折率が高く習得が難しいスキルと言われています。一節によると、プログラミングを独学で学習する人の90%以上が挫折してしまうという話もあるほどです。

もし、あなたが「作りたいものはあるけど、何が必要かわからないし特に学習プランも決めていない」といった状況であるならば、一度こちらの”プログラミング学習プラン診断アプリ”をご利用ください。

簡単な質問からあなたに必要なスキルや簡易的な学習プランを提示いたします。

挫折せず確実にJavaScriptを習得したいなら

あなたにJavaScriptを学習する目的が明確にあり、なおかつ独学での学習に不安を感じているならば、プログラミングスクールの受講をおすすめいたします。

いきなりプログラミングスクールはちょっと……。

と感じるかもしれません。プログラミングスクールはたしかに高額ではありますが、PHPやCakePHPを習得することが出来れば、簡単に元を取ることができます。

大手クラウドソーシング「クラウドワークス」の案件を見てみると、JavaScriptを使った案件は平均30〜50万円ほどが一般的です。つまりJavaScriptを習得して、1〜2件の案件をこなせば、元は取れるということですね。

でも本当にプログラミングを習得できるの?

たしかに、プログラミングスクールに通っても思うような結果を得られない方もなかにはいらっしゃいます。その多くがスクール選定の時点で間違っていることがほとんどです。

弊社侍エンジニア塾では、あなたの目的に合わせて現役エンジニア講師が、オーダーメイドでカリキュラムを作成いたします。そのため、固定のカリキュラムで起こりうる弊害などの一切を省き、必要なスキルだけを最短距離で習得することができます。

まずは一度、弊社の無料体験レッスンをご利用ください。専属コンサルタントがあなたのプログラミング学習に対する不安やキャリアの悩みなどさまざまな質問にお答えいたします。

無料体験レッスンを予約する

まとめ

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

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

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

Kotono

Kotono

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

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説