オブジェクトを使って関連するデータをまとめよう

オブジェクトは、一つの対象に関係する値へ名前を付けてまとめる仕組みです。

今回使用するファイル構成

javascript-practice/
├── index.html
└── js/
    └── script.js

オブジェクトを作る

const article = {
  title: 'JavaScriptの歴史',
  category: 'JavaScript',
  isPublished: true,
};

titleなどの名前をプロパティ、コロンの右側をプロパティの値と呼びます。

プロパティを取得・変更する

console.log(article.title);
console.log(article.category);

article.isPublished = false;

ドットの後ろへプロパティ名を書くと値を取得・変更できます。

メソッドを定義する

オブジェクトが持つ関数をメソッドと呼びます。

const article = {
  title: 'JavaScriptの歴史',
  showTitle() {
    console.log(this.title);
  },
};

article.showTitle();

この例のthisは、メソッドを持つarticleを表します。

配列とオブジェクトを組み合わせる

const articles = [
  { title: 'JavaScriptの歴史', difficulty: '入門' },
  { title: '変数とデータ型', difficulty: '入門' },
  { title: 'DOM操作', difficulty: '基礎' },
];

articles.forEach((item) => {
  console.log(`${item.title}：${item.difficulty}`);
});

一覧は配列、各記事のまとまりはオブジェクトとして表すと、実際のデータに近い形で管理できます。

オブジェクトの値をHTMLへ表示する

<h2 id="article-title"></h2>
<p id="article-category"></p>

document.querySelector('#article-title').textContent = article.title;
document.querySelector('#article-category').textContent = article.category;

HTMLの表示先とプロパティの役割を対応させて確認してください。

まとめ

オブジェクトは、関連する値をプロパティとしてまとめます。配列と組み合わせると、複数の記事や商品などのまとまりを扱えます。

次の記事では、DOMからHTML要素を取得し、内容・クラス・属性を変更します。