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

生徒

「TypeScriptで関数を書くときに、アロー関数っていうのを見かけたんですけど、普通の関数と何が違うんですか？」

先生

「アロー関数は、ES6（JavaScriptの新しいバージョン）から追加された、より簡潔で読みやすい関数の書き方なんです。TypeScriptでも使えますよ。」

生徒

「どういうときに使うんですか？書き方も知りたいです。」

先生

「それでは、基本的なアロー関数の書き方と使い分け方を順番に説明していきましょう！」

1. アロー関数とは？

TypeScriptのアロー関数は、よりシンプルで読みやすい形で関数を書ける新しい記法です。名前の通り「矢印（=>）」を使って定義し、通常のfunctionキーワードよりも短く書けるため、初心者でも扱いやすいのが特徴です。特に、処理が短い関数やコールバック関数では、アロー関数の方が視認性がよく、意図が伝わりやすくなります。

また、アロー関数にはもう1つ大きな特徴があり、それがthis（ディス）の扱い方です。従来の関数では呼び出し方によってthisが指す対象が変わりますが、アロー関数では「定義された場所のthisをそのまま使う」仕組みになっており、オブジェクトやイベント処理でとても扱いやすくなります。

たとえば、次のように「挨拶を表示するだけ」のシンプルなコードも、アロー関数ならスッキリ書けます。


// 通常の関数
function greet(): void {
    console.log("こんにちは！");
}

// アロー関数
const greet = (): void => {
    console.log("こんにちは！");
};

どちらも同じ動きをしますが、アロー関数は余計な記述が減り、短い処理を直感的に書けるのが魅力です。まずは「簡単な関数からアロー関数に置き換えてみる」ことから始めると理解が深まりやすくなります。

2. 基本的なアロー関数の書き方

アロー関数は「より短く・より見やすく」関数を書くための記法です。まずは、従来のfunctionキーワードを使った関数と、アロー関数を並べて比べてみましょう。書き方がどう変わるのかを知るだけで、理解がグッと進みます。

通常の関数（functionキーワード）


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

この書き方はもちろん正しく、今でも広く使われています。ただ、短い関数を書くときには少し長く見えてしまうことがあります。

アロー関数で書いた場合


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

アロー関数では、functionを省略して「=>」でつなぐだけなので、見た目がすっきりします。特に、処理内容がシンプルな関数ほど、アロー関数の簡潔さが活きてきます。

さらに、アロー関数の書き方は「関数を変数に代入して使う」という感覚にも似ているため、初心者でも理解しやすい構造になっています。たとえば、次のように値を入れて計算してみると、違いが直感的に分かるはずです。


console.log(add(2, 3)); // 5 が表示される

どちらの書き方でも結果は同じですが、アロー関数は「短くまとまって読みやすい」という点で人気が高く、実際の開発現場でもよく使われています。

3. もっと短く書ける「省略記法」

アロー関数の大きなメリットの1つが、処理が1行で終わる場合にとても短く書けることです。中身がシンプルなときは、{}とreturnを省略して書くことができます。

まずは、通常のアロー関数の書き方をもう一度確認してみましょう。


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

この関数は「2つの数値を受け取って、その合計を返す」という、とてもシンプルな処理です。処理が1行だけなので、アロー関数では次のようにさらに短く書くことができます。


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

波かっこ{}とreturnを書かなくても、=> の右側に書いた式の結果がそのまま戻り値になる、というイメージです。たとえば、次のように呼び出すと合計が表示されます。


console.log(add(2, 3)); // 5 が表示される

この「省略記法」は、足し算のような簡単な計算だけでなく、「文字列を少し加工するだけ」などの短い処理にも向いています。コード量が減ることで、TypeScriptのアロー関数が何をしているのかが一目で分かりやすくなり、読みやすさにもつながります。

4. 引数が1つだけの場合の省略

アロー関数では、引数が1つだけのとき、JavaScriptの書き方としては()を省略して書くこともできます。たとえば、ある数を2倍にするだけなら、次のようにとても短く書けます。


// JavaScriptではよく見る書き方
const double = x => x * 2;

ただし、TypeScriptでは引数に型をつけるのが基本なので、次のように書いてしまうとエラーになります。


const square = n: number => n * n; // エラー！型をつける場合は()を省略できない

