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

はじめに

学習したもの

MDN JavaScript コーナー
┃
┗ チュートリアル
　 ┣ 完全な初心者向け
　 ┃
　 ┣ 中級者向け
　 ┃ ┣ クライアントサイド Web API
　 ┃ ┣ JavaScript 「再」入門
　 ┃ ┣ JavaScript のデータ構造（今回の学習箇所）
　 ┃ ┣ 等価比較と同一性
　 ┃ ┗ クロージャ
　 ┃
　 ┗ 上級者向け
　　 ┣ 継承とプロトタイプチェーン
　　 ┣ Strict モード
　　 ┣ JavaScript 型付き配列
　　 ┣ メモリ管理
　　 ┗ 同時実行モデルとイベントループ

概要

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

JavaScript のデータ構造

JavaScript で使用可能な組み込みデータ構造の一覧と、それらがどのような性質を持ち合わせているかについて学習する。

ノート・メモ

動的型付け
- JavaScript は弱い型付けあるいは動的型付けの言語です。JavaScript では、変数が直接的に特定のデータ型に関連付けられているわけではなく、いかなる変数にもあらゆる型の値を代入(と再代入)できます。
データ型
- 最新の ECMAScript 標準仕様では 7 つのデータ型が定義されています。
  - 7 種類のプリミティブデータ型: Boolean, Null, Undefined, Number, BigInt, String, Symbol
  - Object
プリミティブ値
- object 型をのぞく全ての型は不変 (immutable) な値 (変更することができない値) として定義されています。特筆すべき点としては、 string 型が（C などとは違って）不変な値である点です。 これらの型の値を、プリミティブ値 (primitive value) と呼びます。
- Boolean 型
  - Boolean は論理的な実体であり、true、false の 2 つの値があります。
- Null 型
  - Null 型は値が null の 1 種類しかありません。
- Undefined 型
  - 値を代入していない変数の値は、undefined になります。
- Number 型
  - ECMAScript には、Number と BigInt の 2 つの組み込み数値型があります。
  - ECMAScript 標準仕様によると、この型は「"倍精度 64 ビット形式による IEEE 754 値"」 (-(2 の 53 乗 -1) から 2 の 53 乗 -1 の間の数値) となります。特筆すべきは整数であるとは定義されていないという点です。 さらに言うならば、この型は浮動小数点数値にもなりますし、+Infinity、-Infinity、NaN (not-a-number) といった記号的な値も持ち合わせています。
  - Number 型には、2 種類の表現を持つ数値がひとつだけあります。それは 0 であり、-0 および +0 で表します ("0" は +0 の別名です)。実用上、影響はほとんどありません。例えば、+0 === -0 は true です。ただし、ゼロ除算を行った場合は違いに気づくでしょう。
- BigInt 型
  - BigInt 型は、任意の精度で整数を表すことができる JavaScript の数値プリミティブです。BigInt を使用すると、Number の安全な整数制限を超えても、大きな整数を安全に格納および操作できます。BigInt は、整数の末尾に n を追加するか、コンストラクターを呼び出すことによって作成されます。
  - Number と同じように+, *, -, **, %などの演算子を BigInt で使用できます。BigInt は Number と厳密に等しいわけではありませんが、ほとんど同じです。
  - BigInt は、if, ||, &&, Boolean, !などで Boolean に変換される場合、Number と同じように動作します。
  - BigInt は、Number と同時に使用することはできません。代わりに、TypeError が発生します。
- String 型
  - JavaScript の String 型は、テキストデータを表すために使用します。これは、16 ビット符号なし整数値の "要素" の集合体です。文字列内の各要素は、文字列内の位置を占めます。最初の要素はインデックス 0、次の要素がインデックス 1 となっていきます。また文字列の長さは、内部にある要素の数です。
  - JavaScript の文字列は不変 (immutable) です。これは一度生成した文字列は変更が不可能であるということを意味しています。しかしながら、オリジナルの文字列を操作することで別の文字列を生成することは可能となっています。
  - 文字列を用いて複雑なデータ構造を表現したいと思うこともあるでしょう。文字列は以下のような使い勝手の良さを備えています。
    - 文字列連結によって複雑な文字列の構築が簡単である。
    - 文字列はデバッグが簡単である（出力される情報は常に文字列の一種である）
    - 文字列は（インプットフィールド、ローカルストレージの値、 XMLHttpRequest の responseText など）数多くの API において基準として扱われており、全てを文字列で処理したいと思わせる
  - 文字列型の使用はテキストデータや記号データを表すのには向いていますが、別のデータ構造を表す為に文字列のパースや正しい抽象化を用いる必要がある場合には向いていないと言えるでしょう。
- Symbol 型
  - Symbols は、ECMAScript Edition 6 における JavaScript の新機能です。Symbol はユニークかつ不変なプリミティブ値で、オブジェクトのプロパティ識別子として使用します。

Object

