Skip to content

Commit 1e68809

Browse files
RRRyomaRRRyoma
authored
Merge pull request #510 from ut-code/object_renewal
オブジェクトの教材　再ぷるりく
2 parents ddea37d + 6e89649 commit 1e68809

File tree

6 files changed

+123
-13
lines changed

6 files changed

+123
-13
lines changed

‎docs/1-trial-session/11-object/_samples/add-and-view-Japanese-score/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!doctype html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script src="./script.js"></script>
9+
</body>
10+
</html>

‎docs/1-trial-session/11-object/_samples/add-and-view-Japanese-score/script.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const tanaka = {
2+
name: "田中",
3+
scores: { math: 90, science: 80 },
4+
};
5+
tanaka.scores.japanese = 50;
6+
document.write(tanaka.scores.japanese);

‎docs/1-trial-session/11-object/_samples/view-math-score/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!doctype html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script src="./script.js"></script>
9+
</body>
10+
</html>

‎docs/1-trial-session/11-object/_samples/view-math-score/script.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const tanaka = {
2+
name: "田中",
3+
scores: { math: 90, science: 80 },
4+
};
5+
document.write(tanaka.scores.math);

‎docs/1-trial-session/11-object/array-properties.png‎

63.9 KB
Loading

‎docs/1-trial-session/11-object/index.md‎

Lines changed: 92 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,24 @@ title: オブジェクト
66

77
JavaScript で扱うことのできる<Term type="javascriptValue">値</Term>の種類として、これまで<Term type="javascriptNumber">数値</Term>、<Term type="javascriptString">文字列</Term>、<Term type="javascriptBoolean">論理値</Term>を扱ってきました。<Term strong type="javascriptObject">オブジェクト</Term>もまた、<Term type="javascript">JavaScript</Term> の<Term type="javascriptValue">値</Term>ですが、今まで扱ってきた<Term type="javascriptValue">値</Term>とは少し性質が異なります。
88

9-
<Term type="javascriptObject">オブジェクト</Term>を用いると、これまで扱ってきたような単純な<Term type="javascriptValue">値</Term>を複数まとめて一つの<Term type="javascriptValue">値</Term>として扱うことができます。
9+
<p><Term type="javascriptObject">オブジェクト</Term>を用いると、これまで扱ってきたような単純な<Term type="javascriptValue">値</Term>を複数まとめて一つの<Term type="javascriptValue">値</Term>として扱うことができます。</p>
1010

11-
今まで扱ってきたような「それ以上分解できない」<Term type="javascriptValue">値</Term>のことを<Term strong type="javascriptPrimitive">プリミティブ</Term>といい、<Term type="javascriptPrimitive">プリミティブ</Term>でない値はすべて<Term type="javascriptObject">オブジェクト</Term>です。
11+
## <Term type="javascriptObject">オブジェクト</Term>の作成
1212

13-
![値の種類・オブジェクト付き](./value-types-with-object.drawio.svg)
14-
15-
:::tip ほかの言語の経験者へ
16-
17-
JavaScript の<Term type="javascriptObject">オブジェクト</Term>は、ほかの言語でいう**辞書**や**連想配列**、**Map** に近いものです。ただ、こういったものと比べ、JavaScript の<Term type="javascriptObject">オブジェクト</Term>は使用頻度が非常に高いです。
18-
19-
:::
20-
21-
## オブジェクトの作成
22-
23-
<Term type="javascriptObject">オブジェクト</Term>は、複数の<Term strong type="javascriptProperty" strong>プロパティ</Term>と呼ばれる<Term type="javascriptValue">値</Term>を持ちます。<Term type="javascriptProperty">プロパティ</Term>にはそれぞれ名前がついています。<Term type="javascriptProperty">プロパティ</Term>の名前には文字列しか指定できませんが、<Term type="javascriptProperty">プロパティ</Term>の<Term type="javascriptValue">値</Term>としては <Term type="javascript">JavaScript</Term> で使用できるすべての<Term type="javascriptValue">値</Term>が使用可能です。
13+
<p><Term type="javascriptObject">オブジェクト</Term>は、複数の<Term strong type="javascriptProperty" strong>プロパティ</Term>と呼ばれる<Term type="javascriptValue">値</Term>を持ちます。<Term type="javascriptProperty">プロパティ</Term>にはそれぞれ名前がついています。<Term type="javascriptProperty">プロパティ</Term>の名前には文字列しか指定できませんが、<Term type="javascriptProperty">プロパティ</Term>の<Term type="javascriptValue">値</Term>としては <Term type="javascript">JavaScript</Term> で使用できるすべての<Term type="javascriptValue">値</Term>が使用可能です。</p>
2414

