初心者のJavaScript オブジェクトとは？プロパティメソッドとは？ [ ARTEMIS ]

2008.02.06 改

なに？

初めてオブジェクト・プロパティ・メソッドという言葉を聞いて『なにこれ? 』と思う方も多いと思います。しかし、この３つは javascript基本構造その物を表していると言っても良いくらいに大切な物です。プログラムと言う物は『何かをどうにかする』と言う物だとすると、何かは操作する対象であり、どうにかするは操作方法です。
つまり、『操作方法と操作対象』を覚える事でプログラムが書ける事になります。この操作対象がオブジェクトにあたります。ですから極端な話、この理屈と構造が理解できてしまえばjavascriptの基本の半分を理解できた事になります。

違う言い方をすると、例えば『車』
車は全体を見れば車ですが、車は部品でできています。大きく分ければボディ、ボンネット、ライト、ドア、トランク、タイヤ・・・等々
さらにこれら各部のパーツは更に細かい部品に分かれます。タイヤ、ホイール、ドア、ドアミラー、ウィンドウガラス、ドアノブ・・・
さらに、これらはもっと細かいパーツに分かれます。
そしれ、各段階ごとにそれぞれの部品の役割、動きなどがあります。
この全てが部品からできてる、或いは全てを分解して部品に分けるような考え方がオブジェクト構造です。

簡単に説明

top

◆ページの構造(HTML構造)から考えてみましょう
【オブジェクト】
ページを単純に解釈すると、HTMLタグで定義された物が部品として並んでいます。主要部品である文字・画像・リンクアンカー・フォーム等で構成されています。これらの部品を操作できるようにしようとしてjavascriptが生まれたと考えて下さい。実際現在のDOM(DocumentObjectModel)時代になる前、 IE4が出るまでは操作可能だったのはフォーム、画像、アンカー、URLアドレスバーのロケーションくらいです。あとはプログラム言語が必ず持つ、計算や文字操作、日付などのコアだけでした。
NetscapeがやっとLayerと言う一時しのぎの方法を廃止してDOMを採用してからは、 HTML内にある全てのパーツを主要２ブラウザでオブジェクトとして操作できる時代に入りました。

もうわかりますか? つまりその操作できる様にした部品が、javascriptというプログラムで扱えるオブジェクトとして用意されている事になります。

【プロパティ】
さて、HTMLタグではタグにその内容や詳細としてアトリビュート(属性)をつけますね。 IMGタグなら src、width、height等、Aタグなら href、targetなどです。
このアトリビュートのうち利用する必要のある物をjavascriptではプロパティとして用意しています。
このプロパティには、読取りだけができるリードオンリーと書き換えができるリード＆ライトの物があります。読み取るだけと言うのはその情報を取出して何かに使う。書き換えができる場合はそのプロパティの値を変更する事ができます。 HTMLは一度読み込まれたら変更できない静的なものですが、javascriptでこの書き換えができる事によって一部のコンテンツが動的な物へと生まれ変わります。
また今のDOM的には、このプロパティを操作しようとして『操作対象』とした時点でこれもオブジェクトと呼べます。
【メソッド】
この時点でメソッドを説明するのはちょっと難しいのですが。オブジェクトにはその詳細情報であるプロパティの他に、何かしらの動作させるメソッドと言う物が用意されています。プログラムですので、色々な動作をさせるのが目的です。それぞれのオブジェクトに対して必要と思われる動作がメソッドとして用意されています。必要な決まった動作をする関数とも言えます。
わかりにくいと思うので簡単な例として

フォームオブジェクト.reset()

これはフォームをリセットする(リセットボタンを押したと同じ動作をさせる)と言う事を表しています。この様に、動作です。メソッドは ()をつけて表現されます。
()をつけないと、その名前がプロパティとして参照できます。徐々にわかると思いますので、このへんで。

◆用意されているオブジェクト(操作対象)は決まっています。またそのオブジェクトのプロパティやメソッドも決められています。また新たに加える事も可能です。加える事は置いておいて、基本として何が用意されているのかを知る事で何ができるのかが決まり、後はどう操作するのかだけを考えれば良いわけです。

もうちょっと詳しく

top

◆さて先ほどのオブジェクトの話ではオブジェクトとプロパティ・メソッドがどんな物であるかとその関係について話しました。今度はもう少し詳しく構造の説明も交えて考えてみましょう。先ほどの説明では htmlタグ＝オブジェクト、アトリビュート＝プロパティと説明しました。実はこれはドキュメントオブジェクトと言う物に限っての話です。構造イメージを見ながら説明します。

【コアオブジェクト】

