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オブジェクト


JavaScriptでは、オブジェクトが重要です。オブジェクトを理解すれば、JavaScriptを理解できます。


JavaScriptでは、ほとんど「すべて」がオブジェクトです。

  • newブール値はオブジェクトにすることができます(キーワードで定義されている場合)
  • new数値はオブジェクトにすることができます(キーワードで定義されている場合)
  • new文字列はオブジェクトにすることができます(キーワードで定義されている場合)
  • 日付は常にオブジェクトです
  • 数学は常にオブジェクトです
  • 正規表現は常にオブジェクトです
  • 配列は常にオブジェクトです
  • 関数は常にオブジェクトです
  • オブジェクトは常にオブジェクトです

プリミティブを除くすべてのJavaScript値はオブジェクトです。


JavaScriptプリミティブ

プリミティブ値は、プロパティやメソッドを持たない値です。

プリミティブデータ型は、プリミティブ値を持つデータです

JavaScriptは、5種類のプリミティブデータ型を定義しています。

  • string
  • number
  • boolean
  • null
  • undefined

プリミティブ値は不変です(ハードコードされているため、変更できません)。

x = 3.14の場合、xの値を変更できます。ただし、3.14の値を変更することはできません。

価値タイプコメント
"こんにちは"ストリング「こんにちは」は常に「こんにちは」です
3.14番号3.14は常に3.14です
trueブール値trueは常にtrueです
falseブール値falseは常にfalseです
ヌルnull(オブジェクト)nullは常にnullです
未定義未定義undefinedは常にundefinedです

オブジェクトは変数です

JavaScript変数には、単一の値を含めることができます。

let person = "John Doe";

JavaScript変数には多くの値を含めることもできます。

オブジェクトも変数です。ただし、オブジェクトには多くの値を含めることができます。

オブジェクトの値は、名前:値のペア(コロンで区切られた名前と値)として記述されます。

let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

JavaScriptオブジェクトは、名前付きの値のコレクションです

constキーワードを使用してオブジェクトを宣言するのが一般的な方法です。

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};


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

JavaScriptオブジェクトでは、名前付きの値はプロパティと呼ばれます。

財産 価値
ファーストネーム ジョン
苗字 Doe
50
目の色 青い

名前と値のペアとして記述されたオブジェクトは、次のようなものです。

  • PHPの連想配列
  • Pythonの辞書
  • Cのハッシュテーブル
  • Javaのハッシュマップ
  • RubyとPerlのハッシュ

オブジェクトメソッド

メソッドは、オブジェクトに対して実行できるアクションです。

オブジェクトのプロパティは、プリミティブ値、他のオブジェクト、および関数の両方にすることができます。

オブジェクトメソッドは、関数定義を含むオブジェクトプロパティです。

財産 価値
ファーストネーム ジョン
苗字 Doe
50
目の色 青い
フルネーム function(){return this.firstName + "" + this.lastName;}

JavaScriptオブジェクトは、プロパティおよびメソッドと呼ばれる名前付き値のコンテナーです。

次の章でメソッドについて詳しく学びます。


JavaScriptオブジェクトの作成

JavaScriptを使用すると、独自のオブジェクトを定義および作成できます。

新しいオブジェクトを作成するには、さまざまな方法があります。

  • オブジェクトリテラルを使用して、単一のオブジェクトを作成します。
  • キーワードを使用して単一のオブジェクトを作成しますnew
  • オブジェクトコンストラクターを定義してから、構築されたタイプのオブジェクトを作成します。
  • を使用してオブジェクトを作成しますObject.create()

オブジェクトリテラルの使用

これは、JavaScriptオブジェクトを作成する最も簡単な方法です。

オブジェクトリテラルを使用して、1つのステートメントでオブジェクトを定義および作成します。

オブジェクトリテラルは、中括弧{}内のname:valueペア(age:50など)のリストです。

次の例では、4つのプロパティを持つ新しいJavaScriptオブジェクトを作成します。

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

スペースと改行は重要ではありません。オブジェクト定義は複数行にまたがることができます。

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

この例では、空のJavaScriptオブジェクトを作成してから、次の4つのプロパティを追加します。

const person = {};
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

JavaScriptキーワードの使用new

次の例では、を使用して新しいJavaScriptオブジェクトを作成し、new Object()4つのプロパティを追加します。

const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

上記の例はまったく同じです。

ただし、を使用する必要はありませんnew Object()

読みやすさ、単純さ、実行速度のために、オブジェクトリテラルメソッドを使用してください。


JavaScriptオブジェクトは可変です

オブジェクトは変更可能です。オブジェクトは、値ではなく参照によってアドレス指定されます。

人がオブジェクトである場合、次のステートメントは人のコピーを作成しません。

const x = person;  // Will not create a copy of person.

オブジェクトxは人のコピーではありません。ですxとpersonはどちらも同じオブジェクトです。

xとpersonは同じオブジェクトであるため、xを変更するとpersonも変更されます。

const person = {
  firstName:"John",
  lastName:"Doe",
  age:50, eyeColor:"blue"
}

const x = person;
x.age = 10;      // Will change both x.age and person.age