型、オブジェクト、クラス

マンガで分かる JavaScriptプログラミング講座

マンガで分かる JavaScriptプログラミング講座 第2版



第1部 JavaScriptプログラミングの基本
第12話:型、オブジェクト、クラス

目次



マンガ






















マンガ台詞

【1Page】
先生:さて この数週間
    プログラムの 基本について 説明していた
    今回がその仕上げとなる
    今日の説明が 終われば プログラム脳が 出来上がるぞ
麗:プログラム脳って なんだか嫌だわ
遊:私たち 洗脳されて いたの!
守:僕もちょっと 嫌かも
先生:えー 不評だな……
【2Page】
先生:さて これまでに 『数値変数』と 『文字列変数』が あると説明した
    この変数の違いは『型』と言い 『typeof』関数で 調べられる
        var no = 0;    // 『数値変数』を初期化
        var str = "文字列";    // 『文字列変数』を初期化
        // 『typeof』関数で、変数の『型』を調べる
        alert(typeof(no));    // 『number』(数)と表示
        alert(typeof(str));    // 『string』(文字)と表示
    実は この2つ以外にも 変数の『型』は存在する
遊:おのれ 騙したな!
先生:騙して いないよ
先生:まず1つめは 真偽の値を表す変数
    これは『boolean』 という型で 『真』か『偽』が 格納される
        // 真偽の判定結果で変数を初期化
        var bool = (1 > 0);
        alert(typeof(bool));
        // 『boolean』(真偽)と表示

        // 真を表す『true』で変数を初期化
        var bool = true;
        alert(typeof(bool));
        // 『boolean』(真偽)と表示
【3Page】
先生:2つめは 『オブジェクト』型の変数
    3つめは 『function』型の変数だ
遊:『function』型?
先生:『function』型は ちょっと置いておいて 『オブジェクト』型を説明する
    実はJavaScriptでは この『オブジェクト』型が 非常に重要なんだ
遊:オブジェクト?
麗:英語で『物』って 意味ですよね
先生:そうだ
遊:(麗に)この優等生が!
【4Page】
先生:え〜〜
    『オブジェクト』型変数は
    物というよりは 変数や関数が入った 箱だと思った方がよい
        オブジェクト
            変数
            :
            関数
            :
    これらの変数や関数は 『オブジェクト.変数名』
    『オブジェクト.関数名()』 と書いて利用できる
        object.variable;
        object.function();
遊:あれ?
    その書き方 どこかで見た 覚えがある
先生:こうだろう?
        document.title;
        document.write("");
遊:そう それ!
【5Page】
先生:実はこれまで 利用してきたけど
    ちょっと難しいので 説明してなかったんだ
遊:ぶー 騙された〜
先生:こういった 『オブジェクト』内にある
    『変数』を『プロパティ』と呼んだり
    『関数』を『メソッド』と呼んだりする
    『document』は
    Webページに最初から 用意されている
    『オブジェクト』の ひとつなんだ
    あと 配列も 『オブジェクト』の 一種だ
遊:えっ? 配列が?
【6Page】
先生:そう
    試しに連想配列を 『オブジェクト』として 扱ってみよう
        var tensuuArray = {
            "足立" : 65,
            "安藤" : 78,
            "木村" : 43
        };
        alert(tensuuArray.足立);
    『65』と表示
遊:あっ 点数が 表示された!
先生:JavaScriptでは 『連想配列』は 『オブジェクト』の 書き方の1つなんだ
    この2つの対応表を 示しておくぞ
                 連想配列   オブジェクト
        変数の参照方法  obj["prop"] obj.prop
        変数の呼び方   要素     プロパティ
        prop部分の呼び名 キー     プロパティ名
        値の呼び方    要素の値   プロパティの値
        『obj["prop"]』も『obj.prop』も同じ値を参照
