JavaScriptでFizzBuzz(for、if、switch、while、do while、DOMを使用)

目的

• JavaScriptの条件分岐、繰り返し処理、配列、DOMで学んだことをFizzBuzzでアウトプット
• この記事でのFizzBuzz定義：
  1~15の数値を出力し、3かつ5の倍数をFizzBuzz、3の倍数をFizz、5の倍数をBuzz、その他の場合は数値を出力

for文とifを使用

//let i = 1で変数を宣言し、数値iを1に初期化
//条件式で変数iが15以下か確認し、trueの場合はfor文の処理を実行
//数値iを条件分岐で処理
//増減式よりiを1足す
for(let i = 1; i <= 15; i++){
    //iが3の倍数かつ5の倍数のときにFizzBuzzと出力
    if(i % 3 === 0 && i % 5 === 0){
        console.log('FizzBuzz');
    //iが3の倍数の場合Fizzと出力
    } else if (i % 3 === 0){
        console.log('Fizz');
 　//iが5の倍数の場合buzzと出力
   } else if (i % 5 === 0){
      　　console.log('Buzz');
  //数値iが上記の条件以外の数値の場合数値を返す
    } else{
      console.log(i);
    }
  }

理解できたこと

• for(初期化式; 条件式; 増分式){処理;}のフロー
• if(条件式1){処理1}else if{条件式2}(処理2}else{処理3}を使った条件分岐
• 演算子の使い方(剰余演算子%、厳密等価演算子===、<=小なりイコール演算子、AND演算子&&)
  -変数let

for文とswitch文

switch文の条件式の値をtrueにすることで常に処理し続ける方法は思いつかず、以下の参考サイトを参考にしました。

ただし、switch(true)は賛否両論あり、条件分岐として使うべきところをtrueとしており本来の意味からかけ離れているために使わない方が良いという意見もあります。
https://qiita.com/t_uda/items/1969e09a970d71e4cfd6

//for文で1~15の数値を１ずつ加える処理を実施
for(let i = 1; i <= 15; i++) {
   //switch文で条件分岐を実施
  switch(true) { 
    case( i % 15 === 0):
      console.log('FizzBuzz'); 
      break;
    case(i % 5 === 0):
       console.log('Buzz');
       break;
    case (i % 3 === 0):
      console.log('Fizz');
      break;
    default:
      console.log(i);
  } 
}

while文とif文を使用

let i = 1;
while (i <= 15) {
  if (i % 15 === 0) {
      console.log('FizzBuzz')
  } else if (i % 3 === 0) {
      console.log('Fizz');
  } else if (i % 5 === 0) {
        console.log('Buzz');
  } else {
        console.log(i);
  } 
  i++;
}

do while文とifを使用

コメントを頂き修正しました。

let i = 1;
do {
  if (i % 15 === 0) {
      console.log('FizzBuzz')
  } else if (i % 5 === 0) {
      console.log('Buzz');
  } else if (i % 3 === 0) {
      console.log('Fizz');
  } else {
      console.log(i);
  } 
} while(i++ < 15)

##FizzBuzzを出力後配列に入れる
＊コメントを頂き修正しました。

//空の配列を作成し、whileを使い数値を1~15まで順番に表示し、条件分岐で各要素がFizzBuzzかを判断し、pushメソッドで空の配列に入れる。
let array = [];
let i = 1;
while (i <= 15) {
  if (i % 15 === 0) {
    array.push('fizzBuzz');
  } else if (i % 5 === 0) {
    array.push('Buzz');
  } else if (i % 3 === 0) {
    array.push('Fizz');
  } else {
    array.push(i);
    }
  i++
}
console.log(array);

DOMを使ってFizzBuzz

フォームにFizzとBuzzの整数(2桁以下)を入力しクリック後にFizzBuzz表示

//htmlのボタン要素を取得し、btn変数に代入
const btn = document.getElementById('button');
//ボタンクリックイベント後の{}内の処理を実行
btn.addEventListener('click', ()=> {
  //htmlのfizz欄に入力された値を取得し変数fizzに代入
  const fizz = document.getElementById('fizz').value;
  //fizzの型を数値へ変換
  const fizzNum = Number.parseFloat(fizz, 10);
  //正規表現で数値が入力されているか確認する変数へ代入
  const isFizzInteger = fizz.match(/\d/g)
  const buzz = document.getElementById('buzz').value;
  const buzzNum = Number.parseFloat(buzz, 10);
  while (ul.firstChild) {
    ul.removeChild(ul.firstChild);
  };
  const isBuzzInteger = buzz.match(/\d/g)
  const error = () => {
    while(ul.firstChild) {
      ul.removeChild(ul.firstChild);
    };
    const errorMessage = document.createElement('li');
    errorMessage.textContent = '整数値を入力してください';
    ul.appendChild(errorMessage);
    }

  if (isFizzInteger && isBuzzInteger) {
    for (let i = 1; i < 100; i++) {
      if ((i % fizzNum === 0) && (i % buzzNum === 0)) {
        const fizzBuzzList = document.createElement('li');
        fizzBuzzList.textContent = `FizzBuzz ${i}`;
        ul.appendChild(fizzBuzzList);

      } else if (i % buzzNum === 0) {
        const buzzList = document.createElement('li');
        buzzList.textContent = `Buzz ${i}`;
        ul.appendChild(buzzList);
      } else if (i % fizzNum === 0) {
        const fizzList = document.createElement('li');
        fizzList.textContent = `Fizz ${i}`;
        ul.appendChild(fizzList);
      }
    };
  } else {
    error();
    return;
  }
});

##所感と今後

• 自分で理解できたコードのみ使用
• わかったことを随時コメントの加筆修正継続
• 以下の参考のような最短コードも理解できるように学習を続ける

参考

• JavaScript primer(構文理解用)
  https://jsprimer.net/

• FizzBuzz最短プログラムの解説
  https://qiita.com/obake_fe/items/041715068665dc94aac4

• githubにあるFizzBuzzリスト
  https://gist.github.com/jaysonrowe/1592432