jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2015.1.24

非プログラマが、今度こそクラスとインスタンスを理解する

Category:
Column

ウェブサイト制作のコーディングというものを僕がはじめたとき、最初に学習したのはhtmlとcssでした。JavaScriptに真剣に手をつけはじめたのもこのブログを始めた2年半前くらい、加えてJavaScript以外のプログラム言語をまったく知らなかったので、最初からプログラマだった人たちのよく口にする「クラス」や「インスタンス」というものをうまく理解できないまま、最近までやってきました。

それでもjQueryのようなライブラリやJavaScript自体の柔軟性に助けられこれまで実業務をこなすことができましたが、canvasアニメをやり始めてからそのやり方にも限界を感じていました。1つのオブジェクトを動かすだけならまだなんとかなりますが、不特定多数のオブジェクトをある一定規則で生み出し動かそうとすると、どのように書けば円滑にいくのかがわからなくなる。 行き詰まり、よい方法はないかと検索をかけていてまた目の前に立ちはだかってきたのが、「クラス」と「インスタンス」でした。

結論から言えば、感覚的に理解することもままならなかったそれらを、実際にcanvasアニメを書くことを通して、少なくとも最初の片鱗くらいには理解できたのではないかと思います。その感覚をつかむことができてから演出方法にも幅が出てきはじめ、ページのデザインへの活かし方も具体的に想像できるようになってきました。

同じような苦労を味わっている方も多いと思いますので、その一助となるべく自分なりに内容をまとめておこうと思います。

クラスとインスタンスという単語の意味を調べる。

まずそもそもの単語の意味をWikipediaから以下に引用します。

クラス(class)は、クラスベースのオブジェクト指向においてオブジェクトの設計図にあたるもの。抽象データ型の一つ。クラスから生成したオブジェクトのことをインスタンスという。

今でこそこの説明で内容を理解できますが、JavaScriptを学習してすぐの頃にはこれではチンプンカンプンでした。 オブジェクトって何回言うねん、という感じでしょうか。

「人間」を例にして、クラスとインスタンスを当てはめてみる。

kindleで販売している「オブジェクト指向と哲学」という書籍を最近読みました。この書籍はJavaScriptの解説書ではありませんでしたが、そこで書かれていたクラスとインスタンスの説明は非常にわかりやすいものでした。「鶏」と「本」に例えてこれらの概念を説明しています。それをそのまま引用するのもアレなので、自分なりに噛み砕いて書き残そうと思います。

「人間」をベースにした場合のクラスとインスタンス

「人間」をベースにすると、クラスとインスタンスはそれぞれどのように表現できるでしょうか。以下のようにまとめてみます。

クラス 戸籍で管理される「個人」というフォーマット
クラスに定義されたデータ 名前、性別、国籍、年齢、住所、顔、身長、体重など。
インスタンス 実際に存在している個々人。

これを実際にJavaScriptで書くと、以下のようになるでしょうか。

var Person = function(name, gender) {
  this.name = name;
  this.gender = gender;
  this.age = 0;
  this.birthday = new Date();
};

Person.prototype.takeOld = function() {
  this.age += 1;
};

var ykob = new Person('yoichi kobayashi', 'man');

ykob.takeOld();

このコードにより「yoichi kobayashi」という名前の個人(インスタンス)が人間というフォーマット(クラス)にもとづいて生成されたことになります。個々人が持つ名前や性別、年齢、誕生日などの属性は、クラスに定義された各データの値として設定されます。

プログラミング言語に限った考え方ではない。

この例を最初に読んで思い出したのは、htmlの文書構造を学習したときのことでした。 数年前に読んだ「セマンティックHTML/XHTML」という書籍の内容です。

htmlにはメタ情報が存在します。head内に書かれたtitleやdescriptionだけでなく、最近ではmicrodataなどの構造化データによってbody内の各要素も細かくメタ情報として管理することができます。メタ情報によってユーザーや検索エンジンのクローラはそのページの内容を詳細に解釈することができます。

この考え方はそのまま、上述したクラスとインスタンスにも通用します。まずフォーマットが存在し、それに沿って各属性の値を設定された個々のオブジェクトが存在するという関係性です。htmlのメタ情報については僕も感覚的に捉えることができていたので、それと関連付けることができたことで、クラスとインスタンスについての理解も急速に進んでいきました。

「オブジェクト指向と哲学」で書かれていたことによれば、哲学には「存在論」という思想があり、オブジェクト指向もそれに準じているということでした。個人的にはメタデータも同様と考えています。プログラム言語としての学習と捉えてしまうと習得が進まないことでも、実在するモノや、他の考え方と絡めて考えてみると理解が進むものと思います。

もしも僕と同じように、マークアップから学びプログラミングの習得に手こずっている人がいるとすれば、一度視点を広げてこのような考え方で再度チャレンジしてみてはいかがでしょうか。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.