🫥
コードでの意思決定 — 条件文(if文、演算子)
MDN( https://developer.mozilla.org/ja/docs/Web/JavaScript )
を参考に勉強するように注意が入ったので、ここを教本にしていきます。
その為、抜粋しながら進めたいと思います。
今回はこちらです。
if文
if:条件分岐を伴うコードブロック
()内の条件式が成り立つ場合に{}内の処理が実行される。
if (条件式) {
//条件式が成り立った場合処理を実行
}
「if」の使用文
let num = 80;
if (num > 77) {
console.log('numは77より大きいです。');
}
if ... else:今までの条件に当てはまらない場合に使用
次のようにif文にelse
を付け加えることで、条件式が成り立たない場合の処理も書くことができます。
「もしif条件式がtrueを返したらAのコードを実行し、それ以外ならばBのコードを実行」と言う様に使用します。
if (条件式) {
//条件式が成り立った場合処理を実行(処理A)
} else {
//条件式が成り立たなければ処理を実行(処理B)
}
「if ... else」の使用文
let weight = 50;
if( weight < 43 ) {
console.log('ダイエット成功!');
} else {
console.log('もっと努力が必要');
}
//'もっと努力が必要です!'
あまり推奨されませんがこちらの書き方でも0K
if (条件式) {
条件式が true の場合に実行されるコード
}
普通に実行されるコード
if ... else if ... else:複数条件の分岐に使用
複数条件の分岐に使用します。
Aの場合、Bの場合、それ以外の場合、というように条件を複数設定するときに使えるのがelse if
です。
if(条件A){
// 条件式Aが成り立った場合処理を実行
}
else if(条件B) {
// 条件式Bが成り立った場合処理を実行
}
else{
// 条件式がすべて成り立たなければ処理を実行
「if ... else if ... else」の使用文
let weight = 44;
if(weight < 43) {
console.log('ダイエット成功!');
} else if(weight < 45){
console.log('あともう一踏ん張り!');
} else {
console.log('もっと努力が必要です');
}
//'あともう一踏ん張り!'
入れ子のif ... else
if (条件式) {
if (条件式) {
//条件式が成り立った場合処理を実行(処理A)
} else {
//条件式が成り立たなければ処理を実行(処理B)
}
}
「入れ子のif ... else」の使用文
let weight = 50;
if(weight >= 60){
if(weight > 40) {
console.log('weightは40より大きいです');
} else {
console.log('weightは40〜60の間です');
}
}
演算子
比較演算子に関するメモ
比較演算子
a = 5 、 b = 2
演算子 | 意味 | 例 |
---|---|---|
+ | 足し算(加算) | a + b = 7 |
ー | 引き算(減算) | a - b = 3 |
* | 掛け算(乗算) | a * b = 10 |
/ | 割り算 | a / b = 2.5 |
% | 割り算の余り | a % b = 1 (←2余り1なので) |
** | 指数 | a ** 2 = 25(←指数の回数だけ基数の数自身を乗算) |
+= | 元の変数に値を加算 | a += 2; (a = 7) |
-= | 元の変数から値を減算 | a -= 2; (a = 3) |
*= | 元の変数に値をかける | a *= 2; (a = 10) |
/= | 元の変数を値で割り算する | a /= 2; (a = 2.5) |
++ | 1増やす(インクリメント) | a++; (a = 6) |
-- | 1減らす(デクリメント) | a--; (a = 4) |
=== | 厳密に等しい (全く同じかどうか) | 5 === 2 + 3 |
!== | 等しくない (違うかどうか) | 5 !== 2 + 4 |
< | 小なり | a<b; (bの方が小さい) |
> | 大なり | a >b; (aの方が大きい) |
<= | 以下なり | 3 <= 2 |
>= | 以上なり | 5 >= 4 |
論理演算子: AND と OR と NOT
- AND
「 && 」演算子で表され、式を否定するのに使用
演算子で表され、式を否定するのに使用AND は 2 つ以上の式を一つに繋げ、それぞれの式を個別に評価して、すべて true になった場合、その式全体が true として返します。
if ( && ) {
//条件式が成り立った場合処理を実行(処理A)
} else {
//条件式が成り立たなければ処理を実行(処理B)
}
比較演算子を使用した「AND」使用文
let num = 60;
if(num > 0 && num < 50) {
console.log('0よりも大きくて50より小さい');
} else {
console.log('条件に当てはまりません');
}
//'条件に当てはまりません'
- OR
「 || 」演算子で表され、式を否定するのに使用
ORは2つ以上の式を1つに繋げ、それぞれの式を個別に評価し、最初にtrue
になったところで、その式全体をtrue
として返します。
if ( || ) {
//条件式が成り立った場合処理を実行(処理A)
} else {
//条件式が成り立たなければ処理を実行(処理B)
}
比較演算子を使用した「OR」の使用文
let num1 = 24;
let num2 = 3;
if(num1 % 2 == 1 || num2 % 2 == 1) {
console.log('num1またはnum2は奇数です');
} else {
console.log('両方偶数です');
}
//'num1またはnum2は奇数です'
- NOT
「!」演算子で表され、式を否定するのに使用
条件の結果であるtrue
/false
を逆にする特徴があります
if (!( 条件式 ) {
//条件式が成り立った場合処理を実行(処理A)
} else {
//条件式が成り立たなければ処理を実行(処理B)
}
比較演算子を使用した「NOT」の使用文
let num1 = 24;
let num2 = 3;
if(!(num1 % 2 == 1 || num2 % 2 == 1)) {
console.log('num1またはnum2は奇数です');
} else {
console.log('両方偶数です');
}
//'両方偶数です'
switch ステートメント
switch ( 式 ) {
case 選択肢1:
このコードを実行する
break;
case 選択肢2:
代わりにこのコードを実行する
break;
// 以下に選択肢を好きなだけ並べる
default:
既定でこのコードを実行する
}
「switch ステートメント」の使用例
let expr = '果物';
switch (expr) {
case 'みかん':
console.log('みかんは1個59円');
break;
case 'いちご':
console.log('いちごは1パックあたり279円です。');
break;
default:
console.log('みかんといちご、合計で338円です');
}
//'みかんといちご、合計で338円です'
三項演算子
( 条件式 ) ? こちらのコードを実行する : 代わりにこちらのコードを実行する
switch 「三項演算子」の使用例
簡易
var age = 26;
var beverage = (age >= 20) ? 'ビール' : 'ジュース';
console.log(beverage);
//ビール
詳しく
function getFee(Member) {
return (Member ? '$2.00' : '$10.00');
}
console.log(getFee(true));
// $2.00
function getFee(Member) {
return (Member ? '$2.00' : '$10.00');
}
console.log(getFee(false));
// $10.00
function getFee(Member) {
return (Member ? '$2.00' : '$10.00');
}
console.log(getFee(null));
// $10.00
学習
単純なカレンダー
あなたには、onchange ハンドラーの内部に条件式を書いてもらいます。
// 条件式をここに書く
というコメントのすぐ下に...
- 選択されている月を取得します (これは choice 変数に格納されています。この値は <select> 要素で選択された後の値で、例えば 1 月なら、"1" といった値です。)
- days という変数に、選択された月の日数を設定します。そのためには、1 年の各月の日数を調べる必要があるでしょう。うるう年はこの例題の目的から外れるため、無視してください。
const select = document.querySelector('select');
const list = document.querySelector('ul');
const h1 = document.querySelector('h1');
select.onchange = function() {
const choice = select.value;
// 条件式をここに書く
createCalendar(days, choice + ' 月');
}
function createCalendar(days, choice) {
list.innerHTML = '';
h1.textContent = choice;
for (let i = 1; i <= days; i++) {
const listItem = document.createElement('li');
listItem.textContent = i;
list.appendChild(listItem);
}
}
createCalendar(31,'1 月');
答え
【1年の各月の日数】
1、3、5、7、8、10、12月は31日まで。
2月は28日まで。
4、6、9、11月は30日まで。
select.onchange = function() {
let choice = select.value;
let days = 31;
//2月は28日まで
if(choice === '2') {
days = 28;
//30日の月を記載
} else if(choice === '4' || choice === '6' || choice === '9'|| choice === '11') {
days = 30;
}
もっとたくさんの色から選ぶ!
今回は先ほどの 2 つではなく、5 つの選択肢があります。
// ここに SWITCH ステートメントを書く
というコメントの真下にswitch
ステートメントを追加してください。
- choice 変数を判定する式として使用します。
- 各ケース (case) で、choice 変数は選択可能な値 ('white'、'black'、'purple'、'yellow'、'psychedelic') のうちのどれかです。
- 各ケース (case) で、update() 関数が実行されるようにしてください。関数には 2 つの引数を指定します。1 つ目の引数は背景色、2 つ目の色は前景色です。色は文字列なので、忘れずに引用符で囲みましょう。
const select = document.querySelector('select');
const html = document.querySelector('.output');
select.onchange = function() {
const choice = select.value;
// ここに SWITCH ステートメントを書く
}
function update(bgColor, textColor) {
html.style.backgroundColor = bgColor;
html.style.color = textColor;
}
答え
switch(choice) {
case 'black':
update('black','white');
break;
case 'white':
update('white','black');
break;
case 'purple':
update('purple','white');
break;
//阪神タイガースカラーで黄色といえば黒
case 'yellow':
update('yellow','black');
break;
//サイケデリックカラーは黄、紫、ピンク、黄緑などの蛍光色調らしいですよ
case 'psychedelic':
update('lime','purple');
break;
}
}
参考資料
- MDN「コードでの意思決定 — 条件文」
https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/conditionals (2023年05月18日閲覧) - MDN「if...else」
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/if...else (2023年05月15日閲覧) - MDN「論理積 (&&)」
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_AND (2023年05月18日閲覧) - MDN「論理和 (||)」
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_OR (2023年05月18日閲覧) - MDN「論理否定 (!)」
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_NOT (2023年05月18日閲覧) - MDN「switch」
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/switch (2023年05月18日閲覧) - MDN「条件 (三項) 演算子」
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_operator (2023年05月18日閲覧)
Discussion