【JavaScript】プロトタイプ(prototype)関連の記述方法まとめ(メモ)

読了: 約 5 分

JavaScriptである程度規模のあるアプリケーションを作成する際に必須と言っても良いprototype。
ひとまずは動くアプリケーションが作れるようになったけど、綺麗にまとめるために必要になってきたので
どういう仕組みなのか、独特なのでメモしておきたいと思います。

概要

1 目的
2 目次
3 何はともあれ参考サイト
4 具体的な使用例
- 4.1 外から見えるメソッドを定義
- 4.2 あらかじめメソッドを名を定義
5 まとめ
6 参考書籍

目的

基本的に目的は、人に見せるようにするためと汎用性を高めるためです。

動くアプリケーションを作成して次のステップにいくため
綺麗なソースを書き、汎用性を高めるため
人に見せられるソースを書くため（重要） (´・ω・｀)

アプリケーションを創っていて、こういう機能も欲しい・少しこう変えたいというときに汎用的でなければ変えられませんよね。
最近のアプリケーションの開発手法が、ウォーターホールではなく、アジャイル開発になっていて、そうしないと間に合わなくなっていますよね。
前職の制作会社でもデザインとマークアップに携わり、ディレクターとしても働いておりましたが、
自社メディア開発だけでなく受託制作もそういう流れになっている事が多いんじゃないかと思います。
(新規メディアを作りたいというクライアントの場合は特に)
まぁ、それを見込んだ価格設定とスケジューリングをすれば問題ないとは思いますが、WEBのメディアやコンテンツ制作の流れ
それがないとヒットしない・しにくいという側面を考えれば仕方がないことだと思います。

少し前フリが長くなってしまいました。。

何はともあれ参考サイト

図示してくれているサイト等既に沢山あります。
先人の知恵をお借りしましょう。

ダウンロードサンプル付き

プロトタイプ（prototype）によるJavaScriptのオブジェクト指向

初心者に嬉しい

古い記事で、丁寧に説明してくれています。
2007-04-13 Javascript初心者からみたprototype
上記の記事の図示バージョン。
2007-04-19 続・Javascript初心者によりprototype

サンプルを基にprototypeを解説してくれている記事
私は如何にしてJavascriptのprototypeを身につけたか。

prototypeとはという最初から親切に解説してくれる記事
ざっくりprototypeは機能拡張したいときに必要で、かつ同じものを作成しないために必要だと
分かる記事
Javascript/prototypeプロパティ

JavaScriptのプロトタイプとnewとは何かが分かる記事

これでできる！クロスブラウザJavaScript入門
第14回　プロトタイプと継承

上記記事の実践的内容。
これでできる！クロスブラウザJavaScript入門
第24回　JavaScriptによるUIの実装：カレンダー

具体的な使用例

上で挙げた
これでできる！クロスブラウザJavaScript入門
第24回　JavaScriptによるUIの実装：カレンダー
の記事を参考に作成したもの。
記事中ではクリックした日付をフォームに反映するというものをやっていますねー。
SNSかポータルサイトに使えそうですね！
なんとなくの解説。

外から見えるメソッドを定義

ただ、拡張がしにくいですかね。
そもそも今回の様な機能の場合もう一つクラス生成して、なんて事はないと思いますが。

function JCalendar(parent){
  if (typeof parent === 'string') {
    parent = document.getElementById(parent);
  }
  this.parent = parent;
}
window.JCalendar = JCalendar;

typeof演算子
ここでparentは、何かをまず評価して、文字列になるようにしていている？
idを取得して、ここではj-calendar2を取得。
それをparentに格納。

this.parent = parent;
で、j-calendar2をJCalendarのparentとして設定。

※ただし、下記に注意！
consoleでparentを調べていた時に不安定だったので、少し調べてみたら、
元ライブドアの取締役であり、エンジニアの小飼弾さんのブログにしたのような記事が…
javascript – typeof()を再発明するの記事の中で
JavaScriptのtypeofは役立たず
”よく知られているように、JavaScriptのtypeofは使えない子です。JavaScript: The Good Partsでも「ひどいパーツ」と名指しです。”

解決策としては一度、Object.prototype.toString.call()を噛ませるようです。

Object.prototype.toString.call() は Array や HTMLDocument オブジェクトも判定可能

例：

var abc = "abc";
var string = Object.prototype.toString.call(abc);
console.log(string); //[object String]

var def = ["テスト","テスト2","テスト3"]
var array = Object.prototype.toString.call(def);
console.log(array); //[object Array]

更に参考記事：
Javascript オブジェクト判定あれこれ
 JavaScriptで型判定いろいろ
 JavaScriptでチーム開発

あらかじめメソッドを名を定義

こうする事でメソッド追加していけるので楽ですね。

JCalendar.prototype = {
  create: create,
  update: update,
  remove: remove,
  set_caption: set_caption,
  set_body: set_body,
  set_date: set_date,
  onclick_date: onclick_date,
  onclick_month: onclick_month
};

続いて、上で定義したメソッドの中身

function onclick_date(id, year, month, date){
  return false;
}
function onclick_month(id, year, month){
  this.update(+year, +month);
  return false;
}
function remove(){
  this.parent.removeChild(this.table);
}
function update(year, month){
  this.remove();
  this.create(year, month);
}

まとめ

ざっくりと紐解いて見ましたが、ソースを見る中でもっとこうした方が良いとかどんどん出てきますね…。
今回のようなケースはprototypeの記事を見ていてもあまり使わないような記述だと思いますので
違ったケースも取り上げて見たいと思います。

サービスの開発者としても尊敬しているゆーすけべーさんの
音楽サービスの『君のラジオ』を紐解いていこうと思います。
ソースコード：
kimi.js

UIの部分と音楽の操作の部分を分けてprototypeを書いていて、その中でメソッドを書いていて
初心者にも見易い、嬉しいコードですね。

KimiPlayer.prototype = {
   xxx:function(){
    //処理
   }
}
KimiUIManager.prototype = {
   xxx:function(){
    //処理
   }
}

参考書籍

リファレンスを1冊買っておけば楽ですね！

目的

目次