このように、n: numberのような型注釈を書くときは、必ず()で引数全体を囲む必要があります。TypeScriptで安全にアロー関数を使うためには、次のように書くのが正しい形です。


const square = (n: number): number => n * n;

console.log(square(4)); // 16 が表示される

「引数が1つならカッコを省略してもよい」のはあくまで型を書かない場合の JavaScript の書き方です。TypeScriptでアロー関数を使うときは、型をつけるなら必ず()をつけると覚えておくと、引数の書き方で迷わずに済みます。

5. アロー関数とthisの違い

通常の関数とアロー関数では、thisの扱いが異なります。thisは「今どのオブジェクトを指しているか」を表すキーワードです。

通常の関数ではthisの値が呼び出し方によって変わりますが、アロー関数は定義されたときのthisをそのまま使います。この特徴により、イベント処理やコールバック関数で便利に使えます。

通常の関数の場合


const obj = {
    value: 10,
    show: function() {
        setTimeout(function() {
            console.log(this.value); // undefined
        }, 1000);
    }
};
obj.show();

アロー関数を使った場合


const obj = {
    value: 10,
    show: function() {
        setTimeout(() => {
            console.log(this.value); // 10
        }, 1000);
    }
};
obj.show();

6. アロー関数の使い分け

短い処理や1行の計算 → アロー関数（省略記法）がおすすめ
コールバック関数（イベント処理や配列操作など） → アロー関数が便利
クラスやオブジェクトのメソッド → thisの扱いによってアロー関数を選択
長い処理や複雑な関数 → 通常のfunctionキーワードでもOK

まとめ

TypeScriptにおけるアロー関数は、現代的な関数定義のスタイルとして非常に有効であり、特に短い処理やコールバック関数の記述において高い利便性を発揮します。従来のfunctionキーワードと比較して、記述が簡潔になり、コードの可読性が向上する点が大きなメリットです。特に、アロー関数ではthisの扱いが固定されているため、非同期処理やクラス内メソッド、イベントリスナのような場面で誤ったthis参照を防ぐことができます。

ただし、万能というわけではなく、コンストラクタやプロトタイプベースの継承には適していません。用途に応じて通常の関数との使い分けをすることが、コードの品質を保つうえで非常に重要です。型を明示したい場面では引数の括弧を省略できないなど、TypeScript特有の注意点もあるため、正しい文法と構文ルールを理解することが求められます。

また、関数内の処理が1行だけであれば、ブロックとreturnの省略によってさらなる簡潔さが得られます。特に配列操作やマッピング、フィルタ処理のように一時的な処理を定義する場合においては、省略記法を使うことで見通しのよいコードが書けるようになります。

実際のプロジェクトでも、例えばAPIレスポンスの整形や、イベントハンドラの定義など、アロー関数を使用することで不要なbindや関数スコープの混乱を避けることが可能です。以下に、よくある実践的なコード例を示します。


// ユーザーリストから名前だけを抽出する例
const users = [
    { id: 1, name: '田中' },
    { id: 2, name: '佐藤' },
    { id: 3, name: '鈴木' }
];

const names = users.map(user => user.name);
console.log(names); // ['田中', '佐藤', '鈴木']

このように、アロー関数はmapやfilterなどのメソッドとも相性が良く、TypeScriptにおいてもその型定義と組み合わせることで、安全かつ直感的に扱うことができます。プログラムの可読性・保守性・拡張性を高めるためにも、アロー関数の特徴を理解し、適切に使いこなせるようになることがこれからの開発者には欠かせません。

先生と生徒の振り返り会話

生徒

「アロー関数って、ただ短く書けるだけかと思ってたけど、thisの使い方に違いがあるんですね！」

先生

「そうなんです。そこが一番のポイントです。特に非同期処理の中でのthisの扱いには注意が必要ですよ。」

生徒

「じゃあ、イベントリスナーとかタイマーの中で使うと便利ってことですね？」

先生

「そのとおりです。あと、省略記法もうまく使えばコードがかなりスッキリしますよ。ただし、型を指定するときには括弧を省略できないこともあるので注意しましょう。」

生徒

「なるほど。状況によって普通の関数とアロー関数を使い分けるのがコツなんですね！」

先生