BLOGJavaScript中級者を目指すよ①【コンストラクタとインスタンス-】

ヤマダ
  1. HOME
  2. ブログ
  3. フロントエンド
  4. JavaScript中級者を目指すよ①【コンストラクタとインスタンス-】

こんにちは。Webデザイナーのヤマダです。

いきなりですが反省しています。今まで僕はニュアンスでJavaScriptを書いてました。

要はあんまり考えず、「なんとなく」書いてたんですね。
さすがに毎回コピペで済ませてきた訳ではないですが

  • 「1から書け」と言われると躊躇いがある
  • 「説明しろ」と聞かれると困る
  • サイト制作でよく使うもの(トグルとか)は書けるけど、それ以上の引き出しがない

これではよくありません。私は「つよつよ」になりたいのです。

なので、胸をはって「JavaScript書けます!」といえるように、基本的なところから今一度、学びなおしていきたいと思います。

※あくまで個人的なアウトプットです。なので、ざっくりです。
※ツッコミどころあればご指摘ください。お願いします。

目次

  1. (そもそも)オブジェクトとは
  2. コンストラクタとインスタンス
    1. コンストラクタとは
    2. コンストラクタからオブジェクトを作成する(インスタンス化)

(そもそも)オブジェクトとは

下記引用記事。

オブジェクトとは、複数の値をひとまとめにした値です。これはひじょうにざっくりした説明ですが、…

https://uhyohyo.net/javascript/1_1.html

オブジェクトは、署名されたファイルを持つキャビネットとしてイメージすることができます。すべてのデータは、キーによってそのファイルの中に格納されます。ファイルを名前で検索したり、ファイルの追加や削除は簡単です。

https://ja.javascript.info/object

なんとなくだがわかる。

書き方としてはこんな感じ。

let userData = new Object();
userData.name = "Masaki";
userData.age = "25";

もしくは

let userData = {
	name: "Masaki",
	age: 25,
};

ただし、new Object();は実用的ではない記述が多かった。メモ。

またこのとき、userDataオブジェクトは2つのプロパティをもっている。

- 【プロパティ①】『プロパティ名:"name"』『値:"Masaki"』
- 【プロパティ②】『プロパティ名:"age"』『値:30』

プロパティの値を呼び出すには、ドット表記が要る。

alert( userData.name ); //Masaki

消すには

delete userData.name;

また、プロパティ名が複数の言葉で表している場合のルールも書いておく。

// ①プロパティ名は引用符で囲う
let userData = {
	name: "Masaki",
	age: 25,
	"loggend in": true,
};

// もしくは

let userData = {}; //先に作る

userData["loggend in"] = true;

// ②呼び出す場合は角括弧表記がいる

alert( userData["loggend in"] ); //true

ただまぁ個人的には、loggendInってやっちゃった方が色々楽だと思う。
なぜなら

userData.loggend in //とは使えない

userData['loggend in'] //としか使えなくなる

ちなみにこんなエラーを吐くらしい(たっちゃんありがとう)。

関数もオブジェクト。配列もオブジェクト。

まぁここら辺は分かってたので次。

コンストラクタとインスタンス

コンストラクタとは

オブジェクトを作成し、初期化する関数オブジェクト (Function オブジェクト) です。

https://javascript.keicode.com/lang/constructors.php

なるほど。理解が怪しくなってきた。焦
ちなみに日本語訳で、「建設者・建造者」という意味らしいです。なるほど?焦

絶望したので、わかりやすかった例を見つけてきた。

[JavaScript] オブジェクトの基礎

https://qiita.com/yoshi389111/items/245df2d642e49d2acf3a#new-%E3%81%A7%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E7%94%9F%E6%88%90
function Hello(word) {
    this.name = word;
    this.func = function() {
        alert(this.name);
    }
}
var aisatsu = new Hello("hello");
aisatsu.func();  // -> "hello"

これを例に出すと

  • 初めに作られた関数オブジェクト(Hello)…コンストラクタ
  • newで生成されているオブジェクト(aisatsu)…インスタンス

と考えられる。

そして、コンストラクタには慣習がある。これも抑えておく。

  1. 先頭は大文字で名前付けされる
  2. new演算子を使ってのみ実行されるべき

コンストラクタ 演算子 new

https://ja.javascript.info/constructor-new

2. については、ざっくり言ってしまえば、インスタンス生成のためだけに使うべきよ。って話なのだろう(多分)。

コンストラクタでは、オブジェクトの定義にthisキーワードを使う。
そして、通常、コンストラクタにreturn文はない。

コンストラクタからオブジェクトを作成する(インスタンス化)

// コンストラクタを定義する
let User = function (name, age, loggendIn ) {
	this.name = name;
	this.age = age;
	this.loggendIn = loggendIn;
	this.message = function () {
		alert("Hello, world!");
	};
};

// コンストラクタからインスタンスを生成する
let user01 = new User("Masaki", 25, true);

console.log(user01.name); //Masaki
console.log(user01.age); //25
console.log(user01.loggendIn); //true
user01.message(); // Hello, world!

こんな感じになる。

newの挙動については下記の通り。

function User(name, age, loggendIn ) {
	// let this = {};
	this.name = name;
	this.age = age;
	this.loggendIn = loggendIn;
	this.message = function () {
		alert("Hello, world!");
	};
	// return this;
};

ざっくり言ってしまえば、毎回新しく空のオブジェクト作って、初期プロパティを加えてreturnしてる。

再利用可能なオブジェクト作成のコードを実装すること、それがコンストラクタの主な目的です。

https://ja.javascript.info/constructor-new

また、コンストラクタから生成したインスタンスに、独自にプロパティを加えたい場合は

// コンストラクタを定義する
let User = function (name, age, loggendIn ) {
	this.name = name;
	this.age = age;
	this.loggendIn = loggendIn;
	this.message = function () {
		alert("Hello, world!");
	};
};

let user01 = new User( "Masaki", 25, true );

// 生成したインスタンスuser01にプロパティを追加
user01.gender = "male";

let user02 = new User( "Yamada", 22 );

console.log(user01.gender); // male
console.log(user02.gender); // エラー

次回はプロトタイプとクラスについて。