目次

はじめに
課題
fizzbuzzとは
サンプル動画
サンプルコード
おわりに

はじめに

こんにちは！
今回は私がJavaScriptを学習するに当たって、最初に行った課題を紹介します。
私自身プログラミング学習を初めてまだ一ヶ月半ほどの初心者です。
初心者だからこそ感じれたことを、これから数回に渡って綴っていこうと思います。
今回はまず私が書いたコードを貼り、次回から機能ごとに解説していきます。

課題

「fizzbuzz文をブラウザに表示する」というもの。
今回の課題を通して、DOM操作と言ったJavaScriptの基礎的な概念を学ぶことができます。
DOMとはHTMLの構造をJavaScriptを通して操作できるようにしたものです。
JavaScriptではDOMは非常に重要な概念です。

FizzBuzzとは

プログラミング業界では有名な、言わずと知れたFizzBuzz問題です。
プログラミングを学んでいる初心者なら一度は聞いたことあるのではないでしょうか。
色んな教材でfor文を使った代表例として挙げられていることも多いかと思います。
fizzbuzz文とは以下の問題を指します。

1から100までの数を順に出力せよ。
ただし、
その数がで3で割り切れるときは”Fizz”という文字列を、
5で割り切れるときは”Buzz”という文字列を、
3と5のどちらでも割り切れるときは”FizzBuzz”という文字列を、
それぞれ数の代わりに出力せよ

というもの。
JavaScriptのfor文の例題として相応しい課題です。

サンプル動画

1つ目。
- 任意の値を入れ、実行ボタンを押すと結果が表示される。
- 値を入力せずに実行ボタンを押すとエラー文が表示される。
https://t.co/YNvaDDbpra?amp=1

２つ目。
- 文字列を入力するとエラー文が表示される。
- 小数を入力するとエラー文が表示される。
https://t.co/UM15whkGqm?amp=1

サンプルコード

↓↓ 以下のコードを実装すると動画のような処理が実装できます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
    <title>Document</title>
</head>
<body>
  <h1>FizzBuzz問題</h1>
  <p>FizzNum: <input type="text" name="fizzes" id="fizz" placeholder="整数値を入力してください"></p>
  <p>BuzzNum:<input type="text" name="buzzes" id="buzz" placeholder="整数値を入力してください"></p>
  <button value="実行" id="btn">実行</button> |
  <div id="output">
    <p>【出力】</p>
  </div>
  <script src="main.js"></script>
</body>
</html>

JavaScript


`use strict`

//FizzNum, BuzzNumに数値を入力し、実行を押したときの挙動//


//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);


  //誤った動作をし、エラーが表示された後の挙動を関数で宣言//

  //値を空にして、もう一度値を入力するための関数を用意
  function NumberClear() {

    //fizzNumの値を空にする
    elemFizzNumber.value = '';

    //buzzNumの値を空にする
    elemBuzzNumber.value = '';

    //入力する際に上段部分にあたるfizzBuzzにフォーカスを合わせる
    elemFizzNumber.focus();
  }

  //エラーが表示された後の挙動を関数で用意
  function errorMessage() {

    //pタグの要素を作成
    const checker = document.createElement('p');

    //pタグ要素の中身のテキストを作成
    checker.textContent = '整数値を入力してください';

    //親要素であるdivタグの要素を取得
    const div = document.querySelector('div');

    //divタグの子要素としてpタグの要素を追加
    outputArea.appendChild(checker);
  }


  // 整数値が入力されない場合の処理//

  // 整数以外の値が入力された場合の処理
  if (isNaN(fizzNumber) || isNaN(buzzNumber)) {

    //アラートダイアログでエラー文を表示
    alert('文字列が入力されています！');

    //値を一度クリアにする処理
    NumberClear();

    // //もう一度数値を入力するための関数を返す処理
    return errorMessage();

  }

  //値が何も入力されていない場合の処理
  if ((fizzNumber == 0) || (buzzNumber == 0)) {

    //アラートダイアログでエラー文を表示
    alert('数字が入力されていません！');

    //値を一度クリアにする処理
    NumberClear();

    // もう一度数値を入力するための関数を返す処理
    return errorMessage();;
  }

  //値が小数である場合の処理
  if (fizzNumber.match(/^-?[0-9]+\.[0-9]+$/) || buzzNumber.match(/^-?[0-9]+\.[0-9]+$/)) {

    //アラートダイアログでエラー文を表示
    alert('小数値が入力されています！');

    //値を一度クリアにする処理
    NumberClear();

    //もう一度数値を入力するための関数を返す処理
    return errorMessage();
  }


  //結果情報の中身を作成//

  //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);


    //「実行」を押した後の挙動

    //関数を呼び、もう一度入力しやすい状態にする
    NumberClear();
  }
});

おわりに

今回は全体のコードのみを貼り付けました。
次からは項目別に機能の解説をしていきます。
これからも楽しくプログラミングを学習していきましょう。
ありがとうございました。