Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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を宣言して1を代入し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問題を解いてみると、プログラミングについての理解が深まると思う。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away