🫥

コードでの意思決定 — 条件文(if文、演算子)

2023/05/18に公開

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 ハンドラーの内部に条件式を書いてもらいます。// 条件式をここに書くというコメントのすぐ下に...

  1. 選択されている月を取得します (これは choice 変数に格納されています。この値は <select> 要素で選択された後の値で、例えば 1 月なら、"1" といった値です。)
  2. 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;
 }
}

参考資料

Discussion