Skip to content

Commit 696c130

Browse files
RRRyomaRRRyoma
committed
codesandbox追加(さっきのコミットに入れ忘れた)
1 parent 9f1c502 commit 696c130

File tree

5 files changed

+55
-7
lines changed

5 files changed

+55
-7
lines changed

‎docs/1-trial-session/11-object/_samples/editAndViewJapaneseScore/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/editAndViewJapaneseScore/script.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
tanaka.scores.japanese = 50;
2+
document.write(tanaka.scores.japanese);

‎docs/1-trial-session/11-object/_samples/viewMathScore/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/viewMathScore/script.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
document.write(tanaka.scores.math);

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

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,11 @@ import ViewSource from "@site/src/components/ViewSource";
1010

1111
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>とは少し性質が異なります。
1212

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

1815
## <Term type="javascriptObject">オブジェクト</Term>の作成
1916

20-
<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>が使用可能です。
17+
<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>
2118

2219
```javascript
2320
const person = { name: "田中", age: 18 };
@@ -74,6 +71,35 @@ document.write(person.favoriteFood);
7471

7572
:::
7673

74+
## 配列とオブジェクト
75+
76+
上で説明したように、配列はプリミティブではないのでオブジェクトの一種です。JavaScript のオブジェクトとは、プロパティ名とプロパティ値の組み合わせでした。
77+
78+
配列もこの原則に従って動作しています。次の図に示すように、配列とは、各要素のインデックスがプロパティ名になっているオブジェクトだと考えることができるのです。
79+
80+
![配列のプロパティ](./array-properties.png)
81+
82+
逆に、オブジェクトも配列と同じように使用することができます。この記法を**ブラケット記法**と呼び、プログラムの動作に応じて使用したいプロパティを切り替えるのに役立ちます。
83+
84+
```javascript
85+
const subject = "math"; // ここを変えると表示される教科が変わる
86+
const scores = { math: 90, science: 80 };
87+
document.write(`${subject} の点数は ${scores[subject]} です。`); // math の点数は 90 です。
88+
```
89+
90+
:::tip オブジェクトのプロパティ名
91+
92+
オブジェクトのプロパティ名に数値は使用できません。それではなぜ、配列の場合は `studentNames[2]` のように記述できるのでしょうか。
93+
94+
答えは単純で、文字列に変換されているからです。このため、次のプログラムは全く問題なく動作します。
95+
96+
```javascript
97+
const studentNames = ["田中", "佐藤", "鈴木"];
98+
document.write(studentNames["0"]); // 田中
99+
```
100+
101+
:::
102+
77103
## 課題
78104

79105
### 初級課題
@@ -106,7 +132,6 @@ document.write(tanaka.scores.japanese);
106132

107133
<ViewSource url={import.meta.url} path="_samples/editAndViewJapaneseScore" />
108134

109-
110135
2はプロパティの追加を利用しています。
111136

112137
</Answer>
@@ -142,4 +167,4 @@ document.write(nextYearTanaka.age);
142167

143168
<ViewSource url={import.meta.url} path="_samples/incrementAge" />
144169

145-
</Answer>
170+
</Answer>

0 commit comments

Comments
 (0)