こんにちは朱夏です。
今回はJavaScriptの関数を使って、コードをまとめてスッキリさせたいと思います。
同じコードを何度も書くのは大変だからまとめたいな。
こんな時に使えるのが関数です。
関数は何行もある処理を1つのキーワードで使えるようになるのはとても便利です。
それではいってみましょう。
JavaScriptのコード
解説
あとがき
JavaScriptのコード
先ずはコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
'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(); } }); |
こんな感じです。
クリックイベントの前に変数や関数を宣言しています。
組み込むためのパーツセットを作っているようなイメージですね。
解説
それでは解説していきます。
関数としてまとめた処理はこの部分です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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>'); } }; |
関数を作る場合は以下の様に書きます。
|
1 2 3 |
function 関数の名前() { //処理内容 }; |
functionは固定です。
その後ろに書かれた文字列が関数の名前になります。
今回の数当てゲームではnumgame()という名前の関数にしました。
()は関数の後ろに必ず付けます。
引数というものを使う場合はここを使うのですが、今回は中身無しのかっこだけ使います。
関数として書いたコードには注意があります。
次に、作った関数を使って処理を実行しているのはこちら。
|
1 2 3 4 5 6 7 8 |
document.getElementById('buttonsubmit').addEventListener( 'click', () => { if(i == 4) { numgame(); number.innerText = '正解は' + randomnumber + 'です'; } else { numgame(); } }); |
前回同じ処理が繰り返し書かれていた部分が、「numgame();」だけになりました。
これのおかげで全体のコード量は2/3くらいになっています。
あとがき
JavaScriptの関数を使って処理をまとめてみました。
まだ引数を使ったりする様な高度な使い方は出来ていませんが、基本的な処理をまとめる使い方が出来るようになるだけで、コードを書くのがかなり楽になりました。
今回のまとめとしてはこちら。
- 関数で複数行の処理をまとめられる
- 作った関数は何度でも使える
- 関数の宣言(function)の最後には”;”が必要
というわけで、今回の数当てゲームはこれで完成としたいと思います。
JavaScriptに慣れるためにあえて細かくコツコツ進めてみましたが、毎日触るのは割と有効でした。
抜け落ちていかないうちに、JavaScriptはまだまだ触っていこうと思います。
今回は以上です。
次回もよろしくお願いします。
