diff --git a/docs/1-trial-session/06-boolean/_samples/quiz-show/index.html b/docs/1-trial-session/06-boolean/_samples/quiz-show/index.html new file mode 100644 index 000000000..df19d1882 --- /dev/null +++ b/docs/1-trial-session/06-boolean/_samples/quiz-show/index.html @@ -0,0 +1,10 @@ + + + + + Title + + + + + diff --git a/docs/1-trial-session/06-boolean/_samples/quiz-show/script.js b/docs/1-trial-session/06-boolean/_samples/quiz-show/script.js new file mode 100644 index 000000000..b49a9ed62 --- /dev/null +++ b/docs/1-trial-session/06-boolean/_samples/quiz-show/script.js @@ -0,0 +1,4 @@ +const tanakaScore = 120; +const satoScore = 80; +const isTanakaWinner = tanakaScore >= 100 && tanakaScore - satoScore >= 20; +document.write(isTanakaWinner); // true diff --git a/docs/1-trial-session/06-boolean/index.mdx b/docs/1-trial-session/06-boolean/index.mdx index 2ff271549..cc50edee2 100644 --- a/docs/1-trial-session/06-boolean/index.mdx +++ b/docs/1-trial-session/06-boolean/index.mdx @@ -19,14 +19,13 @@ JavaScript ではこの他に、**論理値**と呼ばれる、「 論理値に対して適用できる演算子が存在します。 ```javascript -const isMonsterBig = true; -const isMonsterSmall = !true; // false -const isHunterStrong = false; -const shouldEscape = !isHunterStrong && isMonsterBig; // true -const shouldFight = isHunterStrong || isMonsterSmall; // false +document.write(true); // true +document.write(!false); // true +document.write(true && false); // false +document.write(true || false); // true ``` -詳細は以下の通りです。`!` のみが作用する対象を 1 つしかとらないことに注意してください。 +各演算子の意味は次の通りです。`!` のみが作用する対象を 1 つしかとらないことに注意してください。 | 演算子 | 意味 | 詳細 | | ------ | ---------- | ------------------------------------------------------------------- | @@ -34,33 +33,55 @@ const shouldFight = isHunterStrong || isMonsterSmall; // false | `&&` | かつ | 両方 `true` ならば `true`、どちらか 1 つでも `false` ならば `false` | | `\|\|` | または | 両方 `false` ならば `false`、どちらか 1 つでも `true` ならば `true` | +具体的な使用例を考えてみましょう。 + +モンスターが大きいかどうかを表す変数 `isMonsterBig` と、ハンターが強いかどうかを表す変数 `isHunterStrong` が用意されています。このとき、ハンターがモンスターと戦うべきかどうかを表す変数 `shouldFight` を作りたいとします。ハンターは自分が強いときかモンスターが小さいときに戦うべきだとしたら、変数 `shouldFight` は次のようになるでしょう。 + +```javascript +const isMonsterBig = true; +const isHunterStrong = false; +const shouldFight = isHunterStrong || !isMonsterBig; // false +``` + ## 比較演算子 比較演算子は、複数のを比較して、単一の論理値を得ます。 -```javascript -const age = 15; -const height = 155; -const isFourteen = age === 14; // false -const isNotFourteen = age !== 14; // true -const isChild = age < 20; // true -const canRideRollerCoasters = age >= 10 && height >= 140; // true +年齢を判定するプログラムを考えましょう。 + +```javascript showLineNumbers +const age = 14; +document.write(age === 15); // false +document.write(age === 14); // true ``` -各演算子の詳細は、次の通りです。 +`===` は左辺と右辺が等しいかどうか判定する比較演算子です。 +2 行目では `age` と 15 とは等しくないので `false` が、3 行目では `age` と 14 とは等しいので `true` が表示されます。 + +各演算子の意味は次の通りです。 | 演算子 | 意味 | 詳細 | | ------ | ---------- | ------------------------------- | -| `===` | 等しい | | -| `!==` | 等しくない | | +| `===` | 等しい | 左辺と右辺が等しければ `true` | +| `!==` | 等しくない | 左辺と右辺が等しければ `false` | | `<` | 小なり | 左辺が右辺より小さければ `true` | | `<=` | 以下 | 左辺が右辺以下ならば `true` | | `>` | 大なり | 左辺が右辺より大きければ `true` | | `>=` | 以上 | 左辺が右辺以上ならば `true` | -`&&` や `||` よりも比較演算子の方が優先順位が高いため、最後の例のように複数の条件を「かつ」「または」などで組み合わせることは容易です。 +さらに具体的な使用例を考えてみましょう。 -## 演習 +ジェットコースターに乗れるかどうかを表す変数 `canRideRollerCoasters` を考えます。年齢を表す変数 `age` と身長を表す変数 `height` が与えられたとして、10 歳以上かつ身長が 120cm 以上でないと乗れないとしたら以下のようになるでしょう。 + +```javascript +const age = 15; +const height = 155; +const canRideRollerCoasters = age >= 10 && height >= 120; // true +``` + +`&&` や `||` よりも比較演算子の方が優先順位が高いため、複数の条件を「かつ」「または」などで組み合わせることは容易です。 + +:::info 次のコードは何を表示するでしょうか。そしてそれはなぜでしょうか。 @@ -77,3 +98,43 @@ document.write(takaoHeight = everestHeight); - JavaScript で、数値と論理値に比較演算子を適用すると、`true` は `1` として、`false` は `0` として比較されます。 - `=` は代入演算子です。代入演算子評価されると、右辺のになります。 + +::: + +## 演習 + +クイズ番組で田中さんと佐藤さんが戦っています。 +田中さんの点数が `tanakaScore` で、佐藤さんの点数が `satoScore` で用意されています。 + +点数が 100 点以上で、かつ相手より 20 点以上高い点数の場合に勝ちとします。 +田中さんが勝ちかどうかを表す変数 `isTanakaWinner` を作成してください。 + +```javascript +const tanakaScore = 120; +const satoScore = 80; +const isTanakaWinner = /* ここに式を書いてください */; +document.write(isTanakaWinner); // true +``` + +:::tip + +`+`, `-`, `*`, `/` などの算術演算子は、比較演算子よりも優先順位が高いです。 + +```javascript +const isBig = 10 + 5 > 10 - 3; // 15 > 7 なので true +``` + +::: + + + +```javascript +const tanakaScore = 120; +const satoScore = 80; +const isTanakaWinner = tanakaScore >= 100 && tanakaScore - satoScore >= 20; +document.write(isTanakaWinner); // true +``` + + + +