10 BuiltInObjects - iruma-tea/dokushujs GitHub Wiki

10 組み込みオブジェクト

**組み込みオブジェクト(ビルトインオブジェクト)**とは、JavaScriptエンジンによって、
あらかじめ提供されているオブジェクト群のこと。

10.1 Windowオブジェクト(window)

Windowオブジェクトは開発者がブラウザを操作するためのWeb APIが格納されている。
Windowオブジェクトは、開発者が書いたコード実行される前にすでに windowという識別子(オブジェクト名)
使用可能な状態となっている。このwindowを通じてブラウザを操作する。

10.1.1 Windowオブジェクトのメソッド

setIntervalを使った処理

setTimeoutは経過時間後に関数を実行するメソッド。setIntervalを使うと、指定した時間ごとに関数を実行できる。
繰り返しの実行処理を終了するには、clearIntervalを使用する。

let count = 0;
const interValID = setInterval(() => {
    counter++;
    console.log(counter);

    if (counter === 3) {
        clearInterval(interValID);
        console.log("インターバル終了");
    }
}, 1000);

上記、コードは1秒毎に1インクリメントされた数値がコンソールに表示される。
また、数値が3に達したときにはclearIntervalが実行されるため、繰り返し処理が終了する。

◆confirmを使った処理

confirmを使用するとユーザーに確認を促すダイアログを表示することができる。

if(confirm("画面を閉じますか?")) {
    /* [OK]のとき */
    window.close(); // 表示中の画面を閉じる
}

10.1.2 Windowオブジェクトのプロパティ

Windowオブジェクトの代表的なプロパティの一覧です。

プロパティ 説明
innerWidth ブラウザウィンドウの内側境界の幅を返す。これには、スクロールバーを含む
innerHeight ブラウザウィンドウの内側境界の高さを返す。これには、スクロールバーを含む
outerWidth スクロールバーを含めたブラウザ全体の外側境界の横幅を返す。これには、サイドバーやウィンドウの操作部分
ウィンドウをリサイズする境界やハンドルを含む。基本的にはブラウザの外側境界は必要ないためブラウザウィンドウの横幅を取得するときにはinnerWidthを使用する
outerHeight スクロールバー、ツールバーを含めたブラウザ全体の外側境界の高さを返す。
pageXOffset
scrollX
Webページの水平方向へのスクロール量をピクセルで返す。つまり、Webページが水平方向にスクロール可能なとき
ページの左端からどれだけスクロールしたかを取得できる。
pageYOffset
scrollY
Webページの垂直方向へのスクロール量をピクセルで返す。つまり、Webページの一番上からどれだけスクロールしたかを取得できる。
screenLeft
screenX
ディスプレイの左端からブラウザウィンドウの左端までをピクセルを返す。
screenTop
screenY
ディスプレイの上端からブラウザウィンドウの上端までをピクセルを返す。
self Windowオブジェクトのエイリアス
frames window内のiframeを配列風(array-like)オブジェクトとして返す。
parent 現在のwindowの親のWindowオブジェクトを返す。iframeなどのサブwindowで使用する
top ウィンドウの階層での最上位のWindowオブジェクトを返す
undefined 未定義であることを意味する。Undefined型の値

10.2 日付と時刻を扱うオブジェクト(Date)

日付と時刻を表すDateオブジェクト。Dateオブジェクトは、協定世界時(UTC)の1970年1月1日深夜0時からの経過時間をミリ秒単位で保持しており、
それによって時刻を計算する。
● GMT(Greenwich Mean Time: グリニッジ標準時) グリニッジ標準時(GMT)とはロンドンにあるグリニッジ展望台を通る子午線における時刻のこと。GMTは天体観測によって算出される時刻です。
● UTC(Coordinated Universal Time: 協力世界時)
協力世界時(UTC)は現在、世界の標準時として使われている。UTCは原子時計によって算出されるため、GMTより厳密な時刻定義が可能。
● JST(Japan Standard Time: 日本標準時)
日本標準時(JST)は、協力世界時から9時間の時差があるため、UTC + 9で表される。 JST = UTC + 9と覚えておくこと。

10.2.1 Dateオブジェクトの作成

