今回は、JavaScriptでよく使う「アロー関数」について。
これまで使っていたfunction関数との違いも。
アロー関数とは？
アロー関数とはfunction関数よりも、より短く記述できる関数のこと。
ES2015から導入されました。
サンプルプログラムを書いてみよう
それでは実際に書いてみましょう。
今回はfunction関数とアロー関数の書き方の違いを紹介しながら、サンプルプログラムを書いていきます。
function関数
function関数の基本的な書き方の公式はこちら。
function 関数名(引数) {
//処理内容
return 戻り値
}
そして、サンプルプログラムが以下になります。
function greeting() {
document.write('こんにちは！');
}
greeting();
// →ブラウザに「こんにちは！」と表示されます。
greetingの名前の関数を宣言。
そして、document.writeで「こんにちは！」とブラウザに表示させるようにします。
結果、ブラウザに「こんにちは！」と表示されました。
これがfunction関数の基本的な書き方です。
アロー関数
アロー関数の基本的な書き方の公式はこちら。
let 変数名 = (引数1, 引数2, ...) => {
実行される処理;
...
return 戻り値;
};
そしてサンプルプログラムはこちら。
<div id="btn">文字が変わります</div>
<script>
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
btn.textContent = 'ほい！文字が変わりました！';
});
</script>
「id=”btn”」を持ったボタンを、getElementByIdで取得。
取得したbtnをクリックすると、「ほい！文字が変わりました！」の文字に変わるようなプログラムを書きます。
すると、btnの文章をクリックすると、文字が変わりました。
これがアロー関数の書き方の例でした。
まとめ
以上が、「アロー関数」についてでした。
JavaScriptでこれから頻繁に使われる関数の記述方法なので、是非理解していきましょう。
