JSチュートリアル

JSホーム JSの紹介 JSどこへ JS出力 JSステートメント JS構文 JSコメント JS変数 JS Let JSConst JSオペレーター JS算術 JS割り当て JSデータ型 JS関数 JSオブジェクト JSイベント JS文字列 JS文字列メソッド JS文字列検索 JS文字列テンプレート JS番号 JS番号メソッド JSアレイ JS配列メソッド JS配列ソート JSアレイの反復 JSアレイ定数 JSの日付 JSの日付形式 JS DateGetメソッド JS日付設定メソッド JS数学 JSランダム JSブール値 JSの比較 JS条件 JSスイッチ JSループFor JSループフォーイン JSループの JSループWhile JSブレイク JSIterables JSセット JSマップ JS Typeof JS型変換 JSビット単位 JS RegExp JSエラー JSスコープ JSホイスト JS厳密モード JSこのキーワード JSアロー関数 JSクラス JS JSON JSデバッグ JSスタイルガイド JSのベストプラクティス JSの間違い JSパフォーマンス JS予約語

JSバージョン

JSバージョン JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE /エッジ JSの歴史

JSオブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクト表示 オブジェクトアクセサー オブジェクトコンストラクター オブジェクトのプロトタイプ オブジェクト反復可能 オブジェクトセット オブジェクトマップ オブジェクトリファレンス

JS関数

関数の定義 関数パラメーター 関数の呼び出し 関数呼び出し 機能適用 関数クロージャ

JSクラス

クラスイントロ クラス継承 クラス静的

JSAsync

JSコールバック JS非同期 JSの約束 JS Async / Await

JS HTML DOM

DOMイントロ DOMメソッド DOMドキュメント DOM要素 DOM HTML DOMフォーム DOM CSS DOMアニメーション DOMイベント DOMイベントリスナー DOMナビゲーション DOMノード DOMコレクション DOMノードリスト

JSブラウザBOM

JSウィンドウ JS画面 JSロケーション JSの歴史 JSナビゲーター JSポップアップアラート JSタイミング JSクッキー

JS Web API

WebAPIイントロ WebフォームAPI Web履歴API WebストレージAPI WebワーカーAPI Web Fetch API Web Geolocation API

JS AJAX

AJAXイントロ AJAX XMLHttp AJAXリクエスト AJAX応答 AJAXXMLファイル AJAX PHP AJAX ASP AJAXデータベース AJAXアプリケーション AJAXの例

JS JSON

JSONイントロ JSON構文 JSONとXML JSONデータ型 JSON解析 JSON文字列化 JSONオブジェクト JSON配列 JSONサーバー JSON PHP JSON HTML JSON JSONP

JSとjQuery

jQueryセレクター jQuery HTML jQuery CSS jQuery DOM

JSグラフィックス

JSグラフィックス JSキャンバス JSPlotly JS Chart.js JSグーグルチャート JS D3.js

JSの例

JSの例 JS HTML DOM JSHTML入力 JSHTMLオブジェクト JSHTMLイベント JSブラウザ JSエディター JS演習 JSクイズ JS証明書

JSリファレンス

JavaScriptオブジェクト HTMLDOMオブジェクト


JavaScript ES5

ES5としても知られるECMAScript2009は、JavaScriptの最初のメジャーリビジョンでした。

この章では、ES5の最も重要な機能について説明します。

ES5の機能


ブラウザのサポート

ES5 最新のすべてのブラウザで完全にサポートされています。

Chrome IE Edge Firefox Safari Opera
Yes 9.0 Yes Yes Yes Yes

「厳密な使用」指令

"use strict" JavaScriptコードを「厳密モード」で実行する必要があることを定義します。

strictモードでは、たとえば、宣言されていない変数を使用できません。

すべてのプログラムで厳密モードを使用できます。宣言されていない変数を使用できないようにするなど、よりクリーンなコードを作成するのに役立ちます。

"use strict"単なる文字列式です。古いブラウザは、それを理解していなくてもエラーをスローしません。

詳細については、JS厳密モードをご覧ください。


文字列のプロパティアクセス

このcharAt()メソッドは、文字列内の指定されたインデックス(位置)にある文字を返します。

var str = "HELLO WORLD";
str.charAt(0);            // returns H

ES5では、文字列へのプロパティアクセスが許可されています。

var str = "HELLO WORLD";
str[0];                   // returns H

文字列へのプロパティアクセスは少し予測できないかもしれません。

詳細については、JS文字列メソッドをご覧ください。


複数行にわたる文字列

ES5では、円記号でエスケープした場合、複数行にわたる文字列リテラルを使用できます。

"Hello \
Dolly!";

\メソッドはユニバーサルサポートを持っていない可能性があります。
古いブラウザでは、円記号の周囲のスペースの扱いが異なる場合があります。
一部の古いブラウザでは、\文字の後ろにスペースを入れることができません。

文字列リテラルを分割するより安全な方法は、文字列加算を使用することです。

"Hello " +
"Dolly!";

プロパティ名としての予約語

ES5では、プロパティ名として予約語を使用できます。

オブジェクトの例

var obj = {name: "John", new: "yes"}

文字列trim()

このtrim()メソッドは、文字列の両側から空白を削除します。

var str = "       Hello World!        ";
alert(str.trim());

詳細については、JS文字列メソッドをご覧ください。



Array.isArray()

このisArray()メソッドは、オブジェクトが配列であるかどうかをチェックします。

function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}

詳細については、JSアレイをご覧ください。


配列forEach()

