【学習ログ】MDN JavaScript チュートリアル (5 回目)

はじめに

学習したもの

MDN JavaScript コーナー
┃
┗ チュートリアル
　 ┣ 完全な初心者向け
　 ┃ ┣ JavaScript の第一歩
　 ┃ ┣ JavaScript の構成要素
　 ┃ ┃
　 ┃ ┗ JavaScript オブジェクトの紹介
　 ┃ 　 ┣ オブジェクトの基本（本日の学習箇所）
　 ┃ 　 ┣ 初心者のためのオブジェクト指向 JavaScript（本日の学習箇所）
　 ┃ 　 ┣ オブジェクトプロトタイプ
　 ┃ 　 ┣ JavaScript の継承
　 ┃ 　 ┣ JSON データの操作
　 ┃ 　 ┣ オブジェクト構築の実践
　 ┃ 　 ┗ 評価：バウンスボールのデモへの機能の追加
　 ┃
　 ┣ 中級者向け
　 ┗ 上級者向け

概要

チュートリアルで習った事の概要は下記の通りです。

JavaScript オブジェクトの基本

基本的な JavaScript オブジェクトの構文を学習。

初心者のためのオブジェクト指向 JavaScript

オブジェクト指向 JavaScript (OOJS) についての学習。オブジェクト指向プログラミング (OOP) の基本的な視点の説明有り。

ノート・メモ

(1) JavaScript オブジェクトの基本

オブジェクト
- オブジェクトは関連のあるデータと機能の集合。機能は大抵は変数と関数で構成。
プロパティ
- (オブジェクトの中の)変数のこと
メソッド
- (オブジェクトの中の)関数のこと
オブジェクトの生成

var example = {
  name: ['John', 'Doe'],
  age: 32,
  gender: 'male',
  bio function() {
    alert('He name is' + this.name[0] + ' ' + this.name[1] + ' . ' + this.age + 'years old. ');
  }
};

オブジェクトの使い方

example.name[0];
example.age;
example.gender;
example.bio();

オブジェクトリテラル
- 記号を使って書くオブジェクトは、クラスを使用して生成する方法と対比してオブジェクトリテラルと呼ばれる。
ドット記法
- オブジェクトのプロパティとメソッドに対してアクセスする際の記法。名前空間。先にオブジェクトの名前を書いて、ドット ( . ) を書いて、それから本当にアクセスしたいプロパティの名前や、配列の要素や、そのオブジェクトのメソッドを書く。
サブ名前空間
- オブジェクト内部にさらに他のオブジェクトを持つことが出来る。
角括弧による記述(ブラケット記法)
- オブジェクトのプロパティへアクセスするもう１つの手段。配列の添え字によく似ています。

example["age"];
example["gender"];

連想配列
- 上記のようなオブジェクトを連想配列といい、文字列によって値を格納しています。
オブジェクトメンバーの設定
- 値をセットするメンバーを宣言することで、オブジェクトのメンバーに値をセット (set)することもできます。

example.age = 45;
// もしくは下記でも可
example["interests"] = "music";

角括弧の便利な点
- ドット記法では既存のメンバー名にアクセスする事しか出来ないが、角括弧は事前に決まっていない変数名を使って、動的にメンバーを追加する事が出来る。
this
- this キーワードはコードの中のオブジェクトと等しい。
- 動的にオブジェクトを生成する(例えばコンストラクターを使う)ときにとても効果的。
組み込みのオブジェクトや API では常に自動でオブジェクトのインスタンスが生成される訳ではないことを注意する必要があります。

(2) 初心者のためのオブジェクト指向 JavaScript

オブジェクト指向プログラミング ( OOP ) とは何か
- OOP の基本的な考え方は、プログラムの中で扱いたい、現実世界の事物を模るためにオブジェクトを使用すること、またはそうしなければ使うことが難しいあるいは不可能だった機能にアクセスするための、シンプルな方法を提供することです。
名前空間
- オブジェクトのパッケージの中
カプセル化
- オブジェクトのデータ(しばしば関数も含む)が名前空間に適切に格納されること。
抽象化
- より複雑な事物を、プログラムの目的に沿って簡単に操作できるように、その最も重要な側面を表現する、シンプルなモデルを作ること。
オブジェクトインスタンス
- 抽象化したクラスを元にして作られたオブジェクト。クラスで定義されたデータや機能を持つ。
クラスからオブジェクトインスタンスが生成されるとき、クラスのコンストラクタ関数が生成のために実行される。
インスタンス化
- クラスからオブジェクトインスタンスが生成される過程のこと。
オブジェクトインスタンスは、クラスをインスタンス化したもの。
ポリモーフィズム
- 同じ機能を複数のオブジェクトタイプが実装することを示す。
コンストラクタ関数
- JavaScript でオブジェクトやその機能を定義するために使用される特殊な関数。コンストラクタは必要な数のオブジェクトを効率的な方法で作成し、必要に応じてデータや関数を付加する手段を提供します。
コンストラクタ関数は、JavaScript 版のクラス。
コンストラクタ関数の定義・呼び出し

// コンストラクタ関数の名前は大文字で始まる。
function Example(name) {
  this.name = name;
  this.message = function() {
    alert("My name is " + this.name + ".");
  };
}

// コンストラクタ関数呼び出し
var person1 = new Example("John");
var person2 = new Example("Jane");

Object() コンストラクタ
- Object() コンストラクタを新しいオブジェクトの生成のために使うことができます。
- 空のオブジェクトを作成したり、オブジェクトにドット記法とブラケット記法を使ってプロパティを追加することができます。
- あらかじめプロパティやメソッドを設定するため、Object() コンストラクタに引数としてオブジェクトリテラルを渡すことも可能です。
create() メソッド
- 最初にコンストラクタを作らずにインスタンスを生成することが出来る組み込みメソッド。既存のオブジェクトを元にして新しいオブジェクトを生成する事が出来る。
- IE8 が未対応。

分かった事

オブジェクトの作成方法や使用する方法。オブジェクトから値や関数を取得・設定する方法が分かりました。

分からなかった事

オブジェクトとオブジェクト指向プログラミングとオブジェクト指向 JavaScript の話の境界がチュートリアルを読んでいるとだんだん分からなくなってきて混乱中です。

まとめ

昨日（9/28(土)）は、実家の手伝いがあって、体力的・時間的に辛くブログの投稿を休んでしまいました。 JavaScript の学習は隙間時間で少しづつでもしていたので、予習になって今日の学習前半がスムーズにいって、そこは良かったです。またコツコツとブログと学習を続けたいと思います。

最後までご覧頂きありがとうございました。

フロントエンド学習記(仮題)

主にフロントエンドについて学習した事を記録・メモしていきます。