Skip to content

Dateクラスの演習を書き換えました #755

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 6, 2024
Merged

Dateクラスの演習を書き換えました #755

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4510f62
Dateクラスの演習を書き換えました
kiyokaanan May 4, 2024
41eca8b
GitHubの解答を書き換えました
kiyokaanan May 4, 2024
4f53079
Merge branch 'master' into class-exercise-change
kiyokaanan May 5, 2024
4082763
指摘された点を直しました
kiyokaanan May 5, 2024
e15cafc
指摘された点を直しました（その２）
kiyokaanan May 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 0 additions & 23 deletions docs/2-browser-apps/03-class/_samples/count-down/script.js
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions ...s/03-class/_samples/count-down/index.html → ...03-class/_samples/current-time/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>カウントダウン</title>
<title>現在時刻</title>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

細かいこと言うとここら辺を他と合わせて｢〇〇の解答例｣としたかったりします。

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

これに関しては全体として方針をちゃんと決めていないのと、僕は逆にこのままの方が良いと思っているので一旦放置で良いんじゃないでしょうか。

</head>
<body>
<div id="countdown-box"></div>
<div id="current-time"></div>
<script src="./script.js"></script>
</body>
</html>
15 changes: 15 additions & 0 deletions docs/2-browser-apps/03-class/_samples/current-time/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const currentTime = document.getElementById("current-time");

function getCurrentTime() {
const now = new Date();
const currentYear = now.getFullYear();
const currentMonth = now.getMonth() + 1;
const currentDate = now.getDate();
const currentHour = now.getHours();
const currentMinute = now.getMinutes();
const currentSecond = now.getSeconds();

return `今は${currentYear}年${currentMonth}月${currentDate}日${currentHour}時${currentMinute}分${currentSecond}秒です。`;
}

currentTime.textContent = getCurrentTime();
52 changes: 16 additions & 36 deletions docs/2-browser-apps/03-class/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,7 @@ tanaka.introduceSelf(); // 私の名前は田中です。18歳です。ドイツ

`Student` クラスを継承して `SeniorStudent` クラスを作ってみましょう。`SeniorStudent` クラスのインスタンスは `researchQuestion` プロパティを持ち、`introduceSelf` メソッドを実行すると自分の名前を出力した後に自分の研究内容を紹介するようにしてみましょう。

<Answer title="学生のClassの定義">
<Answer title="高学年の学生の自己紹介">

```javascript
class Student {
Expand Down Expand Up @@ -393,50 +393,30 @@ document.write(false.toString()); // false

### `Date` クラス

ドキュメントを読み、[`Date` クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)を使って、その日の残り時間を表示してみましょう。

例:

21時25分40秒に実行されたとき、

```
今日は残り2時間34分20秒です。
```

と表示する
[`Date` クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)を使って、現在時刻を表示してみましょう。`Date` クラスのドキュメントを読んで、現在時刻を表示するのに必要なメソッドを探してみましょう。

:::tip
`Date` クラスには、時間、分、秒などを取得するためのメソッドが定義されています。
:::

<Answer title="その日の残り時間">

`Date#getTime` メソッドを使います。
<Answer title="現在時刻の表示">

```js
const countdownBox = document.getElementById("countdown-box");
```javascript
const currentTime = document.getElementById("current-time");

function getRemainingTime() {
function getCurrentTime() {
const now = new Date();
const endOfDay = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate(),
23,
59,
59,
999,
);
const remainingTime = endOfDay.getTime() - now.getTime();

const hours = Math.floor(remainingTime / (1000 * 60 * 60));
const minutes = Math.floor(remainingTime / (1000 * 60)) % 60;
const seconds = Math.floor(remainingTime / 1000) % 60;

return `今日の残り時間： ${hours}時間 ${minutes}分 ${seconds}秒です。`;
const currentYear = now.getFullYear();
const currentMonth = now.getMonth() + 1;
const currentDate = now.getDate();
const currentHour = now.getHours();
const currentMinute = now.getMinutes();
const currentSecond = now.getSeconds();

return `今は${currentYear}年${currentMonth}月${currentDate}日${currentHour}時${currentMinute}分${currentSecond}秒です。`;
}

countdownBox.textContent = getRemainingTime();
currentTime.textContent = getCurrentTime();
```

<ViewSource url={import.meta.url} path="_samples/count-down" />
Expand All @@ -451,7 +431,7 @@ countdownBox.textContent = getRemainingTime();

<Answer title="図形クラス">

```js
```javascript
class Shape {
color;
constructor(color) {
Expand Down