JavaScriptのアロー関数におけるthisは、通常の関数におけるthisを違うものを指すことがあります。本記事では、便利なアロー関数におけるthisの使い方を見てみましょう。
アロー関数とは？
そもそもアロー関数とはなんでしょうか。アロー関数はJavaScriptで関数を簡潔に書くための記述方法です。（詳しくはこちら）通常の関数と比べて文法が短く、特にthisの振る舞いが大きく異なります。
通常の関数におけるthisの振る舞い
JavaScriptでは、thisの値は関数がどのように呼び出されるかによって変わります。これが時として混乱を招くことがあります。例えば、オブジェクトのメソッド内でタイマーを設定する場合、以下のような問題が生じることがあります。
const myObject = {
value: 42,
showValue: function() {
setTimeout(function() {
console.log(this.value); // ここで`this`は`myObject`ではなく、`window`を指すため、undefinedになる
}, 1000);
}
};
myObject.showValue();
ここでは、this.valueで42という値を出力しようとしていますが、thisはwindowを指すため、this.valueも値が定義されていないことになってしまいます。
アロー関数での解決
アロー関数を使うと、thisが自動的に外のスコープ（アロー関数を包んでいる関数やコンテキスト）のthisと同じになります。つまり、アロー関数はその場所でのthisを「記憶」します。上の例をアロー関数を使って書き直すと、以下のようになります。
const myObject = {
value: 42,
showValue: function() {
setTimeout(() => {
console.log(this.value); // アロー関数により、`this`は`myObject`を指し続ける
}, 1000);
}
};
myObject.showValue();
この場合、setTimeoutのコールバックで使われているアロー関数は、showValueが呼び出されたときのthis（ここではmyObject）を使用します。そのため、期待通り42が出力されます。
アロー関数は、thisが周囲のコンテキストから自動的に引き継がれるため、予期せぬthisの値に悩まされることが少なくなります。これにより、特にイベント処理や非同期処理のコードが読みやすく、理解しやすくなります。
thisの挙動は、JavaScriptのなかでも独学だと誤解したまま進みやすいところです。書いたコードを見てもらいながら誤解を潰していく学び方という選択肢もあります。
AIプログラミングスクール「SiiD」について
AIプログラミングスクール「SiiD」は、未経験からITエンジニア転職を目指す方向けのオンラインスクールです。
SiiDの特徴
- 現役エンジニアでYouTube登録者約13万人の「セイト先生」が代表兼主任講師
- 採用側の実務知見（2,000人以上の選考・150名以上のエンジニア採用）にもとづく指導
- 生成AIを取り入れた学習設計と、実務レベルのフルスタックWeb開発スキル
- Workship CAREER（株式会社GIG）と連携した無料の転職伴走支援
- 経済産業省認定のReスキル講座で、給付金の条件を満たせば実質105,600円〜
- 学割あり（35%オフ）
こんな方におすすめ
- 未経験・文系・社会人からITエンジニア転職を本気で目指したい方
- 独学に限界を感じている方
- 費用を抑えながら実務スキルと転職サポートを両立したい方
「未経験だから」とあきらめる必要はありません。採用する側を知り尽くしたプロが、給付金で負担を抑えながら内定まで伴走します。