プロパティ
- JavaScript において、オブジェクトはプロパティのバッグとみなせます。オブジェクトリテラル構文では、限定されたプロパティセットを初期化します。プロパティは追加および削除が可能です。プロパティの値は、他のオブジェクトを含むあらゆる型の値が設定可能であり、これにより複雑なデータ構造の構築が可能となっています。プロパティは、キー値を使用して識別します。キー値は String 値または Symbol 値です。
- オブジェクトには、特定の属性を持つ 2 種類のプロパティがあります。それは、データプロパティとアクセサプロパティです。

データプロパティ

キーと値を関連づけており、以下の属性を持ちます。

属性	型	説明	既定値
Value	JavaScript の任意の型	プロパティにアクセスすると取り出される値です。	undefined
Writable	Boolean	false であれば、プロパティの Value は変更できません。	false
Enumerable	Boolean	true であれば、プロパティは for...in ループで列挙されます。	false
Configurable	Boolean	false であれば、プロパティは削除できません。また、Value および Writable 以外の属性を変更できません。	false

アクセサプロパティ

値を取り出しまたは保存するための 1 つまたは 2 つのアクセサ関数 (get および set) とキーを関連づけており、以下の属性を持ちます。

属性	型	説明	既定値
Get	Function オブジェクトまたは undefined	値に対して get アクセスが実行されると、関数が引数なしで呼び出されてプロパティの値を取り出します。	undefined
Set	Function オブジェクトまたは undefined	指定したプロパティを変更しようとしたときに、代入する値を引数に含めて関数が呼び出されます。	undefined
Enumerable	Boolean	true であれば、プロパティは for...in ループで列挙されます。	false
Configurable	Boolean	false であれば、プロパティの削除やデータプロパティの変更はできません。	false

属性は通常 JavaScript エンジンが使用しますので、それらに直接アクセスすることはできません。これが、属性に角括弧が 2 つついている理由です。

「通常の」オブジェクトおよび関数
- JavaScript オブジェクトはキーと値を所持しています。キーは文字列 (または Symbol) ですが、値はなんでもかまいません。関数は呼び出し可能という付加機能を持つ、通常のオブジェクトです。
Date
- 日時についての表現を考慮するとき、組み込みの Date オブジェクトのユーティリティメンバを用いるのが最も妥当でしょう。
インデックス付きコレクション: Array (配列) および Typed Array (型付き配列)
- Array は整数値をキーにするプロパティと length プロパティの間に特殊な関係の存在する、標準オブジェクトです。加えて述べるなら、配列は、配列を操作するのに便利ないくつかのメソッドを提供する Array.prototype を継承しています。例えば indexOf (配列中の値の探索) や push (配列への要素の追加) などです。これにより配列はリストまたはセットとして表現するために必要な機能を備えることとなります。
- Typed Arrays は ECMAScript Edition 6 における JavaScript の新機能であり、バイナリデータバッファについて配列状のビューを提供します。
キー付きコレクション: Map, Set, WeakMap, WeakSet
- これらのデータ構造は、キーとしてオブジェクトへの参照を持ち、ECMAScript Edition 6 で導入されました。WeakMap および Map がオブジェクトと値を関連づける一方で、Set および WeakSet はオブジェクトのセットを表します。
- Map と WeakMap の相違点としては、前者がキーであるオブジェクトの列挙が可能であるのに対し、後者がガベージコレクションに最適化されている点です。
- Map と Set は純粋に ECMAScript 5 での実装も可能ではありますが、("完全" な意味での) オブジェクトの比較は不可能であり、キーとしたオブジェクトの線形探索が必要なことによるパフォーマンス上の問題があります。(WeakMap を含む) Map と Set のネイティブな実装では対数を用いることにより概して定数時間でのキーおよび関連する値の探索が可能となっています。
- 従来ならば、DOM ノードにデータを結び付ける場合は、オブジェクトに直接プロパティを設定するか、data-* 属性を用いるのが普通でした。これらの手法は同じコンテクストで実行されるあらゆるスクリプトからデータの利用が可能であるため、不都合な面を持ち合わせていました。Map および WeakMap を使用することにより、オブジェクトへのプライベートなデータの結びつけを簡単に行うことができます。
構造化データ: JSON
- JSON (JavaScript Object Notation) は軽量なデータ交換形式であり、JavaScript 由来ですが多くのプログラミング言語で使用されています。JSON は万能なデータ構造を構築します。
typeof 演算子は、変数の型を知るのに役立ちます。

分かった事

JavaScript は弱い型付けあるいは動的型付けの言語であること。
データ型は、７つのプリミティブデータ型とオブジェクトに分かれること。

分からなかった事

インデックス付きコレクション: Array (配列) および Typed Array (型付き配列)の詳細。
キー付きコレクション: Map, Set, WeakMap, WeakSet の詳細。

まとめ

今回は、昨日（10/17(水)）に投稿するつもりが体調を崩して投稿できていなかった回を投稿します。

このチャプターでは、データ型とデータ構造について詳しく学習しました。今回も分かるような、分からないようなそんな内容でした。JavaScript 難しいですが、頑張ります。

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

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

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