Skip to content

Commit 2c62af2

Browse files
aster-voidaster-void
authored
Merge pull request #563 from ut-code/replace-class-exercise
クラスの章末問題の置き換え (Nodeクラス -> 図形)
2 parents 3f1a7bd + 253abf4 commit 2c62af2

File tree

5 files changed

+187
-11
lines changed

5 files changed

+187
-11
lines changed

‎docs/2-browser-apps/03-class/_samples/count-down/index.html‎

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

‎docs/2-browser-apps/03-class/_samples/count-down/script.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const countdownBox = document.getElementById("countdown-box");
2+
3+
const now = new Date();
4+
const remainingHours = 23 - now.getHours();
5+
const remainingMinutes = 59 - now.getMinutes();
6+
const remainingSeconds = 60 - now.getSeconds();
7+
countdownBox.textContent = `今日は残り${remainingHours}時間 ${remainingMinutes}分 ${remainingSeconds}秒です。`;

‎docs/2-browser-apps/03-class/_samples/shape-class/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>Shape クラス</title>
6+
</head>
7+
<body>
8+
<script src="script.js"></script>
9+
</body>
10+
</html>

‎docs/2-browser-apps/03-class/_samples/shape-class/script.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
class Shape {
2+
color;
3+
constructor(color) {
4+
this.color = color;
5+
}
6+
}
7+
8+
class Rectangle extends Shape {
9+
height;
10+
width;
11+
constructor(color, height, width) {
12+
super(color);
13+
this.height = height;
14+
this.width = width;
15+
}
16+
calculateArea() {
17+
return this.height * this.width;
18+
}
19+
}
20+
21+
class Square extends Rectangle {
22+
constructor(color, sideLength) {
23+
super(color, sideLength, sideLength);
24+
}
25+
}
26+
27+
class Circle extends Shape {
28+
radius;
29+
constructor(color, radius) {
30+
super(color);
31+
this.radius = radius;
32+
}
33+
calculateArea() {
34+
return Math.PI * this.radius ** 2;
35+
}
36+
}

‎docs/2-browser-apps/03-class/index.mdx‎

Lines changed: 123 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -310,9 +310,11 @@ tanaka.introduceSelf();
310310

311311
</Answer>
312312

313-
## `Date` クラス
313+
## 組み込みのクラス
314314

315-
[`Date` クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)は、JavaScript に標準で用意されている、日付や時刻を扱うための<Term>クラス</Term>です。このように、JavaScript では、開発者が定義しなくても最初から使用可能な<Term>クラス</Term>が数多く用意されています。
315+
JavaScript では、開発者が定義しなくても最初から使用可能な<Term>クラス</Term>が数多く用意されています。
316+
317+
例えば、[`Date` クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)という、日付や時刻を扱うための<Term>クラス</Term>があります。
316318