基本的にプログラム中での処理の対象として使われるコアオブジェクト(組み込みオブジェクト)と言う物があります。

例えば、javascriptが受け取った文字列を1文字ずつ分解して取り出すと言う処理をするとします。

処理の流れ
１．文字列の長さを調べる。→ x の長さがある。
２．1個目からx個目まで 1つずつ取り出す。

この時に、プログラムが受け取った文字列は操作対象であり、文字列オブジェクトとなります。
この文字列オブジェクトにはその文字列の長さを知る為の length というプロパティが用意されています。また、この文字列オブジェクトから、特定の位置の文字を取り出すには substring()やcharAt() というメソッド等が用意されています。
左図のそれぞれに、必要なプロパティとメソッドが用意されています。

【ナビゲーターオブジェクト】

ナビゲーターオブジェクトと言う物があります、このナビゲーターはブラウザの事です。他のオブジェクトはjavascript本体と表示したページについてのオブジェクトになるわけですが、このナビゲーターオブジェクトは、ビジター側の情報を取り出してオブジェクトにしています。表示されているページに埋め込まれたjavascriptはこれを利用して処理を行うという形になります。
ナビゲーターオブジェクトはブラウザのコードネームやバージョンのプロパティを持っています。基本的にこの情報を利用して、ブラウザを判別する事ができるので、それぞれのブラウザにあった処理を分岐させる事ができます。全てのオブジェクトはwindowオブジェクトの下層になっている構造ですので window.navigator と言うのが正確な表記です(windowはある事が前提ですから省略が可能)。ナビゲーターの下層には、mimetype や plugin と言うオブジェクトがあります。

【ウィンドウオブジェクト】
ウィンドウとはページ(htmlファイル)が表示されているウィンドウの事です。このウィンドウがページやJavaScriptコアに対しての最上層のオブジェクトになります。ウィンドウの下層にはフレーム、ドキュメント、ロケーション、ヒストリーと言うオブジェクトがあります。
ドキュメントはHTMLファイルですね。ロケーションはそのウィンドウに表示しているファイルの urlと言う事になります。ヒストリーはブラウザの戻る進むボタンが有効な場合のその履歴です。フレームはframesetでフレーム定義した場合のフレームと言う事です。フレームを使う場合はそれぞれのフレームウィンドウが、そのウィンドウに表示されるページの javascriptにとって直属のウィンドウオブジェクトと言う事になります。

また、まだ出てきていませんが変数や関数をグローバルで定義すると、それはwindowオブジェクトのプロパティになります。つまりwindowこそがグローバル(全体の)オブジェクトであると言えます。

ドキュメントオブジェクトの下層にはそのページに含まれる画像や、アンカー、フォーム等のオブジェクトが位置しています。フォームはユーザー入力を受け付ける特殊なhtmlエレメントでこのフォームオブジェクトは下層にフォームエレメントそれぞれをオブジェクトとして持ちます。

これらのオブジェクトは、それぞれがプロパティとメソッドを持ちます。
このオブジェクト図は javascript 1.1レベルの古い物です。(今は1.5か1.6)
javascript1.2ではlayerオブジェクト(NN系)と言う物が documentの下層に位置して新たに追加されていますが、この時点でIEでは既にDOMを採用していますし、スタイルシート全体もオブジェクトとして操作できます。

【オブジェクト配列】
◆javascriptはwindowが表示された時にwindow内にある全てのオブジェクトを配列(リスト)化してオブジェクト配列を生成します。これも1種のオブジェクト考えて下さい。例えば、imageオブジェクトオブジェクトですが、ページが読み込まれるとドキュメント内にある画像タグをhtml上で先に書かれている順番に配列(リスト)として images と言う集合させたオブジェクトが生成されるのです。この imagesを調べれば何個画像があるか、画像タグに名前(name=) がついていなくてもその画像を何番目の画像として特定する事ができるようになります。
複数存在する物以外は、このオブジェクト配列が生成されませんので document の配列 documents と言う物はありません。同じウィンドウ内に２つのファイルは表示できませんから。フレームを使うとそれぞれのフレームウィンドウに表示できますが、この場合は frames と言うフレームオブジェクトの配列が生成される事になります。
また、フォームも特殊な扱いで、フォームの部品に関してはそれぞれの名前で生成されず部品全部をひっくるめて elements オブジェクト配列と言う名前で生成されます。

今ではIDを使って全ての部品のIDを配列化する事もできています。が、こういったツリー構造のオブジェクトが基本にあると覚えて置いて下さい。

名刺の肩書き

top

