10 BuiltInObjects - iruma-tea/dokushujs GitHub Wiki
**組み込みオブジェクト(ビルトインオブジェクト)**とは、JavaScriptエンジンによって、
あらかじめ提供されているオブジェクト群のこと。
Windowオブジェクトは開発者がブラウザを操作するためのWeb APIが格納されている。
Windowオブジェクトは、開発者が書いたコード実行される前にすでに windowという識別子(オブジェクト名) で
使用可能な状態となっている。このwindowを通じてブラウザを操作する。
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を使用するとユーザーに確認を促すダイアログを表示することができる。
if(confirm("画面を閉じますか?")) {
/* [OK]のとき */
window.close(); // 表示中の画面を閉じる
}
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型の値 |
日付と時刻を表す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と覚えておくこと。
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
JavaScriptでは、RegExpオブジェクトを使うことで、正規表現を扱うことができる。
正規表現とは文字列をパターンの一致で検索するときに使う記法
RegExpオブジェクトは、次の2種類の方法でインスタンス化できる。
[構文] RegExpオブジェクトのインスタンス化
**正規表現リテラルを使う場合**
let RegExpオブジェクト = /正規表現/[フラグ]
**RegExpオブジェクトからインスタンス化する場合**
let RegExp オブジェクト = new RegExp("正規表現"[,"フラグ"]);
let RegExp オブジェクト = new RegExp(/正規表現/[,"フラグ"]);
Web Storage APIを使うと、ブラウザ内にデータを保持できる。Web Storage APIは、Web APIの一種で、Storageオブジェクトを通して使うことができる。
Storageオブジェクトを通してデータをブラウザに保存すると、ブラウザの画面を再度開いた時にデータを復元できる。
Web Storage APIは、**localStorageオブジェクト(ローカルストレージ)または、sessionStorageオブジェクト(セッションストレージ)**から使うことができる。
これらのオブジェクトは、JavaScriptエンジンによって自動的に作成されたStorageコンストラクタのインスタンスです。
そのため、JavaScriptのコードを実行する前に、localStorage、sessionStorageは利用可能な状態になっている。
プロパティ | 説明 |
---|---|
length | ストレージに保存されている、キーと値のペアの長さ(個数)を取得する |
ローカルストレージ(localStorage) に保存されたキーと値のペアをブラウザの開発ツールより確認することができる。
localStorage.setItem("lemon", "レモン");
この値を確認するには、開発者ツールの「Applicaiton」タブを開き、左側メニューから「Local Storage」→「http://127.0.0.1:5500」を選択する。
ローカルストレージは、接続先のサーバーのオリジン単位で値が保持されている。
そのため、異なるオリジンのデータの取得・変更できない。 一方で、同じオリジン内のデータであれば、ブラウザのタブやウィンドウをまたいで、データの取得・変更が可能です。
ブラウザの保存領域には、ローカルストレージ以外にも、セッションごとのデータを保存する セッションストレージ(sessionStorage) がある。
セッションストレージは、sessionStorageオブジェクトを通して、取得・変更する。メソッドの使い方はlocalStorageと同じであるが、
セッションストレージの場合は、セッションが維持されている間に限り値が保持される という違いがある。
つまり、ブラウザのタブやウィンドウを閉じた時点で、保存した値は自動的に消滅する。
また、新しく開いたタブやウィンドウはことなるセッションとみなされる。
JSON (JavaScript Object Notation)は、JavaScriptのオブジェクト構造を文字列で表す時に使う表記法である。
[
{
"name": "独習 太郎",
"age": 18,
"family": {
"father": "独習 父",
"mother": "独習 母"
}
},
{
"name": "独習 花子",
"age": 15
}
]
- キーはダブルクォート(")で囲む必要がある。
- シングルクォート(')は使えない。
- オブジェクト、配列の最後の要素の後ろにカンマ(,)を入れてはいけない。
オブジェクトから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"
> }
>}
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);
ラッパーオブジェクトとは、プリミティブ値を包み込む(内包する)オブジェクトのことです。
そもそも文字列などのプリミティブ値は、単なる値のため、オブジェクトのようにメソッドなどは保持していません。
しかし、JavaScriptではプリミティブ値に続けてメソッドを記述できる。
プリミティブ値 | 対応するラッパーオブジェクト |
---|---|
"文字列" | String |
12 | Number |
12n | BigInt |
true/false | Boolean |
シンボル値 | Symbol |