Dateオブジェクトは、主に次の4つの方法でインスタンス化する。

[構文]
let 変数名 = new Date(); - 
let 変数名 = new Date(ミリ秒); - 
let 変数名 = new Date("YYYY[-MM-DDTHH:mm:ss.sssTZD]"); - 
let 変数名 = new Date(, [,,,,,ミリ秒]); - 

① 現在時刻
引数を省略した場合には、現在の時刻を保持するDateオブジェクトが生成される。

let now =  new Date();
console.log(now);

> Tue May 04 2021 16:02:44 GMT+0900(日本標準時)

② 1970年1月1日深夜0時から経過した時刻ミリ秒で指定

let data = new Date(24*60*60*1e3); // 1日
console.log(data);

> Fri Jan 02 1970 09:00:00 GMT+0900(日本標準時)

③ 日付フォーマット文字列の使用

[書式]ISO8601の日付フォーマット
YYYY-MM-DDTHH:mm:ss.sssTZD
YYYY: 年を4桁で表す。
MM: 01~12までの2桁で月を表す
DD: 01~31までの2桁で日を表す
T: 日付と時刻を「T」でつなげて表記する。
HH: 00~23までの2桁で時間を表す。
mm: 00~59までの2桁で分を表す。
ss: 00~59までの2桁で秒を表す。
sss: 1桁以上でミリ秒を表す。
TZD: タイムゾーンの設定を行う

④ 年月日などを引数に分けてインスタンス化

let data = new Date(2021, 0, 4, 2, 35, 0);
console.log(date);

> Mon Jan 04 02:35:00 GMT+0900

10.2.2 Dateオブジェクトの値を取得するメソッド

10.2.3 Dateオブジェクトの値を設定するメソッド

10.2.4 Dateの静的メソッド

10.2.5 日付の計算

10.3 RegExpオブジェクト

JavaScriptでは、RegExpオブジェクトを使うことで、正規表現を扱うことができる。
正規表現とは文字列をパターンの一致で検索するときに使う記法

10.3.1 RegExpオブジェクトの作成

RegExpオブジェクトは、次の2種類の方法でインスタンス化できる。

[構文] RegExpオブジェクトのインスタンス化
**正規表現リテラルを使う場合**
let RegExpオブジェクト = //[フラグ]

