はじめに
JS初心者です。Qiitaも初投稿です。
関数の書き方っていろいろあるんですね。
覚えた書き方を4種類記載してみます。
こんな簡単な画面でサイコロを振るプログラムをつくります。
アロー関数で定義
event.html
<div>
<p>サイコロ： <span id="output">?</span></p>
</div>
<div>
<button id="do_dice">サイコロを振る</button>
</div>
<script>
//doDiceという関数を定義
const doDice = () => {
const dice = Math.floor(Math.random() * 6) + 1;
document.getElementById('output').textContent = dice;
}
//ボタンが押されたら定義したdoDice関数を呼び出します。
document.getElementById('do_dice').addEventListener('click', doDice);
</script>
無名関数を使う
1回しか使わない関数なら定義しなくていい（無名でよい）ということ。（なるほどです。）
event2.html
//script部分のみ変更
//イベントリスナーの'click'の次の第2引数の関数名を
//まるっと処理に置き換えるだけ。
<script>
document.getElementById('do_dice').addEventListener('click', () => {
const dice = Math.floor(Math.random() * 6) + 1;
document.getElementById('output').textContent = dice;
});
</script>
関数宣言
この書き方もまだ多いので、覚えておいた方がよいらしい。
event3.html
<script>
function doDice() {
const dice = Math.floor(Math.random() * 6) + 1;
document.getElementById('output').textContent = dice;
}
document.getElementById('do_dice').addEventListener('click', doDice);
</script>
関数式
現在はあまり使わないようです。
event4.html
<script>
const doDice = function() {
const dice = Math.floor(Math.random() * 6) + 1;
document.getElementById('output').textContent = dice;
}
document.getElementById('do_dice').addEventListener('click', doDice);
</script>
さいごに
基本的にアロー関数を使うようです。
=>が意味不明でしたが、この記事書いてたらわかってきました。
output大事ですね。
Qiitaの書き方練習にもなりました。ありがとうございました。
※修正しました
関数式の修正依頼いただき修正しました。（コード貼り付け間違い、失礼しました。）
Qiitaの修正の仕方すらまごついてます。
早く慣れていきたいです。ありがとうございました！