【7Page】
守:『連想配列』は 分かりましたが 普通の配列はどうなんですか?
先生:このコードを 試してみると分かる
        var nameArray = ["足立", "安藤", "木村"];
        var str = "";
        for (var key in nameArray) {
            str += "キーが " + key
                + " : 値が " + nameArray[key]
                + "\n";    // 『\n』は改行記号
        }
        alert(str);
    『キーが 0 : 値が 足立
    キーが 1 : 値が 安藤
    キーが 2 : 値が 木村』と表示
    数字が『プロパティ』名の 『オブジェクト』な わけだ
    同じ方法で 『document』の中身を 調べることもできる
        var str = "";
        for (var key in document) {
            str += "キーが " + key
                + " : 型が " + typeof(document[key])
                + " : 値が " + document[key]
                + "<br>";    // 改行タグ
        }
        document.write(str);
    『キーが namespaces : 型が object : 値が [object]
    キーが parentNode : 型が object : 値が null
    キーが nodeType : 型が number : 値が 9
    キーが onbeforeeditfocus : 型が object : 値が null
    キーが bgColor : 型が string : 値が #ffffff
    キーが oncontextmenu : 型が object : 値が null
    キーが onrowexit : 型が object : 値が null
    キーが embeds : 型が object : 値が [object]
    キーが scripts : 型が object : 値が [object]
    キーが onactivate : 型が object : 値が null
    :』と表示
【8Page】
3人:おおっ!
先生:すごいだろ
    また JavaScriptでは 文字列なども 『オブジェクト』の 一種なんだ
        注:『typeof』では 文字列は『string』
        関数は『function』と表示される
麗:そういえば 文字列変数には 長さを表す『.length』や いろいろな関数が ありましたね
先生:そうだ    
    同じように 関数も変数 として扱える
    これが 後回しにした 『function』型だ
        // 関数を作成
        var func = function () {
            alert("関数を変数にしたよ!");
        };

        // 関数を実行
        func();

        // 配列に関数を入れて実行
        var aArray = new Array(1);
        aArray[0] = func;
        aArray[0]();

        // 『連想配列』に関数を入れて
        // プロパティとして実行
        aArray["rensou"] = func;
        aArray.rensou();
    3つとも きちんとダイアログが表示される
【9Page】
遊:よく分からないけど すごいのは分かったわ
守:あの 先生 『function』のあとに 名前がないんですが?
        var func = function () {
先生:よく気付いたな こういった名前のない 関数のことを 『無名関数』と言う
    これまで説明した 『オブジェクト』の 仕組みを利用すれば
    値と関数をまとめた 『クラス』と呼ばれる ものを作れる
        // 生徒クラスを作成
        var Seito = function(namae, tensuu) {
            this.namae  = namae || "???";
            this.tensuu = tensuu || 0;
            this.show = function() {
                window.alert("名前 : " + this.namae
                    + " / 点数 : " + this.tensuu);
            };
        };

        // 生徒クラスを使って『生徒 遊』変数を作成
        var sYuu = new Seito("遊", 3);
        alert(sYuu.namae + " " + sYuu.tensuu);
        sYuu.show();

        // 生徒クラスを使って『生徒 不明』変数を作成
        var sHumei = new Seito();
        sHumei.show();
    『遊 3
    名前 : 遊 / 点数 : 3
    名前 : ??? / 点数 : 0』と表示
【10Page】
先生:どうだ すごいだろう!
3人:ぽかーん
遊:うう〜っ 難しすぎて 頭がパンクする
先生:あー すまなかった お前たちには 早すぎた
    お詫びに ジュースを 買ってやろう
遊:チューチュー
    ぱー
麗:庶民ね 簡単に買収されて
先生:今回は かなり高度な 話だったな
    反省して 次回は簡単な 話にしよう



説明

この章では、『型』『オブジェクト』『クラス』について学びます。この3つは、JavaScriptというプログラム言語の根幹に関わる部分です。内容的には少し難しいですが、ここまで全て分かればJavaScriptについて、非常に深く理解したことになります。そして、JavaScriptの基本はマスターしたことになります。

それでは、『型』『オブジェクト』『クラス』について、順に説明していきます。



『型』

『typeof』関数

これまで変数には『数値変数』と『文字列変数』があると説明してきました。実は、JavaScriptには、この2つ以外にも変数の種類が存在します。この変数の種類のことを『型』と言います。

変数の『型』は、『typeof』関数を使って調べることができます。

var no = 0;    // 『数値変数』を初期化
var str = "文字列";    // 『文字列変数』を初期化

// 『typeof』関数で、変数の『型』を調べる
alert(typeof(no));    // 『number』(数)と表示
alert(typeof(str));    // 『string』(文字)と表示

『boolean』型の変数

『boolean』型は、『真偽』を格納する変数です。これまで『if』などで利用していた『真偽の判定結果』を、『変数』として利用できます。また、『true』(真)『false』(偽)という値で初期化することで、『真の値』『偽の値』を持った変数を作ることもできます。

var bool = (1 > 0);    // 真偽の判定結果で変数を初期化
alert(typeof(bool));    // 『boolean』(真偽)と表示
var bool = true;    // 真を表す『true』で変数を初期化
alert(typeof(bool));    // 『boolean』(真偽)と表示

『オブジェクト』型、『function』型の変数

変数の型には『オブジェクト』型、『function』型というものも存在します。この『オブジェクト』型は、JavaScriptでは特に重要です。

以下、『オブジェクト』型の変数は『オブジェクト』の項で、『function』型の変数は『クラス』の項で詳しく解説していきます。



『オブジェクト』

『オブジェクト』型の変数は、内部に変数や関数を保持している変数です。『オブジェクト』型変数内の変数や関数は、『オブジェクト.変数名』『オブジェクト.関数名()』として利用することができます。

object.variable;    // 『オブジェクト』型変数内の変数を利用
object.function();    // 『オブジェクト』型変数内の関数を利用

下記の『document』は、Webページ内でJavaScripを利用する際に、最初から用意されているオブジェクトになります。他にも、『window』などのオブジェクトが、用意されています。これらの使い方は、先の章で紹介します。

document.title;    // 『document』オブジェクトの『title』変数
document.write("");    // 『document』オブジェクトの『write』関数

『連想配列』と『オブジェクト』

『連想配列』と『オブジェクト』は同じものです。『連想配列』として作成した変数は、『オブジェクト』として扱うことができます。また、『オブジェクト』として作成した変数も『連想配列』として扱えます。

var tensuuArray = {
    "足立" : 65,
    "安藤" : 78,
    "木村" : 43
};
alert(tensuuArray.足立);    // 『65』と表示

本来は『tensuuArray["足立"]』と書くべきところを『tensuuArray.足立』と書いています。書き方を変えても、正しく値を参照できます。

また、『オブジェクト』を『連想配列』として、『for in』文で処理すれば、キーと値を表示させることができます。以下の例では、『document』オブジェクトを『連想配列』として扱い、キー、型、値を調べて表示させています。

var str = "";
for (var key in document) {
    str += "キーが " + key
        + " : 型が " + typeof(document[key])
        + " : 値が " + document[key]
        + "<br>";    // 改行タグ
}
document.write(str);

以下、『連想配列』と『オブジェクト』の対応表を示します。

連想配列オブジェクト
変数の参照方法obj["prop"]obj.prop
変数の呼び方要素プロパティ
prop部分の呼び名キープロパティ名
値の呼び方要素の値プロパティの値

上記の表では、『obj["prop"]』も『obj.prop』も同じ値を参照することができます。

『メソッド』

プロパティの中でも、関数は特別に『メソッド』と呼びます。今後、説明に多く出てきますので、覚えておいてください。



『クラス』

『function』型の変数

変数の『型』には『function』型と呼ばれるものがあります。これは、『関数』を変数として格納したものです。JavaScriptでは、『関数』も数値や文字列と同じように、変数に入れて利用することができます。

以下、『関数』を変数に入れて利用する例を示します。

// 関数を作成
var func = function () {
    alert("関数を変数にしたよ!");
};

// 関数を実行
func();    // 変数の後に『()』を付けて実行
// 配列に関数を入れて実行
var aArray = new Array(1);
aArray[0] = func;
aArray[0]();    // 配列の後に『()』を付けて実行
// 『連想配列』に関数を入れて
// プロパティとして実行
aArray["rensou"] = func;
aArray.rensou();    // プロパティの後に『()』を付けて実行

3種類示しましたが、いずれもきちんとダイアログが表示されます。

『無名関数』

『function () {〜}』のように、『function』の後に名前がない関数のことを『無名関数』と呼びます。

JavaScriptでは、ある程度以上に高度なプログラムを書き始めると、この『無名関数』を多用するようになります。そのため、こういった「名前のない関数」があるということを覚えておいてください。

この『無名関数』については、先の章で詳しく説明します。

『クラス』

それでは次に、『function』型の変数を利用して、『クラス』と呼ばれるものを作ります。『クラス』は、『共通の変数や関数を格納した変数』を作るための仕組みです。

たとえば『生徒』についての情報を扱いたいとします。『生徒』には『名前』や『テストの点数』といった情報を格納したいとします。また、『生徒』の情報をいつでも簡単に呼び出せる方法も用意しておきたいとします。

こういった共通した機能を持たせるために、以下のような構造の変数を作ります。

 『生徒』変数
   ・『名前』変数
   ・『テストの点数』変数
   ・『情報を表示する』関数

こういった変数を『オブジェクト』型変数を使って作ると、以下のようになります。

var Seito = new Array();
Seito.namae = "遊";
Seito.tensuu = 3;
Seito.show = function() {
    window.alert("名前 : " + this.namae + " / 点数 : " + this.tensuu);
};

これで1人分の変数を作ることができました。しかし、このやり方で30人分の変数を作ろうとすると大変です。この変数は、『名前』変数も『テストの点数』変数も『情報を表示する』関数も共通しているので、一度だけ宣言して再利用したいところです。

そういった場合には『function』型変数を使って、『クラス』と呼ばれるものを作ります。以下、『生徒』クラスのサンプルです。

// 生徒クラスを作成
var Seito = function(namae, tensuu) {
    this.namae  = namae || "???";
    this.tensuu = tensuu || 0;
    this.show = function() {
        window.alert("名前 : " + this.namae
            + " / 点数 : " + this.tensuu);
    };
};

『this』という文字の意味は、この章の後半で詳しく説明します。ここでは『クラス』自体を現すオブジェクトだと思っていてください。

上記は、『Seito』という『function』型の変数を作るプログラムです。この『Seito』変数内には、あらかじめ『this.namae』『this.tensuu』『this.show』といった変数や関数が用意されています。そして、関数の『引数』として『namae』『tensuu』が設定されています。

次に、この『Seito』関数を利用して、『生徒 遊』変数を作成します。

// 生徒クラスを使って『生徒 遊』変数を作成
var sYuu = new Seito("遊", 3);
alert(sYuu.namae + " " + sYuu.tensuu);
sYuu.show();

『var sYuu = new Seito("遊", 3);』という部分が最も重要な部分です。『new Seito()』とすることで、新しい『Seito』を作成して、『sYuu』変数に格納しています。

この際に、引数として『遊』『3』という値を設定しています。『Seito』クラスでは、引数を元にして、内部の『this.namae』『this.tensuu』の値を書き換えます。その結果『sYuu.namae』(『sYuu』内の『this.namae』)が『遊』という値になり、『sYuu.tensuu』(『sYuu』内の『this.tensuu』)が『3』という値になった状態で、『sYuu』変数が作成されます。

新しくできた変数『sYuu』を利用した『alert(sYuu.namae + " " + sYuu.tensuu);』の行は、『遊 3』と表示されます。また、『sYuu.show();』の行は『名前 : 遊 / 点数 : 3』と表示されます。

『クラス』のこの仕組みを利用すれば、以下のように手軽に生徒の情報と命令を格納した変数を作れます。

var sMamoru = new Seito("守", 95);
var sRei = new Seito("麗", 92);

こういった仕組みは、プログラムを書き始めても、すぐには利用しないと思います。しかし、いずれ必要になり、そして重要な役目を果たすようになります。初めてJavaScriptを学ぶ人には少し早いかもしれませんが、覚えておけばいずれ役に立ちます。



『定数』

今回は『boolean』型が出てきました。この『真』『偽』を表す値として、『true』『false』という特別な変数を利用しました。『true』『false』は『定数』と呼ばれる、値を書き換えることができない特別な変数です。

以下、『true』『false』を使用してみます。

function check0(no) {
    if (no == 0) {
        return true;
    }
    return false;
}

var result = check0(0);
if (result) {
    alert("0だった!");
} else {
    alert("0以外だった!");
}

この2種類以外にも、JavaScriptには、いくつかの定数が存在します。よく使うものを、以下にまとめておきます。

表記意味説明
trueboolean型
falseboolean型
null値なし変数の中身が空であることを示す
undefined未定義オブジェクトの『存在しないプロパティ』などにアクセスした際に戻る値
NaN数値でない計算式に文字列が紛れ込んでいた際などに戻る値
Infinity無限計算結果が極端に大きな場合に戻る値



『オブジェクト指向』

JavaScript言語は、『オブジェクト指向』と呼ばれるプログラム言語です。

変数は『オブジェクト』と呼ばれる物として扱われ、その『オブジェクト』の値や関数(プロパティやメソッド)も、また『オブジェクト』になります。

これらのオブジェクトは『.』(ドット)で連結して、下の階層へとたどれます。

これまで出てきた『document』は、表記が省略されていますが『window.document』という、『window』オブジェクト内のオブジェクトです。そのため、『write()』という命令は、正式には『window.document.write()』となります。

こういった仕組みになっていることを頭の片隅に置いておくと、JavaScriptは理解しやすくなります。

すぐに分からなくても、プログラムを書いているうちに「あっ!」と気付くことがありますので、覚えておくとよいです。



『this』

『this』とは?

クラスを作る際に、『this』という、これまで説明していない謎の変数が出てきました。

この『this』は、オブジェクト自身を表す特殊な変数です。

といっても『オブジェクト自身』なんて、何のことやらと思うでしょう。

少し難しい説明になるので、「まだ自分は初心者だ」と思う方は、以下は読み飛ばしてください。

JavaScriptは、オブジェクト指向の言語です。そして、全ての変数はオブジェクトとして、成り立っています。そして、このオブジェクトは、何らかのオブジェクトのプロパティやメソッドになっています。

 親オブジェクト
     ┣ 子オブジェクト
     ┃    ┣ 孫オブジェクト
     ┃    ┗ 孫オブジェクト
     ┗ 子オブジェクト
           ┗ 孫オブジェクト

この構造は、JavaScriptの文法的に、『.』(ドット)を使用して書くと、以下のようになります。

 親オブジェクト.子オブジェクト.孫オブジェクト

さてここで、『オブジェクト』の頭に『this.』と付けてみます。

 this.オブジェクト

何となく分かってきたのではないかと思います。『this』は、そのオブジェクトにとって、親っぽい何かのようです。

関数の外であれば、この『this』は、『window』を表しています。これまでよく利用してきた『alert()』関数は、正式には『window.alert()』です。この『alert()』関数を、『window』の代わりに『this』を頭に付けて実行してみます。

window.alert("");    // 正しく動作する
this.alert("");    // 『this』でも正しく動作する

『this.alert("")』は、正しく動作します。

関数内の『this』

次は関数内の『this』です。関数内であれば、『this』は、関数が呼び出された際に、その関数が格納されていたオブジェクトを表しています。

以下、先ほど書いたコードを元に説明します。

// 生徒クラスを作成
var Seito = function(namae, tensuu) {
    this.namae  = namae || "???";
    this.tensuu = tensuu || 0;
    this.show = function() {
        alert("名前 : " + this.namae
            + " / 点数 : " + this.tensuu);
    };
}

// 生徒クラスを使って『生徒 遊』変数を作成
var sYuu = new Seito("遊", 3);
sYuu.show();

『var sYuu = new Seito("遊", 3);』という行で、新しいオブジェクト『sYuu』を作成しています。

そして次の行の『sYuu.show();』で、『sYuu』オブジェクト内の『show』メソッドを呼び出しています。

『sYuu』の中身は、『new』で初期化された時に、以下のようになっています。

 sYuu
    .namae = "遊";
    .tensuu = 3;
    .show = function() {
            window.alert("名前 : " + this.namae + " / 点数 : " + this.tensuu);
        };

『sYuu.show』メソッドが呼び出され時の『this』は、『show』が格納されている『sYuu』というオブジェクトを指しています。

そのため『this.namae』は、『sYuu.namae』の値になり、『this.tensuu』は、『sYuu.tensuu』の値になります。

おまけ

参考までに、上記のプログラムは、以下のように書いても同じように動作します。

// 生徒クラスを使って『生徒 遊』変数を作成
var sYuu = new Seito("遊", 3);
sYuu.show();

// 生徒クラスを作成
function Seito (namae, tensuu) {
    this.namae  = namae || "???";
    this.tensuu = tensuu || 0;
    this.show = function() {
        window.alert("名前 : " + this.namae
            + " / 点数 : " + this.tensuu);
    };
}

関数を『new』で呼ぶと、その関数がオブジェクトとして作成されて、変数に代入されます。



サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード (右クリックから保存してください)

sample1.html』(数値、文字列型)を表示

sample2.html』(boolean型)を表示

sample3.html』(連想配列をオブジェクトとして扱う)を表示

sample4.html』(プロパティを連想配列として扱う)を表示

sample5.html』(配列の内部を探る)を表示

sample6.html』(『document』の内部を探る)を表示

sample7.html』(関数を変数として扱う)を表示

sample8.html』(生徒クラス)を表示

sample8b.html』(生徒クラス 書き方違い)を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

≫ 「マンガで分かる JavaScriptプログラミング講座」トップに戻る


『柳井政和』 の初心者向け講座

『柳井政和』 のサイト

マンガで分かる Java入門講座
Javaのオブジェクト指向を解説するサイトです。
Webページ100ページ以上、マンガ800ページ以上で
解説を行っています。


PuzzleAndGame.com
JavaScriptで作ったゲームが中心のサイト。
タワーディフェンス、リバーシ、パズルゲームなどを公開。
Webブラウザ、PCアプリ、Androidアプリとして動作。


クロクロ・ツールズ
全てJavaScriptで作られた、ブラウザから利用できる各種アプリケーションです。
HTML5に対応しているモダンブラウザから使えます。
ブックマークに入れるなどして、ご利用ください。


『柳井政和』 執筆の本

「顔貌売人 ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2017年8月7日、予約可能)。
プログラマーが探偵役のエンタメ・ミステリー第2弾。
最先端の情報犯罪に安藤と鹿敷堂が挑みます。


