JavaScriptでアプリを作成しました【1】【FizzBuzz問題】

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

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

## 【作成にあたり学習した事】
- if文
- ループ処理
- DOM  
 - getElementById()   
 - appendChild()   
 - createElement()

### 【DOM】　getElementById()とは
『getElementById』とは、指定したid値を持つ要素をElementオブジェクトとして返すメソッド。
HTMLタグの中から指定したidを取得して何らかの処理をしたい場合などに使用される。

getElementByIdで要素を取得するには以下のように記述。
idにはHTMLに記述した取得したいid要素を記述し、
同一idはHTML内において複数使用することは出来ないので、一意なid値である必要がある。

```
document.getElementById(id)
```
###【DOM】 appendChild()とは
JavaScriptでプログラミングを行う際、動的にWebサイトに要素を追加したい場合に、便利なのが『appendChild メソッド』。
※要素の集合体をノードという。
『appendChildメソッド』を使うと、特定の親ノードの子ノードの最後にノードを追加することができる。
なお、追加しようとしたノードが既に存在していたら、既存のノードが新しいノードで置き換わる。
appendChild メソッドの書き方は以下のように記述。

```
var child = element.appendChild(child);
```

### 【DOM】createElement()とは
JavaScript で HTML 要素を動的に生成するには『createElement() メソッド』を使用する。
createElement() メソッドの書き方は以下のように記述し、タグ名には div や a などの HTML 要素名を指定する。

```
const element = document.createElement(タグ名)
```
crreateElement() メソッドで生成した要素を、実際の HTML 要素に追加することで HTML を動的に生成することができ、
HTML 要素への追加には appendChild() メソッドなどを使用する。

```
HTML要素.appendChild(生成した要素)
```
## 【FizzBuzz問題】

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript課題②</title>
</head>
<body>
    <body>
  <h1>FizzBuzz問題</h1>
  <p>FizzNum : <input type="text" name="fizzes" id="fizz" placeholder="Enter an integer value"></p>
  <p>BuzzNum : <input type="text" name="buzzes" id="buzz" placeholder="Enter an integer value"></p>
  <button value="実行" id="btn">実行</button>
  <div id="output">
    <p>【出力】</p>
  </div>

  <script src="main.js"></script>
</body>
</body>
</html>
```

```main.js
`use strict`
//HTMLの中からIdがbtnの要素を取得
const btn = document.getElementById('btn');
//ボタン要素のクリックイベントをトリガーにコールバック処理を作成
btn.addEventListener('click', () => {

//入力値の取得//
//HTMLの中からIdがfizzの要素を取得
  const elemFizzNumber = document.getElementById('fizz');
//fizzNumのinputに入力された数字から値を取得
  const fizzNumber = elemFizzNumber.value;
//HTMLの中からIdがbuzzの要素を取得
  const elemBuzzNumber = document.getElementById('buzz');
//BuzzNunのinputに入力された数字から値を取得
  const buzzNumber = elemBuzzNumber.value;
//結果情報のベース作成//
//HTMLの中からIdがoutputの要素を取得
  const outputArea = document.getElementById('output');
//結果要素の子要素を取得
  outputArea.innerHTML = '';
//pタグの要素を作成
  const ptag = document.createElement('p');
//pタグの要素に結果情報ヘッダーの固定値をセット
  ptag.textContent = '【出力】';
//結果要素の子要素としてpタグの要素を追加
  outputArea.appendChild(ptag);

//結果情報の中身を作成//
//fizzbuzz問題のループ文
// 変数iを定義し、iが100より小さい場合、iに1ずつ足していく処理を実行
  for (let i = 1; i < 100; i++) {
//バリューを取得するための変数を定義
    let value = '';
//iがfizzes、buzzesの両方の数値の倍数である場合の処理
    if (i % fizzNumber === 0 && i % buzzNumber === 0) {
//ブラウザに表示するための文字列と取得した値をバリューとして用意
      value = "FizzBuzz" + " " + i;
//iがfizzesの倍数である場合の処理
    } else if (i % fizzNumber === 0) {
//ブラウザに表示するための文字列と取得した値をバリューとして用意
      value = "Fizz" + " " + i;
//iがbuzzesの倍数である場合の処理
    } else if (i % buzzNumber === 0) {
//ブラウザに表示するための文字列と取得した値をバリューとして用意
      value = "Buzz" + " " + i;
//iがどちらの倍数でもない場合の処理
    } else {
//何も表示させないものとして用意
      value = '';
    }

//要素を追加するためのpタグ要素を作成
    const fizzbuzz = document.createElement('p');
//テキストの内容に、ループ文で取得した値を入力する
    fizzbuzz.textContent = value;
//親要素であるdivタグの要素を取得
    const div = document.querySelector('div')
//div要素の子要素として追加
    outputArea.appendChild(fizzbuzz);
　}

  // fizzとbuzzの値が空ならば、outputの中身を空にして注意文を表示する
  if (!fizzNumber || !buzzNumber) {
    output.innerHTML = '';
    output.innerHTML = '<p>Please enter an integer value !</p>'

  // fizzとbuzzの値が数字以外ならば、outputの中身を空にして注意文を表示する
  } else if (fizzNumber.match(/^\D+$/) || buzzNumber.match(/^\D+$/)) {
    output.innerHTML = '';
    output.innerHTML = '<p>Please enter an integer value !</p>'

  // fizzとbuzzの値が小数ならば、outputの中身を空にして注意文を表示する 
  } else if (fizzNumber.match(/^-?[0-9]+\.[0-9]+$/) || buzzNumber.match(/^-?[0-9]+\.[0-9]+$/)) {
    output.innerHTML = '';
    output.innerHTML = '<p>Please enter an integer value !</p>'
  }
});
```

## 参考サイト
[JavaScript FizzBuzz問題の作り方](https://qiita.com/gorinesia/items/e48a416873cae332a0e2)
[JavaScriptでgetElementByIdを使う方法！HTML要素を取得する](https://techacademy.jp/magazine/15289)
[JavaScriptのappendChildメソッドの使い方を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/20820)
[JavaScriptでcreateElementメソッドを使いHTMLを動的生成する方法を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/36505)