◆なんとなく、オブジェクト、プロパティ、メソッドと言う物がわかったでしょうか? なんとなくでもいいんです。これが基本の構造ですから、これを知らないと javascriptが足算や引算するだけのものにになっちゃいますから。

オブジェクトは操作対象ですのでこれから色々と、操作をして行くわけですがオブジェクトの指定の方法を書いておきましょう。記述方法の追加でもあります。

◆オブジェクトに対して、そのプロパティとメソッドはそのオブジェクトに属している事になります。この場合、属すると言う言葉をドットに置換えて

オブジェクト.プロパティ

オブジェクト.メソッド

実例１：navigator.useragent
と、書きます。これは基本的な書き方です。

さて、先ほどの図解の通り、オブジェクトはそのオブジェクトが含まれる親のオブジェクトがある場合があり階層化されているオブジェクトもありますね? この場合は、基本では一番上の階層から書き始めます。

オブジェクト.オブジェクト.オブジェクト.プロパティ

オブジェクト.オブジェクト.オブジェクト.メソッド

実例２：window.history.length
実例３：window.history.back()
実例４：window.document.forms[0].reset()

この様に、□□会社○○部××課△△係の様な名刺の肩書きのように一番上から順番に書いて行くことで、どのオブジェクトについて操作しようとしているかを明確に特定する事ができるのです。
javascriptが書かれているページ内のオブジェクトを、そのスクリプトから指し示す時は、いわば、社内にいて社内の人間を指すのと同じです。ですから、□□会社 と言うのはわざわざ言う必要がありませんね? それと同じで、windowオブジェクトの下層を指し示す時は window を言う部分を省略できます。
実例２改：history.length
実例３改：history.back()
実例４改：document.forms[0].reset()

フレームを使っている場合等、自分のウィンドウ以外のウィンドウを指す時はそのウィンドウを指定する必要が当然ありますので top.フレーム名.document.・・・・・の様にどのフレームに表示しているウィンドウを指すのかを明確に指定しなければなりません。
◆固有名 v.s. 配列メンバー
さて、htmlタグには name="" の name属性があります。
htmlで覚えたでしょうがこれは固有名でその物を指す名前です。
javascriptでは、ここのオブジェクトとなるタグに name=""属性で名前がついている場合その名前をそのまま使ってオブジェクトを指し示す事ができます。

もう一つの方法として配列メンバーとして指定する事もできます。前の説明で オブジェクト配列と言う物に触れましたが同じオブジェクトのグループはオブジェクト配列として生成されています。この生成された配列のメンバーとして指定するわけです。

次のタグをこの両方を使って表現してみます。

それぞれのテキストボックス(textオブジェクト)を固有名で表現すると
document.regist.handle
document.regist.mail
document.regist.age
となります。それぞれのテキストボックスに入力された文字列の値は value プロパティとして読み書きできるので値を表現すると
document.regist.handle.value
document.regist.mail.value
document.regist.age.value
となります。
さてこれを、配列メンバーを使って表現してみます。
document.forms[0].elements[0]
document.forms[0].elements[1]
document.forms[0].elements[2]
valueプロパティまでを表現すると
document.forms[0].elements[0].value
document.forms[0].elements[1].value
document.forms[0].elements[2].value
となります。
registはこの html文書では１つ目のフォームと言う事になりますね？配列(リスト)メンバーはナンバリングが０から始まります、その為 forms と言う配列の0番目と言う意味になり、これは registと全く同じ物を指しています。次にhadle、mail、age のtextオブジェクトですが、本来なら texts[0]・・・となると思うかもしれませんがフォーム下層は前のオブジェクト配列でも述べているようにちょっと特殊でフォームオブジェクトの下層はオブジェクト配列として生成される時に一緒にまとめられて elements というオブジェクト配列として生成される決りがあります。上から順に [0]、[1]、[2]という並びでそれぞれが nameに対応しています。

さて、ついでにもう1つ、固有名と配列メンバーを組み合わせたような方法があります。前述の方法が配列をindexで指定する方法だったのに対して、これは連想配列と同じ方法で配列[名前]＝値として表現できる物です。
配列メンバーの説明ではでは、[0]、[1]、[2] と言う番号で指定していますが実は forms["固有名"] という指定の仕方があります。処理の状況によっては番号でなく、この固有名を使った配列メンバーの方が便利な場合があります。
例：document.forms["regist"].elements["handle"].value
数値の部分に文字列として nameで指定します。
古い余談
netscape3の場合、フォーム内で画像を使う場合で次の場合名前でのオブジェクト指定がうまく行きません。<form name="test"> の様にフォームに名前が付いている場合でこのフォーム内に画像タグがある場合、この画像に対しては名前だけの指定ができません。この場合は、配列メンバで指定します。images[0] や images["name"] の様に。これは、こうなる決りがあってこういう仕様なのか、バグの様な物なのかは知りません。とにかく、動かないのでそれなりの対処をしてください。nn4、ie4以上では問題なし。

