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