このforEach()メソッドは、配列要素ごとに1回関数を呼び出します。

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
  txt = txt + value + "<br>";
}

詳細については、JS配列反復法をご覧ください。


配列map()

この例では、各配列値に2を掛けます。

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}

詳細については、JS配列反復法をご覧ください。


配列filter()

この例では、値が18より大きい要素から新しい配列を作成します。

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value > 18;
}

詳細については、JS配列反復法をご覧ください。


配列reduce()

この例では、配列内のすべての数値の合計を求めます。

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}

詳細については、JS配列反復法をご覧ください。


配列reduceRight()

この例では、配列内のすべての数値の合計も求めています。

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value) {
  return total + value;
}

詳細については、JS配列反復法をご覧ください。


配列every()

この例では、すべての値が18を超えているかどうかを確認します。

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}

詳細については、JS配列反復法をご覧ください。


配列some()

この例では、一部の値が18を超えているかどうかを確認します。

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);

function myFunction(value) {
  return value > 18;
}

詳細については、JS配列反復法をご覧ください。


配列indexOf()

配列で要素値を検索し、その位置を返します。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

詳細については、JS配列反復法をご覧ください。


配列lastIndexOf()

lastIndexOf()と同じですindexOf()が、配列の最後から検索します。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

詳細については、JS配列反復法をご覧ください。


JSON.parse()

JSONの一般的な使用法は、Webサーバーからデータを受信することです。

Webサーバーから次のテキスト文字列を受け取ったとします。

'{"name":"John", "age":30, "city":"New York"}'

JavaScript関数JSON.parse()は、テキストをJavaScriptオブジェクトに変換するために使用されます。

var obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');

詳細については、JSONチュートリアルをご覧ください。


JSON.stringify()

JSONの一般的な使用法は、データをWebサーバーに送信することです。

Webサーバーにデータを送信する場合、データは文字列である必要があります。

JavaScriptにこのオブジェクトがあると想像してください。

var obj = {name:"John", age:30, city:"New York"};

JavaScript関数JSON.stringify()を使用して文字列に変換します。

var myJSON = JSON.stringify(obj);

結果は、JSON表記に続く文字列になります。

myJSONが文字列になり、サーバーに送信する準備が整いました。

var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

詳細については、JSONチュートリアルをご覧ください。


Date.now()

Date.now() returns the number of milliseconds since zero date (January 1. 1970 00:00:00 UTC).

Example

var timInMSs = Date.now();

Date.now() returns the same as getTime() performed on a Date object.

Learn more in JS Dates.


Date toISOString()

The toISOString() method converts a Date object to a string, using the ISO standard format:

Example

const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();

Date toJSON()

toJSON() converts a Date object into a string, formatted as a JSON date.

JSON dates have the same format as the ISO-8601 standard: YYYY-MM-DDTHH:mm:ss.sssZ:

Example

d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();

Property Getters and Setters

ES5 lets you define object methods with a syntax that looks like getting or setting a property.

This example creates a getter for a property called fullName:

Example

// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;

This example creates a setter and a getter for the language property:

Example

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
};

// Set an object property using a setter:
person.lang = "en";

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;

This example uses a setter to secure upper case updates of language:

Example

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
};

// Set an object property using a setter:
person.lang = "en";

// Display data from the object:
document.getElementById("demo").innerHTML = person.language;

Learn more about Gettes and Setters in JS Object Accessors


Object.defineProperty()

Object.defineProperty() is a new Object method in ES5.

It lets you define an object property and/or change a property's value and/or metadata.

Example

// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
};

// Change a Property:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});

// Enumerate Properties
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Next example is the same code, except it hides the language property from enumeration:

Example

// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
};

// Change a Property:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});

// Enumerate Properties
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

This example creates a setter and a getter to secure upper case updates of language:

Example

/// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO"
};

// Change a Property:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});

// Change Language
person.language = "en";

// Display Language
document.getElementById("demo").innerHTML = person.language;

E5 Object Methods

ES5 added a lot of new Object Methods to JavaScript:

Managing Objects

// Create object with an existing object as prototype
Object.create(parent, donor)

// Adding or changing an object property
Object.defineProperty(object, property, descriptor)

// Adding or changing object properties
Object.defineProperties(object, descriptors)

// Accessing Properties
Object.getOwnPropertyDescriptor(object, property)

// Returns all properties as an array
Object.getOwnPropertyNames(object)

// Accessing the prototype
Object.getPrototypeOf(object)

// Returns enumerable properties as an array
Object.keys(object)

Protecting Objects

// Prevents adding properties to an object
Object.preventExtensions(object)

// Returns true if properties can be added to an object
Object.isExtensible(object)

// Prevents changes of object properties (not values)
Object.seal(object)

// Returns true if object is sealed
Object.isSealed(object)

// Prevents any changes to an object
Object.freeze(object)

// Returns true if object is frozen
Object.isFrozen(object)

Learn more in Object ECMAScript5.


Trailing Commas

ES5 allows trailing commas in object and array definitions:

Object Example

person = {
  firstName: "John",
  lastName: " Doe",
  age: 46,
}

Array Example

points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

WARNING !!!

JSON does not allow trailing commas.

JSON Objects:

// Allowed:
var person = '{"firstName":"John", "lastName":"Doe", "age":46}'
JSON.parse(person)

// Not allowed:
var person = '{"firstName":"John", "lastName":"Doe", "age":46,}'
JSON.parse(person)

JSON Arrays:

// Allowed:
points = [40, 100, 1, 5, 25, 10]

// Not allowed:
points = [40, 100, 1, 5, 25, 10,]