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

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

JavaScriptのアロー関数（矢印関数）は、コードを簡潔に書ける便利な構文ですが、あらゆる場面で使えるわけではありません。特にオブジェクトのメソッドとしてアロー関数を定義するのは避けるべきです。

その理由は、アロー関数には独自のthisが存在しないためです。アロー関数は、定義された場所を取り囲むレキシカルスコープからthisの値を受け取ります。グローバルスコープで定義した場合、そのthisはオブジェクト自身ではなくwindowオブジェクトを参照します。

その結果、本来なら対象オブジェクトのプロパティに対して行うはずの設定や参照が、誤ってwindowオブジェクトのプロパティに対して実行されてしまい、予期しない動作やバグの原因となります。

アロー関数を使うべきでないケースのサンプルコード

次のコードは、オブジェクトobjのadd()メソッドをアロー関数で定義したときに、どのような問題が発生するかを示したものです。

<!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>アロー関数を使うべきでないケース</h1>
<br />
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、オブジェクトobjのadd()メソッドが呼び出されます</h3>
<script>
   let BtnEle = document.querySelector(".Btn");
   let resEle = document.querySelector(".result");
   let obj = {
      a: 22,
      b: 44,
      add: () => {
         return this.a + this.b;
      },
   };
   BtnEle.addEventListener("click", (event) => {
      resEle.innerHTML = `${obj.a} と ${obj.b} の合計 = ${obj.add()}`;
   });
</script>
</body>
</html>

実行結果

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

「CLICK HERE」ボタンをクリックすると −

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

ボタンを押してもNaNが表示されてしまいます。これはadd()の内部にあるthisがobjではなくwindowオブジェクトを指しているためです。

解決策：通常の関数でメソッドを定義する

オブジェクトのメソッドを定義する場合は、従来の関数式またはメソッド省略記法を使用しましょう。

let obj = {
   a: 22,
   b: 44,
   add() {
      return this.a + this.b; // this は obj 自身を正しく参照する
   },
};

このように書き換えれば、thisは呼び出し元のオブジェクトobjを正しく参照し、期待どおりの合計値（66）が返されます。

その他にアロー関数の使用を避けたい場面

  • イベントハンドラ：thisでイベント発生元の要素を参照したい場合
  • コンストラクタ：アロー関数はnewで呼び出せず、コンストラクタとして利用できません
  • プロトタイプメソッド：インスタンスをthis経由で参照できません
  • argumentsが必要な処理：アロー関数にはargumentsオブジェクトが存在しません

このように、thisの挙動が重要になる場面では、従来型の関数を選択することが安全です。

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

    アロー関数（太い矢印関数）とは 」という矢印のような記号を使うことから、「太い矢印関数（Fat Arrow Function）」とも呼ばれています。 従来のfunctionキーワードを使った定義と比べて記述が大幅に簡潔になるほか、thisの扱いがレキシカル（語彙的）になるという特徴があり、現代のJavaScript開発では広く使われています。 基本構文 アロー関数の基本構文は以下のとおりです。 { } 」を記述するだけです。また、処理が1行で済む場合は、波括弧（{ }）とreturn文を省略して、さらに短く書くこともできます。 a + b; サンプルコード 次のコードは、JavaScr

  2. HDMIスプリッターとスイッチの違いとは？使い分けのポイントを徹底解説

    現代の映像・音声エンターテインメントの多くは、HDMIによって支えられています。SCART端子やVGAケーブルをいじくり回す時代はすでに過去のもので、HDMIケーブルを両端に差し込むだけで、すぐに視聴を始められます。 ところで、HDMIの接続管理をさらに便利にしてくれる小型デバイスが存在することをご存じでしょうか？それが「スプリッター」と「スイッチ（セレクター）」です。どちらもHDMI接続を整理し、快適なAV環境を実現するうえで重要な役割を担っています。 この記事では、それぞれの仕組みと活用方法について詳しく解説していきます。 HDMIスプリッターの使い方 HDMIスプリッターの役割はシン