JavaScript
PR

【JavaScript 2-4】オブジェクトの入口｜関連するデータをまとめて扱う（初心者向け）

JS2-4.webp
toshi
記事内に商品プロモーションを含む場合があります

※この記事は JavaScript 2-4「オブジェクトの入口」です。
ここでは、関連するデータをひとまとまりにする
「オブジェクト」を見ていきます。
最初は「名前・年代・好きなことを1つの箱にまとめる」くらいで大丈夫です。

前回は、配列を使って
複数のデータを順番にまとめる方法を見ました。

今回はその次として、
**関連するデータをまとめる方法**
を見ていきます。

たとえば、プロフィール情報として、

– 名前
– 年代
– 好きなこと
– 学習中の内容

を扱いたい時、
それぞれを別々の変数にしても書けます。

ただ、これらは全部
**1人のプロフィールに関係する情報**
です。

こういう時に使いやすいのが、
**オブジェクト**です。

Q
「オブジェクトは“関連するデータをまとめた箱”です」

最初はこの理解で大丈夫です。

・関連するデータをまとめられる
・{ } の中に書く
・name や ageGroup のような名前をつけられる
・profile.name のように取り出せる

たとえば、

const profile = {
name: “toshi”,
ageGroup: “40代”,
favorite: “HTMLとCSS”
};

と書くと、
profile という箱の中に、
名前・年代・好きなことをまとめて入れたイメージです。

目次
  1. 今回のゴール
  2. 関連するデータをまとめる箱
  3. 順番で見るか、名前で見るか
  4. 名前と値をセットで書く
  5. profile の中身を取り出す流れ
  6. profile.name のように取り出します
  7. 関数にまとめると、表示処理が見やすくなります
  8. 配列とオブジェクトは
    組み合わせることもあります
  9. console.log でオブジェクト
    の中身を確認できます
  10. よくあるつまずき
  11. 今回のまとめ
  12. 今日のゴール確認
  13. JavaScript 3-1へ
  14. JavaScript 2-4
ここまでできればOK

今回のゴール

  • オブジェクトは関連するデータをまとめるものだと分かる
  • { } の中にデータを書く形が分かる
  • プロパティという考え方に触れられる
  • profile.name のように値を取り出せる
  • オブジェクトの中身を画面に表示できる
名前・年代・好きなことを1つに整理する

関連するデータをまとめる箱

オブジェクトは、
関連するデータを1つにまとめて扱うためのものです。

たとえば、プロフィール情報をまとめたい時は、
次のように書けます。

const profile = {
  name: "toshi",
  ageGroup: "40代",
  favorite: "HTMLとCSS"
};
JavaScript

この場合、
profile という名前の中に、

– name
– ageGroup
– favorite

という情報がまとまって入っています。

ひとまず、
**オブジェクト = 関連する情報をまとめた箱**
と考えると分かりやすいです。

配列は順番、オブジェクトは名前つきで扱う

順番で見るか、名前で見るか

書き方向いているもの
配列順番に並んだデータをまとめる
オブジェクト関連する情報を名前つきでまとめる

前回の配列は、次のような形でした。

const topics = ["HTML", "CSS", "JavaScript", "PHP"];
JavaScript

これは、学習項目が順番に並んでいるイメージです。

一方で、オブジェクトは次のような形です。

const profile = {
  name: "toshi",
  ageGroup: "40代",
  favorite: "HTMLとCSS"
};
JavaScript

これは、1人のプロフィール情報をまとめているイメージです。

配列は「順番で見る」、
オブジェクトは「名前で見る」
と考えると、最初は整理しやすいです。

name: “toshi” のように情報をまとめる

名前と値をセットで書く

部分ざっくりした意味
const profileオブジェクトに名前をつけている
{ }オブジェクトを作るための箱
nameデータの名前
“toshi”name に入っている値
profile.namename の値を取り出している

オブジェクトでは、
データの名前と値をセットで書きます。

name: "toshi"
JavaScript

この `name` のような部分を、
最初は **データの名前** と見れば大丈夫です。

もう少しJavaScriptらしく言うと、
このような名前つきの情報を **プロパティ** と呼びます。

今回は、オブジェクトに入れたプロフィール情報を、
ボタンを押して画面に表示するページを作ります。

フォルダ構成は、前回までと同じように考えると分かりやすいです。

javascript-02-04-example/

├─ index.html

├─ css/

│ 　└─ style.css
└─ js/
 
　　└─ script.js
TeX

