;)
こんにちは。Webデザイナーのヤマダです。
いきなりですが反省しています。今まで僕はニュアンスでJavaScriptを書いてました。
要はあんまり考えず、「なんとなく」書いてたんですね。
さすがに毎回コピペで済ませてきた訳ではないですが
- 「1から書け」と言われると躊躇いがある
- 「説明しろ」と聞かれると困る
- サイト制作でよく使うもの（トグルとか）は書けるけど、それ以上の引き出しがない
これではよくありません。私は「つよつよ」になりたいのです。
なので、胸をはって「JavaScript書けます！」といえるように、基本的なところから今一度、学びなおしていきたいと思います。
※あくまで個人的なアウトプットです。なので、ざっくりです。
※ツッコミどころあればご指摘ください。お願いします。
目次
（そもそも）オブジェクトとは
下記引用記事。
オブジェクトとは、複数の値をひとまとめにした値です。これはひじょうにざっくりした説明ですが、…
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）…インスタンス
と考えられる。
そして、コンストラクタには慣習がある。これも抑えておく。
- 先頭は大文字で名前付けされる
new演算子を使ってのみ実行されるべき
コンストラクタ 演算子
https://ja.javascript.info/constructor-newnew
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); // エラー次回はプロトタイプとクラスについて。
;)
;)
;)