2515
```javascript
2616
const person = { name: "田中", age: 18 };
2717
```
2818

2919
![プロパティ](properties.png)
3020

21+
:::tip ほかの言語の経験者へ
22+
23+
JavaScript の<Term type="javascriptObject">オブジェクト</Term>は、ほかの言語でいう**辞書**や**連想配列**、**Map** に近いものです。ただ、こういったものと比べ、JavaScript の<Term type="javascriptObject">オブジェクト</Term>は使用頻度が非常に高いです。
24+
25+
:::
26+
3127
<p><Term type="javascriptObject">オブジェクト</Term>の中に<Term type="javascriptObject">オブジェクト</Term>を入れることもできます。</p>
3228

3329
```javascript
@@ -52,8 +48,91 @@ person.age += 1;
5248
document.write(person.age);
5349
```
5450

51+
:::tip プロパティの追加
52+
プロパティは取得や変更のほかに、追加もできます。
53+
54+
```javascript
55+
person.favoriteFood = "餃子";
56+
document.write(person.favoriteFood); // 餃子
57+
```
58+
59+
:::
60+
61+
:::note <Term type="javascriptObject">オブジェクト</Term>とプリミティブ
62+
63+
この章よりも前に扱ってきたような「それ以上分解できない」<Term type="javascriptValue">値</Term>のことを<Term strong type="javascriptPrimitive">プリミティブ</Term>といい、<Term type="javascriptPrimitive">プリミティブ</Term>でない値はすべて<Term type="javascriptObject">オブジェクト</Term>です。
64+
65+
![値の種類](./value-types-with-object.drawio.svg)
66+
67+
:::
68+
69+
## 配列とオブジェクト
70+
71+
上で説明したように、配列はプリミティブではないのでオブジェクトの一種です。JavaScript のオブジェクトとは、プロパティ名とプロパティ値の組の集合でした。
72+
73+
配列もこの原則に従って動作しています。次の図に示すように、配列とは、各要素のインデックスがプロパティ名になっているオブジェクトだと考えることができるのです。
74+
75+
![配列のプロパティ](./array-properties.png)
76+
77+
逆に、オブジェクトも配列と同じように使用することができます。この記法を**ブラケット記法**と呼び、プログラムの動作に応じて使用したいプロパティを切り替えるのに役立ちます。
78+
79+
```javascript
80+
const subject = "math"; // ここを変えると表示される教科が変わる
81+
const scores = { math: 90, science: 80 };
82+
document.write(`${subject} の点数は ${scores[subject]} です。`); // math の点数は 90 です。
83+
```
84+
85+
:::tip オブジェクトのプロパティ名
86+
87+
オブジェクトのプロパティ名に数値は使用できません。それではなぜ、配列の場合は `studentNames[2]` のように記述できるのでしょうか。
88+
89+
答えは単純で、文字列に変換されているからです。このため、次のプログラムは全く問題なく動作します。
90+
91+
```javascript
92+
const studentNames = ["田中", "佐藤", "鈴木"];
93+
document.write(studentNames["0"]); // 田中
94+
```
95+
96+
:::
97+
5598
## 課題
5699

100+
### 初級課題
101+
102+
田中さんを表すオブジェクトを定義します。
103+
104+
```javascript
105+
const tanaka = {
106+
name: "田中",
107+
scores: { math: 90, science: 80 },
108+
};
109+
```
110+
111+
1. 田中さんの算数の点数を表示してみましょう。
112+
113+
2. `scores` に国語の点数を追加して、表示してみましょう。
114+
115+
<Answer title="成績表示">
116+
117+
```javascript title="1の解答"
118+
document.write(tanaka.scores.math);
119+
```
120+
121+
<ViewSource url={import.meta.url} path="_samples/view-math-score" />
122+
123+
```javascript title="2の解答"
124+
tanaka.scores.japanese = 50;
125+
document.write(tanaka.scores.japanese);
126+
```
127+
128+
<ViewSource url={import.meta.url} path="_samples/add-and-view-Japanese-score" />
129+
130+
2では、プロパティを自分で追加しています。
131+
132+
</Answer>
133+
134+
### 中級課題
135+
57136
<p><Term type="javascriptObject">オブジェクト</Term>も<Term type="javascriptValue">値</Term>の一種なので、<Term type="javascriptFunction">関数</Term>の<Term type="javascriptParameter">引数</Term>や<Term type="javascriptReturnValue">戻り値</Term>として使用できます。</p>
58137

59138
`age` <Term type="javascriptProperty">プロパティ</Term>に 1 を加えた<Term type="javascriptObject">オブジェクト</Term>を返す関数 `incrementAge` を定義してみましょう。

0 commit comments

Comments
 (0)