JavaScriptでFizzBuzz問題を解く

#はじめに
この記事は、JavaScript初学者がFizzBuzz問題を解く過程をまとめたものです。

##要件
####1.入力された整数値でFizzBuzz問題を実行できる
- fizzNumに入力された値の倍数とbuzzNumに入力された値の倍数を小さい順に表示する
- 各々倍数と一緒にfizz、buzzと表示させる
- 両方の倍数である時にはFizzBuzzと表示させる
- 表示させるのは二桁の値まで

####2.整数値が入力されずに実行ボタンが押下された際にはエラーを表示させる
- 文字列が入力された時
- 少数が入力された時
- 空欄だった時

##FizzBuzzを実装するために必要な処理
・実行ボタン押下時のイベント作成
・inputタグから入力された値の取得
・入力された値を元にfor文とif文で条件を定義して、条件と合致すれば出力
・入力された値が整数値であるかif文を使ってチェック

大まかに分けるとこれらの処理工程があります。
上から順に処理していきます。

##HTMLサンプルコード
```
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FizzBuzz問題</title>
</head>
<body>
  <div>
    <h1>FizzBuzz問題</h1>
    <dl>
      <dt style="float: left; width:5rem">FizzNum:</dt>
      <dd><input type="text" id="fizz_num" placeholder="整数値を入力してください" value="" style="width: 10.5rem;"></dd>
      <dt style="float: left; width:5rem">BuzzNum:</dt>
      <dd><input type="text" id="buzz_num" placeholder="整数値を入力してください" value="" style="width: 10.5rem;"></dd>
    </dl>
    <button id="btn">実行</button>
    <p>【出力】</p>
    <ul id="output" style="list-style: none;"></ul>
  </div>
<script src="practice1.js"></script>
</body>
</html>
```

##実行ボタン押下時のイベント作成

```
// 実行ボタンの要素を取得
const btn = document.getElementById('btn');
// クリックイベント
btn.addEventListener('click', () => {
```

btn.addEventListener('click', () => {　
実行ボタンをクリック時の処理を記述します。
addEventListener()は、イベント発生時に引数で記述した処理を実行します。
第一引数のイベントの種類であるクリックを入れます。
第二引数の() => は関数の書き方の一つで、アロー関数といいます。
function()と同じです。functionがなくなって => になっただけです。
アロー関数の方が省略できて見やすくなるので使っています。


##inputタグから入力された値の取得

JavaScript

```
  // DOM
  const fizz_num = document.getElementById('fizz_num');
  const fizz = fizz_num.value;
  const buzz_num = document.getElementById('buzz_num');
  const buzz = buzz_num.value;
  const output = document.getElementById('output');
```

document.getElementById()を使用して、引数に入っているidを持つHTML要素を取得する。
取得した要素の値(value)を定数に代入する。
入力された値が必要なので、クリックイベントの中で行う。

##入力された値を元にfor文とif文で条件を定義して、条件と合致すれば出力
```
 // 値を代入する変数を宣言
  let val = '';

 // 変数iを宣言して１を代入し99まで+1する
  for (let i = 1; i < 100; i++) {

        // iがfizzとbuzzの倍数なら、valに文字列とiを代入
        if (i % fizz === 0 && i % buzz === 0) {
          val = 'FizzBuzz' + ' ' + i;

        // iがfizzの倍数なら、valに文字列とiを代入
        } else if (i % fizz === 0) {
          val = 'Fizz' + ' ' + i;

        // iがbuzzの倍数なら、valに文字列とiを代入
        } else if (i % buzz === 0) {
          val = 'Buzz' + ' ' + i;
        
        // iがfizzとbuzzの倍数でないなら、valを空にする
        } else {
          val = '';
        }

        // li要素を作成する定数liを宣言
        const li = document.createElement('li');

        // outputの子要素にliを追加
        output.appendChild(li);

        // liのテキストにvalを代入
        li.textContent = val;      
      }
```

ループ内で出力するli要素の内容を記述することに注意。

##入力された値が整数値であるかif文を使ってチェック
```
// fizzとbuzzの値が空ならば、outputの中身を空にして注意文を表示する
  if (!fizz || !buzz) {
    output.innerHTML = '';
    output.innerHTML = '<p>整数値を入力してください</p>'

    // fizzとbuzzの値が数字以外ならば、outputの中身を空にして注意文を表示する
  } else if (fizz.match(/^\D+$/) || buzz.match(/^\D+$/)) {
    output.innerHTML = '';
    output.innerHTML = '<p>整数値を入力してください</p>'

  // fizzとbuzzの値が小数ならば、outputの中身を空にして注意文を表示する 
  } else if (fizz.match(/^-?[0-9]+\.[0-9]+$/) || buzz.match(/^-?[0-9]+\.[0-9]+$/)) {
    output.innerHTML = '';
    output.innerHTML = '<p>整数値を入力してください</p>'

```

値が空の場合のチェックは定数(変数)の前に!をつける。
値が小数点の場合か、文字列が入っている場合のチェックは、正規表現で行う。
正規表現については以下のリンクを参考に。
[正規表現総まとめ！！ - Qiita](https://qiita.com/n_oshiumi/items/62f5d21c4837f76932ab#%E9%96%8B%E5%A7%8B%E3%81%A8%E7%B5%82%E4%BA%86)

#終わりに
FIzzBuzz問題でJavaScriptのDOM操作や関数の書き方、イベントの作成方法などがより詳しく学べた。
Progateやドットインストールの次に何をしようか迷っている人は、FizzBuzz問題を解いてみると、プログラミングについての理解が深まると思う。