●学校情報

講座一覧・募集状況

学習方法

学習サポート

修了生の評価

受講生の横顔

当学院について

入学相談

入学手続

 

●講座情報

技術者養成講座

プログラミング講座

WEB講座

情報処理試験講座

Excel講座

Access講座

 

●関連コラム

関連コラム

関連用語集

 

logo

 

 

関連用語集

JavaScriptのオブジェクトとは?基本の使い方から応用まで解説

JavaScriptでは、複数の情報を1つにまとめて扱うために「オブジェクト」というデータ構造が用意されています。
オブジェクトは、関連する情報をひとまとめにできるため、実用的で多くの場面で使われています。

この記事では、JavaScriptにおけるオブジェクトの基本的な作り方や使い方をわかりやすく解説します。

オブジェクトとは?

オブジェクトは、「名前(キー)」と「値」のペアをまとめたデータの集合です。

const user = {
  name: "Taro",
  age: 25,
  isMember: true
};

このように、{ }(波括弧)を使って定義し、プロパティをカンマで区切って記述します。

プロパティのアクセス方法

オブジェクトの中の値(プロパティ)には、次のいずれかの方法でアクセスします。

console.log(user.name);       // "Taro"
console.log(user["age"]);     // 25

通常は .(ドット)でアクセスしますが、キー名が変数だったり、特殊な文字を含む場合は [](ブラケット)を使います。

プロパティの変更・追加・削除

オブジェクトのプロパティは、後から自由に変更・追加・削除できます。

変更

user.age = 30;

追加

user.email = "taro@example.com";

削除

delete user.isMember;

オブジェクトのループ処理

オブジェクトのプロパティをすべて処理したい場合は、for...in 文を使います。

for (let key in user) {
  console.log(key + ": " + user[key]);
}

Object.keys()Object.entries() を使う方法もあります。

ネストされたオブジェクト

オブジェクトの中に、さらにオブジェクトを含めることができます。これを「ネストされたオブジェクト」と呼びます。

const book = {
  title: "JavaScript入門",
  author: {
    name: "Sato",
    age: 40
  }
};

console.log(book.author.name); // "Sato"

メソッド(関数をプロパティに持つ)

オブジェクトの中に関数を持たせることもできます。これを「メソッド」と呼びます。

const dog = {
  name: "Pochi",
  bark: function() {
    console.log("ワンワン");
  }
};

dog.bark(); // "ワンワン"

まとめ

  • オブジェクトは「キーと値」の組み合わせでデータを管理する構造
  • user.nameuser["age"] で値にアクセス
  • 後からプロパティの変更・追加・削除が可能
  • for...in でループ処理ができる
  • 関数をプロパティとして持たせることもできる(メソッド)

オブジェクトは、JavaScriptにおけるデータの基本的な構造です。
実際のアプリケーション開発でも頻繁に使われるので、しっかりと使い方を身につけておきましょう。

 

JavaScript関連用語集

−−−−−  JavaScript  −−−−−

JavaScriptの変数とは?初心者にもわかりやすく解説

JavaScriptの定数(const)とは?使い方と注意点をわかりやすく解説

JavaScriptの関数とは?基本から使い方まで丁寧に解説

JavaScriptの配列とは?基本の使い方から応用まで解説

JavaScriptのオブジェクトとは?基本の使い方から応用まで解説

JavaScriptのプロパティとは?基本から使い方までわかりやすく解説

JavaScriptのメソッドとは?基本と使い方をわかりやすく解説

JavaScriptのスコープとは?基礎からしっかり理解しよう

JavaScriptのクロージャとは?仕組みと使い方をわかりやすく解説

JavaScriptのコールバック関数とは?仕組みと使い方をやさしく解説

JavaScriptの非同期処理とは?基本から使い方までわかりやすく解説

JavaScriptのPromiseとは?非同期処理をわかりやすく管理する方法

JavaScriptのasync / awaitとは?Promiseをもっと簡単に書く方法

JavaScriptのイベントとは?クリックや入力に反応する仕組みを解説

JavaScriptのイベントリスナーとは?イベント処理の基本を解説

JavaScriptのDOMとは?Webページを操作する基本をやさしく解説

JavaScriptのJSONとは?データのやりとりに使われる基本形式を解説

JavaScriptのデータ型とは?基本の種類と使い方をわかりやすく解説

JavaScriptの型変換とは?自動変換と明示的変換の仕組みを解説

JavaScriptのnullとは?「何もない」を明示する特別な値

JavaScriptのundefinedとは?「未定義」を表す特別な値を理解しよう

JavaScriptのNaNとは?数値にならないことを示す特別な値を解説

JavaScriptのループとは?繰り返し処理の基本と使い方を解説

JavaScriptのif文とは?条件に応じた処理の書き方を解説

JavaScriptのswitch文とは?複数の条件分岐をすっきり書く方法

JavaScriptのクラスとは?オブジェクト指向の基本構文を解説

JavaScriptの継承とは?クラスの機能を引き継ぐ仕組みを解説

JavaScriptのモジュールとは?ファイル分割と再利用を可能にする仕組みを解説

JavaScriptの即時関数(IIFE)とは?その仕組みと使いどころを解説

JavaScriptのグローバル汚染を防ぐ方法とは?安全なスクリプト管理の基本