317319
```javascript
318320
const myBirthDay = new Date("2014-05-06"); // Dateクラスをインスタンス化
@@ -323,6 +325,34 @@ document.write(myBirthDay.getFullYear()); // 2014
323325

324326
`getFullYear` <Term>メソッド</Term>は、年となる数値を返す<Term>メソッド</Term>です。
325327

328+
{/* prettier-ignore */}
329+
{/* TODO: 自分はこっちのほうがいいと思いますが...
330+
例えば [`Map` クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map)は、キーと値のペアを保存するオブジェクトを提供します。
331+
332+
```js
333+
const map1 = new Map();
334+
335+
map1.set("a", 1);
336+
map1.set("b", 2);
337+
map1.set("c", 3);
338+
339+
document.write(map1.get("a")); // 1
340+
341+
map1.set("a", 97);
342+
343+
document.write(map1.get("a")); // 97
344+
```
345+
346+
\*/}
347+
348+
また、DOM を利用して `div` 要素を作成または取得すると、[`HTMLDivElement` クラス](https://developer.mozilla.org/ja/docs/Web/API/HTMLDivElement)のインスタンスが得られます。
349+
350+
このクラスは [`HTMLElement` クラス](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement)を継承しており、 `HTMLElement` クラスは [`Element` クラス](https://developer.mozilla.org/ja/docs/Web/API/Element)を、`Element` クラスは [`Node` クラス](https://developer.mozilla.org/ja/docs/Web/API/Node)を継承しています。
351+
352+
![HTMLDivElementの継承関係](./html-inheritance.drawio.svg)
353+
354+
実は、[DOM の節](/docs/trial-session/dom/)で使用した textContent プロパティは、この Node クラスで定義されています。
355+
326356
:::tip[`Object` クラス]
327357

328358
JavaScript では、**全ての<Term>オブジェクト</Term>は[`Object` クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object)を自動的に継承します**。このため、全ての<Term>オブジェクト</Term>は `Object` <Term>クラス</Term>の<Term>メソッド</Term>を使用することができます。また、プリミティブな値でも、<Term>メソッド</Term>を呼び出すと自動的に<Term>オブジェクト</Term>に変換されます。
@@ -350,20 +380,102 @@ document.write(false.toString()); // false
350380

351381
:::
352382

353-
### 課題
383+
## 課題
354384

355-
{/* FIXME: 雑すぎるので修正してください。Answerタグもその時に追加してください。 */}
385+
### `Date` クラス
356386

357-
`document.getElementById` 関数で `div` 要素を取得すると、[`HTMLDivElement` クラス](https://developer.mozilla.org/ja/docs/Web/API/HTMLDivElement)のインスタンスが返されます。このクラスは [`HTMLElement` クラス](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement) を継承しており、さらに `HTMLElement` クラスは [`Element` クラス](https://developer.mozilla.org/ja/docs/Web/API/Element)を、`Element` クラスは [`Node` クラス](https://developer.mozilla.org/ja/docs/Web/API/Node)を継承しています。
387+
上で説明したように、JavaScript では開発者が定義しなくても最初から使用可能な<Term>クラス</Term>が用意されています。
358388

359-
![HTMLDivElementの継承関係](./html-inheritance.drawio.svg)
389+
[`Date` クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)は、JavaScript に標準で用意されている、日付や時刻を扱うための<Term>クラス</Term>です。
390+
391+
ドキュメントを読み、[`Date` クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)を使って、その日の残り時間を表示してみましょう。
392+
393+
例:
394+
395+
21時25分40秒に実行されたとき、
396+
397+
````
398+
399+
400+
と表示する
401+
402+
:::tip
403+
`Date` クラスには、時間、分、秒などを取得するためのメソッドが定義されています。
404+
:::
405+
406+
<Answer title="その日の残り時間">
407+
408+
`Date#getHour`、`Date#getMinutes`、`Date#getSeconds` を使います。
360409
361-
実は、[DOM](/docs/trial-session/dom/) の節で使用した `textContent` プロパティは、この `Node` クラスで定義されています。
410+
```js
411+
const countdownBox = document.getElementById("countdown-box");
412+
413+
const now = new Date();
414+
const remainingHours = 23 - now.getHours();
415+
const remainingMinutes = 59 - now.getMinutes();
416+
const remainingSeconds = 60 - now.getSeconds();
417+
countdownBox.textContent = `今日は残り${remainingHours}時間 ${remainingMinutes}分 ${remainingSeconds}秒です。`;
418+
````
419+
420+
<ViewSource url={import.meta.url} path="_samples/count-down" />
421+
422+
</Answer>
423+
424+
### 図形クラス
425+
426+
色を表す `color` プロパティと、面積を求める `getArea` メソッドを持つ `Shape` クラスを実装してみましょう。
427+
428+
そして、`Shape` クラスを継承する `Rectangle` (長方形) クラス、`Square` (正方形) クラス、`Circle` (円) クラスを実装してみましょう。
429+
430+
<Answer title="図形クラス">
431+
432+
```js
433+
class Shape {
434+
color;
435+
constructor(color) {
436+
this.color = color;
437+
}
438+
}
439+
440+
class Rectangle extends Shape {
441+
height;
442+
width;
443+
constructor(color, height, width) {
444+
super(color);
445+
this.height = height;
446+
this.width = width;
447+
}
448+
calculateArea() {
449+
return this.height * this.width;
450+
}
451+
}
452+
453+
class Square extends Rectangle {
454+
constructor(color, sideLength) {
455+
super(color, sideLength, sideLength);
456+
}
457+
}
458+
459+
class Circle extends Shape {
460+
radius;
461+
constructor(color, radius) {
462+
super(color);
463+
this.radius = radius;
464+
}
465+
calculateArea() {
466+
return Math.PI * this.radius ** 2;
467+
}
468+
}
469+
```
470+
471+
<ViewSource url={import.meta.url} path="_samples/shape-class" />
472+
473+
</Answer>
362474

363-
`HTMLDivElement` クラスを自分でインスタンス化し、`textContent` プロパティに適当な値を代入して、`document.body.appendChild` 関数を用いて、作成した `div` 要素を `body` 要素の中に追加しましょう。
475+
## 思考問題
364476

365-
※ `HTMLDivElement` クラスをインスタンス化する際には `new HTMLDivElement` ではなく `document.createElement("div")` とします。
477+
### 点と図形
366478

367-
(発展) `document.body` は何のクラスのインスタンスなのでしょうか。`appendChild` メソッドはどのクラスに定義されているのでしょうか。
479+
点 (`Point`) クラスを実装します。`Point` クラスは `Shape` クラスを継承するべきでしょうか？
368480

369-
<ViewSource url={import.meta.url} path="_samples/HTMLDivElement" />
481+
また、その理由を考えてみましょう。

0 commit comments

Comments
 (0)