【JavaScript】functionを使った関数定義をアロー関数に変える方法

JavaScriptでは、関数を定義する方法がいくつかあります。
本記事では、従来のfunctionを使った書き方と、より簡潔に書ける「アロー関数」の書き方を比較しながら紹介します。
書き換えのルールはシンプルなので、functionに慣れてきた方はぜひアロー関数にも触れてみてください。

functionを使った関数定義の例
1. コードの解説
  1. 表示される内容：
アロー関数を使った書き方
1. functionバージョンとの違い
2. 注意点

functionを使った関数定義の例

<body>
  <p></p>
  <script>
    function add(a, b) {
      return a + b;
    }

    const p = document.querySelector('p');
    p.textContent = add(2, 3);
  </script>
</body>

このコードは、JavaScriptで関数を定義して結果を画面に表示するシンプルな例です。ポイントは次の通りです。

コードの解説

function add(a, b) {
  return a + b;
}

add という名前の関数を定義しています。
引数 a と b を受け取り、その合計（a + b）を返します。

const p = document.querySelector('p');

HTML内の最初の <p> 要素を取得して、変数 p に代入しています。

p.textContent = add(2, 3);

add(2, 3) の計算結果（5）を <p> 要素のテキストとして表示しています。

表示される内容：

5 が画面に表示されます。
このように、関数の結果をHTMLに反映する基本的な使い方を確認できます。

アロー関数を使った書き方

<body>
  <p></p>
  <script>
    const add = (a, b) => a + b;

    const p = document.querySelector('p');
    p.textContent = add(2, 3);
  </script>
</body>

このコードは、前回の function を使った書き方と同じ処理内容ですが、アロー関数（Arrow Function）を使ってよりシンプルに書かれています。