この様に、必要に応じて使えるオブジェクト指定の方法があります。

IEでは4からNetscapeでは6から？ドキュメントオブジェクトモデル(DOM)を採用しています。
全てを最上層(windowは省ける)から、○○の△△の□□の××の・・・・なんて指定の仕方をしていては非常に効率が悪いです。
で、IDで直接アクセスできるようにしたのがdocument.getElementById()です。
これでIDを特定する事で直接その部品をオブジェクトとして指定できるようになっています。ベースはツリー構造である事を知っておくと、オブジェクト構造と言うものを理解するのにも役に立つので、もうname属性の時代ではないのですが一応、頭に入れて置いて下さい。

ちょっと使ってみましょうか

top

とりあえず説明をしてきましたが、実際にプログラムを書いて動かしてみましょう。まだここまでの説明ではわからない事も多いと思いますので、とりえあえずコピーで構いませんので、実際にhtmlファイルとスクリプトを記述して次のプログラムを動かしてみて下さい。

<html>
<head>
<script language="javascript">
function docopy(){
/*固有名で入力フォームを指定しています
ここで、a、b、c のテキストボックスの値を取り出します*/
var abox = document.regist.el1.value;
var bbox = document.regist.el2.value;
var cbox = document.regist.el3.value;

/* オブジェクト配列を使いメンバ番号(数値)と固有名で
コピー先のテキストボックスを指定しています
ここで、コピー先ボックスに値を書き込んでいます。
値が無い場合は「入力なし」を表示します */
if(abox != ''){ document.forms[1].elements[0].value = abox; }
else{ document.forms["copy"].elements["el1b"].value = "入力なし"; }

if(bbox != ''){ document.forms[1].elements[1].value = bbox; }
else{ document.forms["copy"].elements["el2b"].value = "入力なし"; }

if(cbox != ''){ document.forms[1].elements[2].value = cbox; }
else{ document.forms["copy"].elements["el3b"].value = "入力なし"; }
}
function resetall(){
/* 2つのフォームをリセットしています */
document.forms[0].reset();
document.copy.reset();
}
</script>
</head>
<body>

<form name="regist">
こちらのフォームに文字を入力してコピーボタンを押します。<br>
a <input type="text" name="el1"><br>
b <input type="text" name="el2"><br>
c <input type="text" name="el3"><br>
<input type="button" value="copy button" onclick="docopy()">
</form>
<br> <form name="copy">
こちらのフォームに同じ物がコピーされます。<br>
a" <input type="text" name="el1b"><br>
b" <input type="text" name="el2b"><br>
c" <input type="text" name="el3b"><br>
<input type="button" value="reset all" onclick="resetall()">
</form>

</body>
</html>

このサンプルソース中では、先に説明した3つの方法でフォームのテキストボックスを指定しています。今はまだプログラム全体を理解できないでしょうが、同じオブジェクトを指定する場合にこれらの方法があると言う事をどこかに覚えておいて下さい。

リファレンスを手に入れる

top

私のページでは全然全てを網羅できてていません。目的として、javascriptプログラムを理解して、使えるようになっていただければと思っています。

ある程度自分でプログラミングできるようになると、こういった基礎マニュアルよりも辞書としてのリファレンスが必ず必要になってきます。
どんなオブジェクトがあって、どんなプロパティとメソッドを持っているのか等ですね。それを見ながら、これを操作すればこんな事ができるのでは? と言う発想も湧いてきたりします。

日本語で書かれていて、簡潔にリスト化されているサイトとして
とほほのWWW入門
DHTMLまでは網羅されていませんが、一番重要なコアの部分が揃っています。

←前

次→

専用ページから申し込むと
So-netより高い３万円CB

案ずるより産むが易し
使ってみれば疑問も解決

XREA+ (plus) 206円/月
( お試し7日間 )

CORE SERVER 428円/月
( お試し15日間 )

ロリポップ 270円/月
( お試し期間10日間 )

ヘテムル 1620円/月
( お試し期間15日間 )

さくら 129円/月
( お試し期間2週間 )

無駄な高額ドメイン管理料金払ってませんか？

バリュードメイン
ムームードメイン

お客さんに振込手数料を払わせていませんか？イーバンク銀行同士なら振込手数料無料。オフィスで簡単振込みイーバンク銀行　ビジネス口座