JavaScript【 オブジェクト 】 ～ すべてがオブジェクト

JavaScriptは、JavaやC++などと同様、オブジェクト指向のプログラミング言語です。
オブジェクトは、モノを意味する言葉です。
今回は、オブジェクト指向という概念については触れませんが、そのキーワードとなるオブジェクトについて紹介したいと思います。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. オブジェクトとは

JavaScript のオブジェクトとは、変数や関数に止まらず、数値や文字列などに至るまで様々なモノを指し、「すべてはオブジェクトである」とまで言われています。

次のような処理を考えてみて下さい。

document.fomr1.txt1.focus();

これは、form1 という名前のフォームの txt1 という名前のフォーム要素にフォーカスを当てる、という処理です。
document と form1 と txt1 と focus() がドット（.）で結ばれています。

focus() は、メソッド（JavaScript の定義済み関数）の１つですが、document と form1 と txt1 はオブジェクトです。

document は、JavaScript で予め定義されているオブジェクト名ですが、form1 と txt1 はユーザーがタグの name 属性で付けた名前です。

<form name="form1">
    <input type="text" name="txt1">
</form>

　
このように、オブジェクトには自由に名前を付けることが出来ます。

タグの name 属性で名前を付ける方法や id 属性で名前を付ける方法の他、変数にオブジェクトを代入して名前を付ける場合もあります。

let pText = document.form1.txt1;
pText.focus();

　
また、次の例を見て下さい。

let val1 = document.form1.txt1.value;

これは、form1 という名前のフォームの txt1 という名前のフォーム要素の値を 変数 val1 に代入する、という意味です。

この value は、JavaScript の定義済みプロパティの１つです。

メソッドやプロパティがオブジェクトから派生している、というのがイメージできたでしょうか。

メソッドは、ある処理を実行するための定義済み関数で、プロパティは、データの値が入る入れ物のようなものです。
メソッドは、最後に ( ) が付くので、区別しやすいと思います。
そして、ドット（.）をはさむ毎に、左から右へと派生していきます。

alert() メソッドや status プロパティのように、単独で使われる事が多いメソッドやプロパティも、実際は、その上にオブジェクトがあって、そのオブジェクト名が省略されています。
（window オブジェクトが省略されることが多いです。）

また、document.form1.txt1.value のように、オブジェクトが他のオブジェクトの下にある（派生関係にある）こともわかります。
まず文書（document）があって、その中にフォームがあり、更にその中にフォーム要素があり、フォーム要素が更にメソッドやプロパティを持っている、という派生関係になっています。

このように、JavaScript では、大元のオブジェクトから従属的なオブジェクトが派生し、 そこから別のオブジェクトが派生し、それがメソッドやプロパティを持つ、という階層構造を持っています。
といっても、最下位のオブジェクトだけがメソッドやプロパティを持っているわけではなく、大元のオブジェクトも含めて、各階層のオブジェクトが、それぞれにメソッドやプロパティを持っています。

オブジェクトが人、メソッドやプロパティが所有物、とイメージするとわかりやすいです。
この場合、オブジェクトの派生関係は親子関係に置き換えてイメージします。
親の下に子、子の下に孫．．．と、下に行くほど数が多くなり、それぞれの人が所有物を持っている、というイメージです。

▲目次へ戻る

2. オブジェクトの使い方

JavaScript には沢山のオブジェクトがあり、各々メソッドやプロパティを持っていますが、オブジェクトによって、使用方法に違いがあります。

そして、関数と同じように、オブジェクトもユーザーが自由に作ることが出来ます。

オブジェクトは、次の手順で作成します。

function Hello() {
    // プロパティを定義
    this.str1 = "Hello ";
    this.str2 = "Everyone!";

    // メソッドを定義する
    this.func = function() {
        alert(this.str1 + this.str2);
    }
}

hello = new Hello();

<form>
    <input type="button" value="あいさつ" onClick="hello.func( )">
</form>

▲目次へ戻る

3. オブジェクトの定義を取得する方法

　
あるオブジェクトの定義内容を知りたい場合、次の方法で一覧表示させることが出来ます。

for ( i in オブジェクト名 ) document.write ( i + "= " + オブジェクト名[ i ] );

例えば、documentオブジェクトの定義内容を取得したい場合は、次のような記述をします。

for(i in document)document.write(i + "= " + document[ i ]);

オブジェクトの定義内容は、ブラウザやそのバージョンによって多少異なります。

▲目次へ戻る