IT~情報と技術

ドットインストール「詳解JavaScriptオブジェクト編」で勉強#05, #06(クラスとメソッドを使う)

ドットインストールというオンラインのプログラミング講座に「詳解JavaScript」というのがあります。

これでJavaScriptの基礎を勉強していきましょう。「基礎文法編」の次は「オブジェクト編」です。

今日のメイントピックは、クラスを作ってメソッドを使ってみる、です。

詳解JavaScript

ドットインストールのレッスン一覧に「②もっと詳しくJavaScriptを学ぼう」というセクションがあります。

ここに3つ並んでいる

  • 詳解JavaScript 基礎文法編(全24回)
  • 詳解JavaScript オブジェクト編(全23回)
  • 詳解JavaScript DOM編(全15回)

で勉強していきたいと思います。

これまでの勉強した内容はこちらです。

オブジェクト編 #05, #06

詳解JavaScript 基礎文法編 #05 クラスを作ってみよう ←講座はこちら(#05)

詳解JavaScript 基礎文法編 #06 メソッドを使ってみよう ←講座はこちら(#06)

今日は、クラスを作ってメソッドを使ってみる、です。

クラスとインスタンスって?!

クラス

クラスと言うのは「オブジェクトのテンプレートを定義」したものです。

MDNの初心者のためのオブジェクト指向 Java​Scriptを見てみましょう。ここにある、オブジェクトのテンプレートを定義するあたりが参考になります。

インスタンス

クラス(テンプレート)から実際に作ったオブジェクトのことを、インスタンスと言います。

同じくMDNの実際のオブジェクトの生成あたりが参考になります。

MDNにある、クラスから実際のオブジェクトを生成する説明。MDNにある、クラスから実際のオブジェクトを生成する説明。 Personというクラス(テンプレート)を使って、実際のPerson1(Bobさん)とPerson2(Dianaさん)を作っています。
  • インスタンス 英語の”instance”は「実例」
  • インスタンス化 英語の”instantiation“は「具体例をあげること」

講座の内容を表にするとこんな感じでしょうか。

クラス(テンプレート) インスタンス(taguchiのオブジェクト) インスタンス(fkojiのオブジェクト)
Player taguchi fkoji
this.name taguchi.name = ‘taguchi’ fkoji.name = ‘fkoji’
this.score taguchi.score = 32 fkoji.score = 44

メソッドって?!

まずはMDNのメソッドを見てみましょう。

メソッドはオブジェクトのプロパティである関数です。メソッドには2種類があります。オブジェクトインスタンスごとに内蔵されたタスクとして実行されるインスタンスメソッドと、オブジェクトのコンストラクターで直接呼び出しを行うタスクである静的メソッドです。(MDNのメソッドから)

つまり、オブジェクトの中にある関数のことです。

  • メソッド 英語のmethodは「方法、やり方」

ということで、オブジェクトに対して○○をやってくださいね、と「その方法ややり方」を指定している、と考えればいいような気がします。

先ほどの表に付け加えるとこんな感じでしょうか。

クラス(テンプレート) インスタンス(taguchiのオブジェクト) インスタンス(fkojiのオブジェクト)
Player taguchi fkoji
this.name taguchi.name = ‘taguchi’ fkoji.name = ‘fkoji’
this.score taguchi.score = 32 fkoji.score = 44
showInfo()
インスタンスメソッド
taguchi.showInfo() = name: taguchi score: 32 fkoji.showInfo() = name: fkoji score: 44
showVersion()
静的メソッド
Player.showVersion() = Player class ver. 1.0 Player.showVersion() = Player class ver. 1.0

なお、constructorもメソッドなのですが、特殊メソッドなのでこの表からは省略しました。

constructor メソッドは、class で作成されたオブジェクトの生成と初期化のための特殊なメソッドです。(MDNのconstructorから)

今日のまとめ

クラス、インスタンス、オブジェクト、メソッド・・・・。急に難しくなりますが、やりながら慣れていくしかないですね。

「詳解JavaScript」プレミアムレッスンになって、できるだけソースとか書かないようにしています。過去の記事も徐々に手を付けていますが・・・けっこうタイヘンだ。

超スローペースなプログラミング学習ですが、マイペースでぼちぼち続けています。

JavaScriptはちょっと難しいですが、がんばって一通りやってみましょう!