JavaScript学習の記録　関数を使ってコードをきれいにする

Javascript

2021.08.262020.02.17

こんにちは朱夏です。

今回はJavaScriptの関数を使って、コードをまとめてスッキリさせたいと思います。

朱夏

同じコードを何度も書くのは大変だからまとめたいな。

こんな時に使えるのが関数です。
関数は何行もある処理を1つのキーワードで使えるようになるのはとても便利です。

それではいってみましょう。

[もくじ]
JavaScriptのコード
解説
あとがき

JavaScriptのコード

先ずはコードです。

'use strict';

var i = 0;
var hint = document.getElementById('hintbox');
var randomnumber = Math.floor(Math.random() * 100 + 1);
var number = document.getElementById('number');

function numgame() {
   i++;
   var inputnum = document.getElementById('exampleInputNum').value;
   document.getElementById('answer').innerText = inputnum;
   
   if(randomnumber == inputnum) {
      hint.insertAdjacentHTML("beforeend", '<p class="mb-0">' + i + '回目</p>' + '<p>正解です</p>');
      number.innerText = '正解は' + randomnumber + 'です';
   } else if(randomnumber > inputnum) {
      hint.insertAdjacentHTML("beforeend", '<p class="mb-0">' + i + '回目</p>' + '<p>もっと大きいよ：回答' + inputnum + '</p>');
   } else {
      hint.insertAdjacentHTML("beforeend", '<p class="mb-0">' + i + '回目</p>' + '<p>もっと小さいよ：回答' + inputnum + '</p>');
   }
};

document.getElementById('buttonsubmit').addEventListener( 'click', () => {
   if(i == 4) {
      numgame();
      number.innerText = '正解は' + randomnumber + 'です';
   } else {
      numgame();
   }
});

こんな感じです。
クリックイベントの前に変数や関数を宣言しています。

組み込むためのパーツセットを作っているようなイメージですね。

解説

それでは解説していきます。
関数としてまとめた処理はこの部分です。

function numgame() {
   i++;
   var inputnum = document.getElementById('exampleInputNum').value;
   document.getElementById('answer').innerText = inputnum;
   
   if(randomnumber == inputnum) {
      hint.insertAdjacentHTML("beforeend", '<p class="mb-0">' + i + '回目</p>' + '<p>正解です</p>');
      number.innerText = '正解は' + randomnumber + 'です';
   } else if(randomnumber > inputnum) {
      hint.insertAdjacentHTML("beforeend", '<p class="mb-0">' + i + '回目</p>' + '<p>もっと大きいよ：回答' + inputnum + '</p>');
   } else {
      hint.insertAdjacentHTML("beforeend", '<p class="mb-0">' + i + '回目</p>' + '<p>もっと小さいよ：回答' + inputnum + '</p>');
   }
};

関数を作る場合は以下の様に書きます。

function 関数の名前() {
   //処理内容
};

functionは固定です。

その後ろに書かれた文字列が関数の名前になります。
今回の数当てゲームではnumgame()という名前の関数にしました。

()は関数の後ろに必ず付けます。
引数というものを使う場合はここを使うのですが、今回は中身無しのかっこだけ使います。

関数として書いたコードには注意があります。

関数として書いたコードは処理されるわけではない
関数の最後は”;”が必要

次に、作った関数を使って処理を実行しているのはこちら。

document.getElementById('buttonsubmit').addEventListener( 'click', () => {
   if(i == 4) {
      numgame();
      number.innerText = '正解は' + randomnumber + 'です';
   } else {
      numgame();
   }
});

前回同じ処理が繰り返し書かれていた部分が、「numgame();」だけになりました。
これのおかげで全体のコード量は2/3くらいになっています。