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

17229 ワード
初心者 CSS JavaScript HTML HTML テキストリンク

はじめに

学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

【要件】

  • 入力された整数値で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問題の作り方
JavaScriptでgetElementByIdを使う方法！HTML要素を取得する
JavaScriptのappendChildメソッドの使い方を現役エンジニアが解説【初心者向け】
JavaScriptでcreateElementメソッドを使いHTMLを動的生成する方法を現役エンジニアが解説【初心者向け】

html転送の符号化変換
pythonの基礎は、ゼロから学ぶことを教えます(第4に、Selenium+Python UIの自動化とインタフェース要素の位置決め方法を実現します)