作成ファイル・保存場所
js-basic フォルダに以下のファイルを作成してください。
| ファイル名 | 内容 |
|---|---|
| js-basic07.html | オブジェクト（連想配列）体験用HTMLファイル |
基本コード(HTML)は下記からコピー
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JS Practice 07</title> </head> <body> <h1>オブジェクトの基本</h1> <script> </script> </body> </html>
👉 JavaScriptは <script> タグの中に直接書きましょう（内部JS）
今回のテーマ
JavaScriptでは「名前」と「値」をまとめて管理するためにオブジェクトを使います。
オブジェクトは「プロパティ」と呼ばれる「名前: 値」のペアが集まった箱のようなイメージです。
// 例: ユーザー情報をまとめるオブジェクト
let user = {
name: 'Taro', // 名前
age: 20, // 年齢
city: 'Tokyo' // 出身地
};
console.log(user);
// { name: 'Taro', age: 20, city: 'Tokyo' }
目的
- {} の中に キー: 値 を書いてオブジェクトを作れるようになる
- .（ドット記法）と []（ブラケット記法）で値を取り出せるようになる
- for…in を使って全プロパティを順番にチェックできるようになる
console.log()で結果を確認できるようになる
チェックポイント
let user = { name: 'Taro', age: 20 };のようにオブジェクトが作れているuser.nameとuser['age']の両方で値が取り出せるfor (let key in user) { … }でkeyとuser[key]が正しく表示される- console.log() の結果がイメージ通りになっている
解説ポイント
オブジェクトって何？
オブジェクトは「名前付きの箱」の集まりです。
箱の中には「キー（名前）: 値（データ）」のペアを格納します。
let user = {
name: 'Taro', // → 通常のキー（ドット記法でアクセス可能）
age: 20, // → 通常のキー（ドット記法でアクセス可能）
'city': 'Tokyo' // → クォート付きのキー（ドット記法でもアクセス可能）
};
- キー…中身を取り出すときに使うラベル（名前）
- 値…キーに紐づいたデータ
データの取り出し方
- ドット記法 キーが英数字・アンダースコアだけで構成されているときに使います。
console.log(user.name); // → 'Taro'
- ブラケット記法
- キーを文字列で指定したいとき
- キーにスペースや記号が含まれるとき
- 変数でキーを指定したいとき
console.log(user['city']); let key = 'city'; console.log(user[key]);
ドット記法 と ブラケット記法 の違い
| 書き方 | 説明 | 使用例 |
|---|---|---|
user.name | キーが直接わかっているとき（英数字のみOK） | user.age |
user['name'] | 文字列でキーを指定したいときき | user['city'] |
オブジェクトは「名前付きの箱」のイメージで、 ドット記法とブラケット記法を上手に使い分けましょう！
ドット記法が使えない場合
let user = {
'first-name': 'Taro', // ハイフンが入っている
'123city': 'Tokyo', // 数字から始まる
'好きな食べ物': '寿司' // 日本語のキー
};
console.log(user['first-name']); // OK
console.log(user['123city']); // OK
console.log(user['好きな食べ物']); // OK
console.log(user.first-name); // NG → "user.first" - "name" と解釈されてしまう
console.log(user.123city); // NG → 数字で始まるので構文エラー
console.log(user.好きな食べ物); // NG → 構文エラー
HTML/JavaScriptトレーニング
以下のHTMLファイルを作成してブラウザで開き、デベロッパーツールのコンソールで出力を確認してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JS Practice 07</title>
</head>
<body>
<h1>オブジェクトの基本</h1>
<script>
// ユーザー情報をまとめるオブジェクト
let user = {
name: 'Taro', // 通常のキー（ドット記法でアクセス可能）
age: 20, // 通常のキー
'city': 'Tokyo' // クォート付きキー（ドット記法でもアクセス可能）
};
// オブジェクト全体を確認
console.log(user);
// 実行結果:
// { name: 'Taro', age: 20, city: 'Tokyo' }
// ------------------------
// ドット記法で取り出す
// ------------------------
console.log(user.name);
// 実行結果: Taro
console.log(user.age);
// 実行結果: 20
console.log(user.city);
// 実行結果: Tokyo
// ------------------------
// ブラケット記法で取り出す
// ------------------------
console.log(user['name']);
// 実行結果: Taro
console.log(user['age']);
// 実行結果: 20
console.log(user['city']);
// 実行結果: Tokyo
</script>
</body>
</html>
補足：テンプレートリテラルでの出力もOK！
オブジェクトの値を出力するときは、テンプレートリテラルを使うと読みやすく書けます。
console.log(`名前：${user.name}`);
console.log(`年齢：${user['age']}`);
console.log(`年齢：${user.age}`); //両方OK
console.log(`出身地：${user.city}`);
テンプレートリテラルはバッククォート（`）で囲み、${} の中に変数やプロパティを入れられます。
応用トレーニング！
- 自分のプロフィール（ニックネーム、趣味、好きな食べ物など）をオブジェクトにしてみよう
- for…in を使ってすべてのプロパティを出力してみよう
解答
let profile = {
nickname: 'Mika',
hobby: '読書',
food: '寿司'
};
for (let key in profile) {
console.log(key + '：' + profile[key]);
}
// 実行結果：
// nickname：Mika
// hobby：読書
// food：寿司
for (let key in profile) を使って、キーと値のペアをコンソールに表示します。 この方法で「どんな情報が入っているか」を全部表示することができます！