「裏切りのプログラム ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2016年8月27日発売、予約注文可能です)。
2016年の松本清張賞で、最終候補に残った小説です。
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美とともに、
IT業界で起きた事件の解決に挑みます。
プログラマーが探偵役のエンタメ・ミステリーです。


「マンガでわかるJavaScript」
本講座が書籍になりました。 本用に、より分かりやすく、読みやすく、再構成して書き直しました。
よければ、手にとっていただけると嬉しいです。
秀和システムより発売。


「プログラマのためのコードパズル〜JavaScriptで挑むコードゴルフとアルゴリズム」
コードゴルフやアルゴリズム問題、その解説、関連知識の紹介を行った本です。
プログラマーなら、楽しめる内容になっています。
技術評論社より発売。


「JavaScript 仕事の現場でサッと使える! デザイン教科書」
プログラミング初心者向けに、様々な利用例を元に、プログラムとJavaScriptを解説する本。
プログラム自体が初めての方にも、なるべく分かりやすいように書いています。
技術評論社より発売。


『柳井政和』 開発のWebアプリやソフトなど

PuzzleAndGame.com
全自動4コマ
全自動百科事典(オートペディア)
全自動似顔絵
新刊・新作カレンダー
EX リバーシ
全自動迷路
めもりーくりーなー
ラジオ・ブラウザ
PCソフト
マンガで分かる JavaScriptプログラミング講座
スクリーンセーバー「なう」
開発元:クロノス・クラウン




Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2017 Cronus Crown (c)1997-2017 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 - 弊社への連絡 -
までお願いします。