**RegExpオブジェクトからインスタンス化する場合**
let RegExp オブジェクト = new RegExp("正規表現"[,"フラグ"]);
let RegExp オブジェクト = new RegExp(//[,"フラグ"]);

10.4 Storageオブジェクト

Web Storage APIを使うと、ブラウザ内にデータを保持できる。Web Storage APIは、Web APIの一種で、Storageオブジェクトを通して使うことができる。
Storageオブジェクトを通してデータをブラウザに保存すると、ブラウザの画面を再度開いた時にデータを復元できる。

10.4.1 Storageコンストラクタのインスタンス

Web Storage APIは、**localStorageオブジェクト(ローカルストレージ)または、sessionStorageオブジェクト(セッションストレージ)**から使うことができる。
これらのオブジェクトは、JavaScriptエンジンによって自動的に作成されたStorageコンストラクタのインスタンスです。
そのため、JavaScriptのコードを実行する前に、localStorage、sessionStorageは利用可能な状態になっている。

10.4.2 Storageオブジェクトのメソッドとプロパティ

プロパティ 説明
length ストレージに保存されている、キーと値のペアの長さ(個数)を取得する

10.4.3 ブラウザで値を確認

ローカルストレージ(localStorage) に保存されたキーと値のペアをブラウザの開発ツールより確認することができる。

localStorage.setItem("lemon", "レモン");

この値を確認するには、開発者ツールの「Applicaiton」タブを開き、左側メニューから「Local Storage」→「http://127.0.0.1:5500」を選択する。
ローカルストレージは、接続先のサーバーのオリジン単位で値が保持されている。
そのため、異なるオリジンのデータの取得・変更できない。 一方で、同じオリジン内のデータであれば、ブラウザのタブやウィンドウをまたいで、データの取得・変更が可能です。

10.4.4 ロカールストレージとセッションストレージ

ブラウザの保存領域には、ローカルストレージ以外にも、セッションごとのデータを保存する セッションストレージ(sessionStorage) がある。

セッションストレージは、sessionStorageオブジェクトを通して、取得・変更する。メソッドの使い方はlocalStorageと同じであるが、
セッションストレージの場合は、セッションが維持されている間に限り値が保持される という違いがある。
つまり、ブラウザのタブやウィンドウを閉じた時点で、保存した値は自動的に消滅する。
また、新しく開いたタブやウィンドウはことなるセッションとみなされる。

10.5 JSONオブジェクト

JSON (JavaScript Object Notation)は、JavaScriptのオブジェクト構造を文字列で表す時に使う表記法である。

10.5.1 JSONの表記方法

[
    {
        "name": "独習 太郎",
        "age": 18,
        "family": {
            "father": "独習 父",
            "mother": "独習 母"
        }
    },
    {
        "name": "独習 花子",
        "age": 15
    }
]

◇JSONとオブジェクトの主な記述方法の違い

  1. キーはダブルクォート(")で囲む必要がある。
  2. シングルクォート(')は使えない。
  3. オブジェクト、配列の最後の要素の後ろにカンマ(,)を入れてはいけない。

10.5.2 JSON文字列の生成

オブジェクトからJSON文字列を作成するには、JSON.stringify を使う。

[構文]JSON.stringifyの使用方法
let JSON文字列 = JSON.stringify(taget[,replacer,space]);

target: JSON形式に変換する対象のデータを設定する。一般的にはオブジェクトまたは配列。オブジェクトと
配列がネストしていても問題なし。
replacer: 文字列または、数値の配列か関数を設定する
space: 可読性を上げるためのインデントを文字列または数値で設定する
  文字列の場合: インデントに使用する文字を指定
  数値の場合: スペースの挿入数(上限 10)

戻り値: JSONの文字列(JSON形式の文字列)が返る。
(JSON.stringifyの使用例)
const target = { a: 0, b: 1, c: { d: 2, e: 0, f: "hello" }};

console.log(JSON.stringify(target));
> {"a": 0, "b": 1, "c": { "d": 2, "e": 0, "f": "hello" }}

console.log(JSON.stringify(target, ["a", "b"]));
> {"a": 0, "b": 1}

console.log(JSON.stringify(target, ["e", "f"]));
> { }

function replacer(prop, value) {
    if (typeof value === "number" && value < 1) {
        return;
    }
    return value;
}

console.log(JSON.stringify(target, replacer));
> {"b": 1, "c": {"d": 2, "f": "hello"}}

console.log(JSON.stringify(target, null, "\t"));
> {
>    "a": 0,
>    "b": 1,
>    "c": {
>        "d": 2,
>        "e": 0,
>        "f": "hello"
>    }
>}

10.5.3 JSON文字列からオブジェクトの生成

JSON.parse に文字列を渡すと、JavaScriptのデータに変換される。

[構文] JSON.parseの使用方法
JSON.parse(jsonStr);

jsonStr: JSON文字列を設定します。
戻り値: jsonStrに対応するオブジェクトや配列、文字列、数値、真偽値、nullなどが返ります。
JSON文字列からJavaScriptオブジェクトに変換

const json = '{"b": 1, "c": {"d": 2, "f": "hello"}}';
const obj = JSON.parse(json);
console.log(obj.b);
> 1
画面更新ごとに1ずつ加算する処理
let data = localStorage.getItem('data');
data = JSON.parse(data);

if (data == null) {
    data = {val: 0};
}

console.log(data.val);

data.val++;

const json = JSON.stringify(data);
localStorage.setItem("data", json);

10.6 ラッパーオブジェクト

ラッパーオブジェクトとは、プリミティブ値を包み込む(内包する)オブジェクトのことです。
そもそも文字列などのプリミティブ値は、単なる値のため、オブジェクトのようにメソッドなどは保持していません。    しかし、JavaScriptではプリミティブ値に続けてメソッドを記述できる。

プリミティブ値 対応するラッパーオブジェクト
"文字列" String
12 Number
12n BigInt
true/false Boolean
シンボル値 Symbol
⚠️ **GitHub.com Fallback** ⚠️