Skip to content

Commit 71b6fe4

Browse files
nakatermnakaterm
authored
論理値の章に簡単な説明を追加 (#718)
1 parent b1326b6 commit 71b6fe4

File tree

3 files changed

+93
-18
lines changed

3 files changed

+93
-18
lines changed

‎docs/1-trial-session/06-boolean/_samples/quiz-show/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/06-boolean/_samples/quiz-show/script.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
const tanakaScore = 120;
2+
const satoScore = 80;
3+
const isTanakaWinner = tanakaScore >= 100 && tanakaScore - satoScore >= 20;
4+
document.write(isTanakaWinner); // true

‎docs/1-trial-session/06-boolean/index.mdx‎

Lines changed: 79 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,48 +19,69 @@ JavaScript ではこの他に、<Term>**論理値**</Term>と呼ばれる、「
1919
<Term>論理値</Term>に対して適用できる<Term>演算子</Term>が存在します。
2020

2121
```javascript
22-
const isMonsterBig = true;
23-
const isMonsterSmall = !true; // false
24-
const isHunterStrong = false;
25-
const shouldEscape = !isHunterStrong && isMonsterBig; // true
26-
const shouldFight = isHunterStrong || isMonsterSmall; // false
22+
document.write(true); // true
23+
document.write(!false); // true
24+
document.write(true && false); // false
25+
document.write(true || false); // true
2726
```
2827

29-
詳細は以下の通りです。`!` のみが作用する対象を 1 つしかとらないことに注意してください。
28+
各<Term>演算子</Term>の意味は次の通りです。`!` のみが作用する対象を 1 つしかとらないことに注意してください。
3029

3130
| 演算子 | 意味 | 詳細 |
3231
| ------ | ---------- | ------------------------------------------------------------------- |
3332
| `!` | ～ではない | `true` ならば `false`、`false` ならば `true` |
3433
| `&&` | かつ | 両方 `true` ならば `true`、どちらか 1 つでも `false` ならば `false` |
3534
| `\|\|` | または | 両方 `false` ならば `false`、どちらか 1 つでも `true` ならば `true` |
3635

36+
具体的な使用例を考えてみましょう。
37+
38+
モンスターが大きいかどうかを表す<Term>変数</Term> `isMonsterBig` と、ハンターが強いかどうかを表す<Term>変数</Term> `isHunterStrong` が用意されています。このとき、ハンターがモンスターと戦うべきかどうかを表す<Term>変数</Term> `shouldFight` を作りたいとします。ハンターは自分が強いときかモンスターが小さいときに戦うべきだとしたら、<Term>変数</Term> `shouldFight` は次のようになるでしょう。
39+
40+
```javascript
41+
const isMonsterBig = true;
42+
const isHunterStrong = false;
43+
const shouldFight = isHunterStrong || !isMonsterBig; // false
44+
```
45+
3746
## 比較<Term>演算子</Term>
3847

3948
比較<Term>演算子</Term>は、複数の<Term>値</Term>を比較して、単一の<Term>論理値</Term>を得ます。
4049

41-
```javascript
42-
const age = 15;
43-
const height = 155;
44-
const isFourteen = age === 14; // false
45-
const isNotFourteen = age !== 14; // true
46-
const isChild = age < 20; // true
47-
const canRideRollerCoasters = age >= 10 && height >= 140; // true
50+
年齢を判定するプログラムを考えましょう。
51+
52+
```javascript showLineNumbers
53+
const age = 14;
54+
document.write(age === 15); // false
55+
document.write(age === 14); // true
4856
```
4957

50-
各<Term>演算子</Term>の詳細は、次の通りです。
58+
`===` は左辺と右辺が等しいかどうか判定する比較<Term>演算子</Term>です。
59+
2 行目では `age` と 15 とは等しくないので `false` が、3 行目では `age` と 14 とは等しいので `true` が表示されます。
60+
61+
各<Term>演算子</Term>の意味は次の通りです。
5162

5263
| 演算子 | 意味 | 詳細 |
5364
| ------ | ---------- | ------------------------------- |
54-
| `===` | 等しい | |
55-
| `!==` | 等しくない | |
65+
| `===` | 等しい | 左辺と右辺が等しければ `true` |
66+
| `!==` | 等しくない | 左辺と右辺が等しければ `false` |
5667
| `<` | 小なり | 左辺が右辺より小さければ `true` |
5768
| `<=` | 以下 | 左辺が右辺以下ならば `true` |
5869
| `>` | 大なり | 左辺が右辺より大きければ `true` |
5970
| `>=` | 以上 | 左辺が右辺以上ならば `true` |
6071

61-
`&&` や `||` よりも比較<Term>演算子</Term>の方が<Term type="javascriptOperatorPriority">優先順位</Term>が高いため、最後の例のように複数の条件を「かつ」「または」などで組み合わせることは容易です。
72+
さらに具体的な使用例を考えてみましょう。
6273

63-
## 演習
74+
ジェットコースターに乗れるかどうかを表す変数 `canRideRollerCoasters` を考えます。年齢を表す変数 `age` と身長を表す変数 `height` が与えられたとして、10 歳以上かつ身長が 120cm 以上でないと乗れないとしたら以下のようになるでしょう。
75+
76+
```javascript
77+
const age = 15;
78+
const height = 155;
79+
const canRideRollerCoasters = age >= 10 && height >= 120; // true
80+
```
81+
82+
`&&` や `||` よりも比較<Term>演算子</Term>の方が<Term type="javascriptOperatorPriority">優先順位</Term>が高いため、複数の条件を「かつ」「または」などで組み合わせることは容易です。
83+
84+
:::info
6485

6586
次のコードは何を表示するでしょうか。そしてそれはなぜでしょうか。
6687

@@ -77,3 +98,43 @@ document.write(takaoHeight = everestHeight);
7798

7899
- JavaScript で、数値と論理値に比較<Term>演算子</Term>を適用すると、`true` は `1` として、`false` は `0` として比較されます。
79100
- `=` は代入演算子です。代入<Term>演算子</Term>の<Term>式</Term>が<Term>評価</Term>されると、右辺の<Term>値</Term>になります。
101+
102+
:::
103+
104+
## 演習
105+
106+
クイズ番組で田中さんと佐藤さんが戦っています。
107+
田中さんの点数が `tanakaScore` で、佐藤さんの点数が `satoScore` で用意されています。
108+
109+
点数が 100 点以上で、かつ相手より 20 点以上高い点数の場合に勝ちとします。
110+
田中さんが勝ちかどうかを表す変数 `isTanakaWinner` を作成してください。
111+
112+
```javascript
113+
const tanakaScore = 120;
114+
const satoScore = 80;
115+
const isTanakaWinner = /* ここに式を書いてください */;
116+
document.write(isTanakaWinner); // true
117+
```
118+
119+
:::tip
120+
121+
`+`, `-`, `*`, `/` などの算術演算子は、比較演算子よりも<Term type="javascriptOperatorPriority">優先順位</Term>が高いです。
122+
123+
```javascript
124+
const isBig = 10 + 5 > 10 - 3; // 15 > 7 なので true
125+
```
126+
127+
:::
128+
129+
<Answer title="クイズ番組">
130+
131+
```javascript
132+
const tanakaScore = 120;
133+
const satoScore = 80;
134+
const isTanakaWinner = tanakaScore >= 100 && tanakaScore - satoScore >= 20;
135+
document.write(isTanakaWinner); // true
136+
```
137+
138+
<ViewSource url={import.meta.url} path="_samples/quiz-show" />
139+
140+
</Answer>

0 commit comments

Comments
 (0)