今日は復習を兼ねて、FizzBuzzプログラムを作成してみましょう。
FizzBuzzはプログラミングの基本的な概念を理解するためによく使われる練習問題で、この実践を通じて、学んだ知識を活用する力を養うことが出来ます。
FizzBuzzのルールは非常にシンプルで、通常1から100（設定した最大値）までの数値に対して以下の条件を適用します。
- 数値が3で割り切れる場合、”Fizz”と表示します。
- 数値が5で割り切れる場合、”Buzz”と表示します。
- 数値が3でも5でも割り切れる場合（つまり、15で割り切れる場合）、”FizzBuzz”と表示します。
- それ以外の場合、数値そのものを表示します。
プログラムは、指定された範囲のすべての数値に対して上記のルールを適用し、結果を出力します。
画面上わかりやすく表示できるように、まだ学習していない要素も含まれています。
1日目から5日目までの学習要素のみで作成したJavaScriptのみの解説もあるので、このプログラムがどんなものか、まずは体験してみて下さい。
まずは体験してみよう
FizzBuzz
FizzBuzzプログラム
この記事でのFizzBuzzプログラムは、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>
<style>
.fizzbuzz-body {
font-family: "Arial", sans-serif;
background-color: #f0f0f0;
}
.fizzbuzz-title {
color: #333;
}
.custom-label {
font-size: 18px;
}
.custom-input {
font-size: 18px;
}
.custom-button {
font-size: 18px;
padding: 10px 20px;
background-color: #007BFF;
color: #FFF;
border: none;
cursor: pointer;
}
.custom-button:hover {
background-color: #0056b3;
}
#fizzbuzz-result {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
}
.fizzbuzz-item {
font-size: 18px;
padding: 10px;
background-color: #FFF;
border: 1px solid #CCC;
margin: 5px;
width: 100px;
text-align: center;
}
</style>
</head>
<body class="fizzbuzz-body">
<h1 class="fizzbuzz-title">FizzBuzz</h1>
<label class="custom-label" for="maxValue">最大値を入力してください: </label>
<input class="custom-input" type="number" id="maxValue" value="20">
<button class="custom-button" onclick="executeFizzBuzz()">FizzBuzzを実行</button>
<div id="fizzbuzz-result"></div>
<script>
function fizzBuzz(num) {
if (num % 15 === 0) {
return 'FizzBuzz';
} else if (num % 3 === 0) {
return 'Fizz';
} else if (num % 5 === 0) {
return 'Buzz';
} else {
return num;
}
}
function executeFizzBuzz() {
const maxValue = document.getElementById("maxValue").value;
const resultContainer = document.getElementById("fizzbuzz-result");
resultContainer.innerHTML = '';
for (let i = 1; i <= maxValue; i++) {
const item = document.createElement('div');
item.classList.add('fizzbuzz-item');
item.textContent = fizzBuzz(i);
resultContainer.appendChild(item);
}
}
</script>
</body>
</html>
さて、このプログラムには今まで習っていない要素が複数含まれています。
画面上で表示させるために、あえて使っていますが第2週の学習で出てくるので今は気にしなくて大丈夫です。
改めて、このFizzBuzzプログラムを今まで学習した内容のみで作成すると、以下のようなコードになります。
// FizzBuzzプログラムを定義する関数
function fizzBuzz(maxValue) {
// 結果を格納するための空文字列を作成
let result = '';
// 1から最大値までの繰り返し処理
for (let i = 1; i <= maxValue; i = i + 1) {
// iが3で割り切れ、かつ5で割り切れる場合
if ((i % 3 == 0) && (i % 5 == 0)) {
// 結果に'FizzBuzz'を追加
result = result + 'FizzBuzz ';
}
// iが3で割り切れる場合
else if (i % 3 == 0) {
// 結果に'Fizz'を追加
result = result + 'Fizz ';
}
// iが5で割り切れる場合
else if (i % 5 == 0) {
// 結果に'Buzz'を追加
result = result + 'Buzz ';
}
// それ以外の場合
else {
// 結果に数値を追加
result = result + i + ' ';
}
}
// 結果をコンソールに出力
console.log(result);
}
// 関数を呼び出して、最大値30までのFizzBuzzプログラムを実行
// この30という数値が一番上のmaxValueという引数に入れて処理が行われます。
fizzBuzz(30);
このJavaScriptコードをChrome等の開発者ツールを使用して実際に実行すると、一番上のFizzBuzzプログラムと同じ動きをするようになっています。
まとめ
今回の記事では、1日目から5日目までの学習内容を使って、FizzBuzzというプログラムを作成しました。
プログラミングを学んでいく上で、実践しないと実際にどういう動きをするかわからないと思います。
頭に入れた上で、プログラムを実際に動かす事で、動かなかった時の試行錯誤のクセも身につきますし、動いた時の達成感は頑張ってよかったと思わせてくれます。
変数名や数値を変更して試し、理解を深めましょう。