プログラミングとは…

JavaScriptもわからず、見よう見まねで、教えてもらいながら、キーボードを叩いているとできる気になっているなと、Vue.jsの学習記録をNoteにつけていて反省したので、買って積んだままになっていた参考書を進めることにしました。

そもそもの単語などが理解できていないので、こちらにまとめながら覚えていきたいと思います。

かかった時間：１時間

オブジェクトの概念とは

オブジェクト：動くもの （例）犬

プロパティ：ものの属性を表す量 （例）犬種、大きさ、名前、性別

メソッド：ものが行う動作 （例）走ったり、跳ねたり、吠えたり、噛み付いたり

JavaScriptのオブジェクト表記

オブジェクトを変数に代入→参照

var obj = { プロパティ名: 値 };　 // =>　 obj.プロパティ名

たくさんあるときは

var obj = { プロパティ名: 値, プロパティ名: 値, プロパティ名: 値 };

定義してコンソールに出力

var dog = {x:12, y:65}
console.log(dog.x);　// => 12が出力される

座標のオブジェクトにposという名前をつけたとすると、

var dog = {pos:{x:12, y:65}}
console.log(dog.pos.x);  // => 12が出力される

オブジェクトのメソッドの定義の仕方

var obj = { メソッド名: function( 引数 ){ 処理 } };

var obj = { 
    メソッド名: function( 引数 ){
        処理 
    } 
};

【ポイント】obj.プロパティ名でプロパティの値が参照できる様に、obj.メソッド名でメソッドを参照できる。

obj.メソッド名(引数);

関数をオブジェクトとして扱うときは、関数オブジェクトと言うこともあるが、関数には「実行せよ」と言う構文が必要なので、JavaScriptでは、参照ではなく実行だよ。と見分けるために、window.alert()やdocument.write()と「メソッド名()」で記述する。

var dog ={
    pos : {
        x: 12,
        y: 56
    },
    move: function(x,y) {
        this.pos.x += x;
        this.pos.y += y;
    }
}

console.log(dog.pos.x);  // => 10

dog.move(3, 5);

console.log(dog.pos.x);  // => 13

↑メソッド名はmove:function( 引数 ){ 処理 }で記述

　参照する際に、dog.move( 引数 )で記述

　そのため、moveメソッドが動き、

　this.pos.x += x;の計算式に乗っ取って、10＋3が算出された。

オブジェクト指向

あらかじめ、オブジェクトが持つプロパティやメソッドを定義した型を作っておいて、それを他でも使える様にすること。

クラス：オブジェクトの型となる定義

インスタンス：クラスを元に生成したオブジェクト

インスタンス化：インスタンスを生成する事

クラスを定義

var Movable = function(x, y) {
    this.pos = {
        x: x,
        y: y,
    };
    this.move = function(x, y) {
        this.pos.x += x;
        this.pos.y += y;
    };
}

thisはクラスを表すキーワード。

・this.posはMovaleクラスがpostと言う名前のプロパティを持つ事を表す。

・this.moveはfunction(x, y)があるので、Movaleクラスがmoveと言う名前のメソッドを持つ事を表す。

インスタンスを生成する

var Movable = function(x, y) {
    this.pos = {
        x: x,
        y: y,
    };
    this.move = function(x, y) {
        this.pos.x += x;
        this.pos.y += y;
    };
}
// インスタンスを生成する
var dog = new Movale(10,40);  // => 最初の座標値を設定
dog.move(3, 5);
console.log(dog.pos.x); // =>13

クラス名と同じ名前の関数にnewをつけることで、インスタンス化をする。

このインスタンスはこれ以降に使うものなので、var：変数に代入する↓

var obj = new クラス名(引数);

感想：JavaScriptの内容だが、どう言う関係になっているのかがよくわからないまま進めていたので、オブジェクトとインスタンスの違いに関して改めて認識することができたので、よかった。

またわからなくなったら、このページで確認すればいいし、学び始めの人は一緒に学んでいきましょう。