こんにちは！最近健康のために朝一番に白湯を飲んでいるかみひこーきです。
さて、本題に入りたいと思います。「JavaScriptを学習しているけどプロトタイプについて理解ができない」「そもそもプロトタイプとは何かわからない」という人は多く、初学者はもちろん多言語を学習している人でもあまり馴染みがありません。ですが、プロトタイプはJavaScriptの基本的なしくみに関係しているため、避けては通れない道です。
そこで今回は、プログラミングにおける「プロトタイプ(prototype)」について解説します。記事を読めば、プロトタイプについて理解できて学習が楽しくなるはずです。
目次
プロトタイプとは？
一般的にプロトタイプとは、
・デモンストレーション目的
・新技術や新機構の検証試験
・量産前での問題点の洗い出しのために製造されたコンピュータプログラム
を指します。一言でいうとプロトタイプは「試作品」であるともいえます。
システム開発のひとつに、開発の早い段階でプロトタイプを作成する「プロトタイプモデル」という技法もあります。開発の早い段階でユーザーとの認識のズレを解決できる長所がある一方で、ユーザー側が納得するまで先に進めないという短所もあります。
JavaScriptにおけるプロトタイプ(prototype)とは？
ここからは JavaScript におけるプロトタイプ (prototype)について解説します。プロトタイプは、あるオブジェクトの機能を継承したり、同じクラスのオブジェクト間でプロパティの共有を可能にするなど、重要な役割を果たしています。
ここでいうプロトタイプは「クラス定義」のようなものです。これから作成されるオブジェクトに、どのようなメソッドを持たせるかを決めることができます。
言い方を変えれば「プロトタイプ」と呼ばれる最小テンプレートがあり、それをコピーして新しいオブジェクトを作るようなイメージです。また、プロトタイプはオブジェクト同士の繋がりを保持する機能もあるため「継承」も簡単に行えます。
プロトタイプのメリット
ここではJavaScriptでプロトタイプを活用するメリットを2つ紹介します。
コードの簡略化
prototypeを活用するメリットの１つめは、コードの簡略化です。 同じメソッドを複数のオブジェクトのプロパティとして何個も実装する必要があるとき、prototypeを活用しない場合はひたすら同じメソッドを定義しつづけなければなりません。そこで、prototypeを使うとコードが簡略化できます。
メモリの使用量を削減できる
２つめのメリットは、プログラム実行時の省メモリ化です。 同じメソッドを何個も実装するとプログラムはより多くのメモリを必要とします。一方でprototypeを活用して同じメソッドを定義すれば、それを参照して使いまわすことができます。 そのため、プログラムが使用するメモリの使用量を削減できるのです。
JavaScriptのプロトタイプ(prototype)をつかってみよう
ここからはJavaScriptでプロトタイプを活用する方法を解説します。まだ理解ができないという人は、もくじの「5. プロトタイプ(prototype)を学習する前に」を参考にしてみてくださいね。
オブジェクトのprototypeを確認する
プロトタイプの一般的な記述方法は【 オブジェクト名.prototype.メソッド名= function() { } 】となります。
まずは、内部プロパティ[prototype]に何が設定されているかを確認する方法を解説します。 JavaScriptにおいて内部プロパティ[prototype]は隠されているため、通常のプロパティのように直接参照することはできません。その代わり、JavaScriptには内部プロパティを確認するためのメソッドとして「Object.getPrototypeOf()メソッド」が用意されています。
配列や空オブジェクトには最初から内部プロパティ[prototype]が設定されているため、Object.getPrototypeOf()メソッドを利用して、それらの初期設定されたprototypeを確認します。
オブジェクトのprototypeを書き換える
次に内部プロパティ[prototype]に設定されたオブジェクトを書き換える方法を解説します。 内部プロパティ[prototype]を確認するために使用したObject.getPrototypeOf()と同様に、内部プロパティ[prototype]を書き換えるためのメソッドもオブジェクト(Object)が保有しています。
内部プロパティ[prototype]は、【Object.setPrototypeOf()メソッド】で書き換えることが可能です。 Object.setPrototypeOf()メソッドの引数には、以下を設定します。
第一引数：内部プロパティ[prototype]に設定するオブジェクト
第二引数：内部プロパティ[prototype]を書き換える対象のオブジェクト
このように引数を指定し実行することで、第一引数に指定したオブジェクトが、第二引数のオブジェクトの内部プロパティ[prototype]に設定されます。
prototypeで継承を実現する
継承は多くのオブジェクト指向言語でクラスのオブジェクトが作成されるとき、親として指定したクラスのメソッドを引き継ぎます。ここでいうクラスとはJavaScriptにおけるオブジェクトの型枠のようなものです。
作成されてから引き継ぐ対象を指定するのではなく、作成される前に自身が引き継ぐオブジェクトを定義することが継承のポイントです。 そのため、新しくオブジェクトを作成するたびに継承するオブジェクトを指定する手間がなくなり、コードをより簡略化できます。
プロトタイプを学習する前に…
ここまでプロトタイプについて解説しましたが、あまり理解ができなかった人は学習を進める前に基礎学習を固めてみましょう。JavaScriptはブラウザで動作が可能となっているため、学習を始める上でのハードルは比較的低いといえます。
Udemy(ユーデミー)やProgate(プロゲート)、ドットインストールといった学習サイトを活用し、必要であれば書籍を購入して学習を進めていきましょう。
JavaScriptのフレームワークにはHTMLやCSSに変換されたコードが最後に表示されるものが存在するため、あらかじめ理解しておく必要があります。そのため、HTML/CSSの知識がないのであれば、JavaScriptよりも先に学習を進める必要があります。
それでも理解できない場合は…
学習の教材は動画サービスや書籍などありますが、独学では学習がなかなか進まない人も多いはず。勉強の仕方や分からない点などすべて自分で調べないといけないため、独学だと挫折しやすいのも無理はありません。
また、JavaScriptは学習を始める上でのハードルは比較的低いとお伝えしましたが、思い通りに活用できるようになるには相応の勉強量が必要となるので独学はおすすめしません。
そこでプログラミングスクールに通うと学習方法がわかり、独学よりも効率的にスキルが身につきます。また、最近ではスクールに通わなくてもすべてオンラインで学習できるサービスや就職サポートもあるスクールもあるため、目的にあったスクールが選べます。独学で学習につまずいているならスクールを検討してみましょう。
まとめ
いかがでしたか？
今回はプロトタイプの意味やつかいかたをご紹介しました。JavaScriptでは、なんでもできると言われているように汎用性の高い言語のため、学習難易度も高くなっています。思い通りに活用できるには学習量が必要となるので、一度ですべて理解しようとせずコツコツ学習を進めていきましょう。
ご一読いただき、ありがとうございました。この記事が今後の学習に役立つと幸いです。