まずは index.html をこの形で作ります。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JavaScript 2-4</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <main class="page">
    <section class="intro-card">
      <p class="label">JavaScript 2-4 の一例</p>
      <h1>オブジェクトの入口</h1>
      <p class="lead">オブジェクトにまとめたプロフィール情報を、画面に表示する練習です。</p>
      <p id="nameText" class="message">名前が表示されます。</p>
      <p id="detailText" class="message">詳細が表示されます。</p>
      <p id="skillText" class="message">学習中の内容が表示されます。</p>
      <button id="showButton" class="button" type="button">プロフィールを表示する</button>
    </section>
  </main>
  <script src="js/script.js"></script>
</body>

</html>
HTML

次に、cssフォルダの中に style.css を作って、下のコードを書きます。

body {
  background-color: #f3f4f6;
  margin: 0;
  padding: 24px;
  color: #333333;
  line-height: 1.8;
  font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

.page {
  max-width: 760px;
  margin: 24px auto 0;
}

.intro-card {
  background-color: #ffffff;
  padding: 24px;
  border: 1px solid #d1d5db;
  box-sizing: border-box;
}

.label {
  color: #92400e;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 8px;
}

h1 {
  color: #111827;
  font-size: 32px;
  margin-top: 0;
  margin-bottom: 16px;
}

.lead {
  margin-top: 0;
  margin-bottom: 24px;
}

.message {
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  padding: 16px;
  margin-bottom: 16px;
}

.button {
  background-color: #eab308;
  color: #111827;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
}

.button:hover {
  background-color: #ca8a04;
}
CSS

最後に、jsフォルダの中に script.js を作って、下のコードを書きます。

const profile = {
  name: "toshi",
  ageGroup: "40代",
  favorite: "HTMLとCSS",
  learning: "JavaScript"
};

const nameText = document.getElementById("nameText");
const detailText = document.getElementById("detailText");
const skillText = document.getElementById("skillText");
const showButton = document.getElementById("showButton");

function showProfile() {
  nameText.textContent = "名前：" + profile.name;
  detailText.textContent = "年代：" + profile.ageGroup + " / 好きなこと：" + profile.favorite;
  skillText.textContent = "現在学習中：" + profile.learning;
}

showButton.addEventListener("click", function() {
  showProfile();
});
JavaScript
toshi
toshi

今回は
“profile という箱から、
name や ageGroup を取り出して表示する”
ところがポイントです。

どこを見ればいい？

profile の中身を取り出す流れ

見る場所起きていること
const profileプロフィール情報を1つにまとめている
name: “toshi”name という名前で値を持っている
profile.nameprofile の中の name を取り出している
showProfileプロフィールを表示する処理をまとめている
addEventListenerボタンを押した時に関数を呼び出している

今回のコードでは、
オブジェクト・関数・クリック処理を組み合わせています。

ただし、主役はオブジェクトです。

まずは、
profile の中にある情報を、
profile.name や profile.ageGroup のように取り出しているところを見てください。

ドットで値を取り出す

profile.name のように取り出します

オブジェクトの中の値は、
次のように取り出せます。

profile.name
JavaScript

今回の profile は、次の形でした。

const profile = {
  name: "toshi",
  ageGroup: "40代",
  favorite: "HTMLとCSS",
  learning: "JavaScript"
};
JavaScript

そのため、

profile.name
JavaScript

は `”toshi”` を表します。

書き方取り出される値
profile.nametoshi
profile.ageGroup40代
profile.favoriteHTMLとCSS
profile.learningJavaScript

profile.name のように、
`.` を使って値を取り出す書き方を、
**ドット記法** と呼びます。

名前は少し難しそうですが、
最初はこう見れば大丈夫です。

profile.name
JavaScript

これは、

**profile の中の name を取り出す**

という意味です。

最初は
「ドットの後ろに、取り出したいデータ名を書く」
と見ればOKです。

showProfile() でプロフィールを表示する

関数にまとめると、表示処理が見やすくなります

プロフィールを表示する処理は、
showProfile という関数にまとめています。

function showProfile() {
  nameText.textContent = "名前：" + profile.name;
  detailText.textContent = "年代：" + profile.ageGroup + " / 好きなこと：" + profile.favorite;
  skillText.textContent = "現在学習中：" + profile.learning;
}
JavaScript

ボタンが押された時は、
この関数を呼び出しています。

showButton.addEventListener("click", function() {
  showProfile();
});
JavaScript

前回の関数の考え方を、
今回も使っている形です。

複数の情報をより整理して扱う入口

配列とオブジェクトは
組み合わせることもあります

今回はシンプルにするために、
文字だけをオブジェクトに入れています。

ただ、実際にはオブジェクトの中に配列を入れることもあります。

たとえば、

const profile = {
  name: "toshi",
  skills: ["HTML", "CSS", "JavaScript"]
};
JavaScript

のような形です。

ただし、今回は入口なので、
まずは name や favorite のような文字を取り出せれば十分です。

toshi
toshi

配列とオブジェクトは、
慣れてくると一緒に使う場面が増えます。
今は「そういう組み合わせもある」くらいでOKです。

少しだけ変えてみる（練習）
  • profile.name の値を変えてみる
  • profile.favorite の値を変えてみる
  • learning を “PHP” に変えてみる
  • hobby: “音楽” のような情報を1つ追加してみる
  • 追加した hobby を画面に表示してみる

今回の練習では、
オブジェクトの中身を変えると、
画面に表示される内容も変わることを確認します。

特に、
データを追加した時は、
表示する側も追加する必要がある点を見てください。

画面に出ない情報も確認できる

console.log でオブジェクト
の中身を確認できます

オブジェクトの中身を確認したい時は、
console.log を使えます。

console.log(profile);
console.log(profile.name);
console.log(profile.favorite);
JavaScript

開発者ツールのコンソールを見ると、
profile の中身や、取り出した値を確認できます。

オブジェクトは、
画面だけ見ても中身が分かりにくいことがあります。
console.log で中身を見ると、かなり確認しやすくなります。

ここだけ確認

よくあるつまずき

Q
「つまずき①：カンマを書き忘れる」

オブジェクトでは、データとデータの間にカンマを書きます。

const profile = {
  name: "toshi",
  ageGroup: "40代",
  favorite: "HTMLとCSS"
};
JavaScript

name、ageGroup、favorite の間にカンマがあります。

カンマが抜けると、エラーになることがあります。

Q
「つまずき②：profile.name が undefined になる」

まずは、プロパティ名が合っているかを確認します。

const profile = {
  name: "toshi"
};

console.log(profile.name);
JavaScript

この場合は profile.name で取り出せます。

もし profile.userName のように、
存在しない名前を書いていると undefined になることがあります。

Q
「つまずき③：文字を引用符で囲み忘れる」

文字を値として入れる時は、” ” で囲みます。

name: "toshi"
JavaScript

もし、

name: toshi
JavaScript

のように書くと、JavaScriptが文字として読めず、エラーになることがあります。

Q
「つまずき④：追加した情報が画面に出ない」

オブジェクトに情報を追加しただけでは、画面には表示されません。

たとえば、

hobby: "音楽"
JavaScript

を追加したら、表示する処理にも追加する必要があります。

skillText.textContent = "趣味：" + profile.hobby;
JavaScript

データを追加する場所と、表示する場所を分けて確認しましょう。

ここだけ押さえればOK

今回のまとめ

  • オブジェクトは関連するデータをまとめるためのもの
  • オブジェクトは { } の中に書く
  • name: “toshi” のように、名前と値をセットで書く
  • profile.name のようにドットで値を取り出せる
  • console.log を使うと、オブジェクトの中身を確認しやすい
できた判定

今日のゴール確認

ここまでできたらOKです。

  • オブジェクトの入口が分かった
  • 関連するデータを1つにまとめられた
  • profile.name のように値を取り出せた
  • オブジェクトの中身を画面に表示できた
  • 次の JavaScript 3-1 に進む準備ができた
次に読む

JavaScript 3-1へ

今回は、オブジェクトを使って関連するデータをまとめる流れを見ました。

次は、
JavaScriptでHTMLを書き換える流れをもう少し整理するために、
DOM操作の入口へ進みます。

これまで使ってきた getElementById や textContent を、
改めて「HTMLを操作する流れ」として見直していきます。

次へ：JavaScript 3-1 DOM操作の入口へ進む
一例zipについて

JavaScript 2-4

この記事の内容は、JavaScript 2-4 の一例として zip ファイルでも用意できます。

最初はそのまま開いて動きを確認し、
そのあとでオブジェクトの中身や表示される文章を少し変えてみると進めやすいです。

“正解を暗記するもの”ではなく、
「こういう形でも作れる」という確認用として使ってください。

javascript-02-04-example.zip
└─ javascript-02-04-example/
├─ index.html
├─ css/
│ 　└─ style.css
└─ js/
　　└─ script.js

javascript-02-04-exampleダウンロード
PR：最初の1冊（必要な方だけ）

PR：JavaScriptを進めるための参考（必要な方だけ）
JavaScriptは、条件分岐・関数・DOM操作あたりで少しつまずきやすいので、
必要な方だけ参考を置いておきます。
まずは記事内のコードだけでも十分進めます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

ABOUT ME
toshi
toshi
フルスタックエンジニア
InstagramContact
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました