先生と生徒の会話形式で理解しよう

生徒

「TypeScriptのコードを見ていると、=>っていう記号がよく出てくるんですが、これは何ですか？」

先生

「それはアロー関数と呼ばれる書き方です。関数を短く、分かりやすく書くための方法ですよ。」

生徒

「普通の関数と何が違うんですか？初心者でも使えますか？」

先生

「もちろんです。TypeScriptではとてもよく使われるので、基本から順番に見ていきましょう。」

1. アロー関数（=>）とは何か

TypeScriptのアロー関数とは、関数を定義するときの書き方の一つです。 =>という矢印のような記号を使うことから、この名前で呼ばれています。もともとはJavaScriptのES6という新しい仕様で追加された書き方で、TypeScriptでもそのまま使えます。

関数とは、「入力を受け取って、決まった処理を行い、結果を返す仕組み」のことです。料理でたとえると、材料を入れると料理が完成するレシピのような存在です。アロー関数は、このレシピを短い文章で書けるようにしたものだと考えると理解しやすいでしょう。

2. 普通の関数との書き方の違い

まずは、従来の関数とアロー関数の書き方の違いを見てみましょう。 TypeScriptでは、どちらも同じように動きますが、見た目が大きく変わります。


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

上記は、二つの数字を足し算する普通の関数です。これをアロー関数で書くと、次のようになります。


const add = (a: number, b: number): number => {
    return a + b;
};

「function」という単語がなくなり、代わりに=>が使われているのが分かります。このように、アロー関数はコードを短く書けるのが大きな特徴です。

TypeScriptでアロー関数を使うメリットはいくつかあります。初心者の方にとって特に重要なポイントを、順番に説明します。

アロー関数は、同じ処理でもコード量を減らせます。プログラムは、後から見返したり、他の人が読んだりすることが多いです。そのため、短く整理されたコードは理解しやすく、間違いにも気づきやすくなります。

TypeScriptの強みは型です。型とは、「この変数にはどんな種類の値が入るか」をあらかじめ決めておくルールのことです。アロー関数では、引数や戻り値の型を自然な形で書けるため、型チェックの効果を最大限に活かせます。

処理内容が一行だけの場合、アロー関数はもっと短く書けます。これは「省略記法」と呼ばれ、よく使われるテクニックです。


const double = (num: number): number => num * 2;

このように書くと、「受け取った数字を二倍にして返す」という意味になります。文章で長く書かなくても、動きが直感的に分かるのが魅力です。

便利なアロー関数ですが、使うときに気をつける点もあります。知らずに使うと、思わぬ動きになることがあるため、初心者のうちから理解しておきましょう。

thisとは、「今使っている対象」を表す特別な言葉です。アロー関数では、このthisの考え方が普通の関数と異なります。簡単に言うと、アロー関数のthisは「外側のthis」をそのまま使います。

初心者の段階では、「アロー関数ではthisが勝手に変わらない」と覚えておくと十分です。複雑な画面操作やイベント処理で、意図しないエラーを防ぐ助けになります。

アロー関数は便利ですが、必ず使わなければならないわけではありません。処理が長くなる場合や、役割をはっきりさせたい場合は、通常の関数の方が読みやすいこともあります。大切なのは、「短く分かりやすく書ける場面で使う」という意識です。

アロー関数は、ES6というJavaScriptの新しい仕様で登場しました。 TypeScriptは、このES6やESNextと呼ばれる最新の書き方を積極的に取り入れています。そのため、TypeScriptを学ぶことは、自然と新しいJavaScriptの書き方を学ぶことにもつながります。

特にアロー関数は、現代的なJavaScript・TypeScriptのコードでは欠かせない存在です。早い段階で慣れておくことで、他の人が書いたコードも読みやすくなります。