JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのアロー関数（太い矢印関数）とは？基本構文と使い方をわかりやすく解説

アロー関数（太い矢印関数）とは

JavaScriptのアロー関数（Arrow Function）は、ES6（ECMAScript 2015）で導入された関数の新しい記述方法です。「=>」という矢印のような記号を使うことから、「太い矢印関数（Fat Arrow Function）」とも呼ばれています。

従来のfunctionキーワードを使った定義と比べて記述が大幅に簡潔になるほか、thisの扱いがレキシカル（語彙的）になるという特徴があり、現代のJavaScript開発では広く使われています。

基本構文

アロー関数の基本構文は以下のとおりです。

(param1, param2, ...) => { }

functionキーワードが不要で、パラメータと関数本体の間に「=>」を記述するだけです。また、処理が1行で済む場合は、波括弧（{ }）とreturn文を省略して、さらに短く書くこともできます。

// 従来の書き方
const add = function(a, b) {
  return a + b;
};

// アロー関数を使った書き方
const add = (a, b) => a + b;

サンプルコード

次のコードは、JavaScriptでアロー関数を実装した例です。ボタンをクリックするとadd()アロー関数が呼び出され、32と19の合計が画面に表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result{
      font-size: 20px;
      font-weight: 500;
      color: blueviolet;
   }
</style>
</head>
<body>
<h1>Fat arrow functions</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to call the add() fat arrow function</h3>
<script>
   let resEle = document.querySelector(".result");
   let add = (a, b) => {
      return a + b;
   };
   document.querySelector(".Btn").addEventListener("click", () => {
      resEle.innerHTML = "Sum of 32 and 19 =" + add(32, 19);
   });
</script>
</body>
</html>

実行結果

ページを表示した直後の状態です。

JavaScriptのアロー関数（太い矢印関数）とは？基本構文と使い方をわかりやすく解説

「CLICK HERE」ボタンをクリックすると、アロー関数add()によって計算された合計値「51」が表示されます。

JavaScriptのアロー関数（太い矢印関数）とは？基本構文と使い方をわかりやすく解説

アロー関数の主なメリット

  • 記述が簡潔になる：functionキーワードやreturn文を省略でき、コードの可読性が向上します。
  • thisをレキシカルに束縛する：アロー関数内のthisは、定義された場所の外側のスコープを引き継ぎます。そのため、コールバック関数内でのthisに関するトラブルを防げます。
  • call()・apply()・bind()でthisを変更できない：意図しないthisの上書きが起こらないため、安全に利用できます。

このように、アロー関数は単なる省略記法にとどまらず、thisの挙動を予測しやすくする強力な機能です。特にコールバック処理が多い場面では、積極的に活用するとよいでしょう。

  1. JavaScriptのアロー関数を使ってはいけない場面とは？オブジェクトメソッドでの落とし穴

    JavaScriptのアロー関数（矢印関数）は、コードを簡潔に書ける便利な構文ですが、あらゆる場面で使えるわけではありません。特にオブジェクトのメソッドとしてアロー関数を定義するのは避けるべきです。 その理由は、アロー関数には独自のthisが存在しないためです。アロー関数は、定義された場所を取り囲むレキシカルスコープからthisの値を受け取ります。グローバルスコープで定義した場合、そのthisはオブジェクト自身ではなくwindowオブジェクトを参照します。 その結果、本来なら対象オブジェクトのプロパティに対して行うはずの設定や参照が、誤ってwindowオブジェクトのプロパティに対して実行され

  2. JavaScriptの匿名ラッパー関数(IIFE)とは?使い方を徹底解説

    匿名ラッパー関数(Anonymous Wrapper Function)は、コードスニペットやJavaScriptライブラリ、個々の関数などを包み込むために使われる手法です。コードの可視性や名前空間(namespace)を制御することで、他のライブラリや外部スクリプトとの名前の衝突・競合を防ぐことができます。 この目的のために広く利用されているのが、IIFE(即時実行関数式：Immediately Invoked Function Expressions)です。IIFEは定義されたその場で即座に実行される関数式であり、関数内部で宣言された変数は外部からアクセスできないため、グローバル名前空間を