アロー関数（=>）の書き方と関数式との違いを徹底解説！―JavaScript初心者エンジニア向け
山崎講師
こんにちは。ゆうせいです。
JavaScriptのコードを読んでいると、こんな書き方に出会いませんか？
const greet = () => {
console.log("こんにちは！");
};
「あれ？ function って書いてないのに関数？」「この矢印（=>）って何？」と思ったあなたへ。
それは アロー関数（arrow function） という、JavaScriptの新しい関数の書き方です！
今回は、アロー関数の書き方と、従来の関数式との違いをやさしく解説します。
アロー関数とは？
アロー関数は、ES6（2015年）で導入された新しい関数の書き方で、より短く・簡潔に関数を書くことができます。
// 従来の関数式
const greet = function () {
console.log("こんにちは！");
};
// アロー関数
const greet = () => {
console.log("こんにちは！");
};
たったこれだけ！すっきりしていて読みやすいですよね。
基本の書き方いろいろ
1. 引数がない場合
const sayHi = () => {
console.log("Hi!");
};
2. 引数が1つの場合（カッコ省略OK）
const greet = name => {
console.log("こんにちは、" + name + "さん！");
};
3. 引数が複数ある場合
const add = (a, b) => {
return a + b;
};
4. 処理が1行だけならreturnと波カッコも省略可能！
const add = (a, b) => a + b;
この省略スタイルがアロー関数の真骨頂とも言えます！
関数式との違い
アロー関数は「短く書ける」だけではありません。ふるまい（特にthisの扱い）も違うので注意が必要です。
| 比較項目 | 関数式（function） | アロー関数（=>） |
|---|---|---|
| 書き方 | functionキーワードを使う | => を使って簡潔に書ける |
thisのふるまい | 呼び出し元によって変わる（動的） | 外側のthisをそのまま使う（静的） |
argumentsオブジェクト | 使用できる | 使用できない（...argsで代用） |
コンストラクタ（new） | 使用できる | 使用できない（エラーになる） |
| 可読性 | 冗長になりがち | スッキリ書けるが慣れが必要 |
thisの違いに要注意！
この違いが最も重要なポイントです。
関数式の場合
const obj = {
name: "太郎",
greet: function () {
console.log(this.name); // thisは obj を指す
}
};
obj.greet(); // → "太郎"
アロー関数の場合
const obj = {
name: "太郎",
greet: () => {
console.log(this.name); // thisは外側のスコープ（たぶんundefined）
}
};
obj.greet(); // → undefined
アロー関数では**thisが親スコープから固定される**ので、オブジェクトのメソッドには向いていません！
よくあるミス
❌ thisを使いたいのにアロー関数を使ってしまう
const counter = {
count: 0,
increment: () => {
this.count++;
}
};
→ thisはcounterを指さず、undefinedのままなのでエラーになります。
✅ 関数式に書き直すと解決：
increment: function () {
this.count++;
}
まとめ：アロー関数 vs 関数式
| 使う場面 | どちらがおすすめ？ | 理由 |
|---|---|---|
| 短く書きたい | アロー関数 | 1行処理に最適！ |
thisを使う（オブジェクトメソッドなど） | 関数式 | thisが変わるため注意 |
| コンストラクタ関数 | 関数式 | アロー関数ではnewが使えない |
| コールバックや配列メソッド | アロー関数 | map, filterなどと相性良し |
今後の学習のヒント
アロー関数を使いこなすには、次のテーマも学んでおくと理解が深まります！
- スコープと
thisのしくみ - クロージャ（closure）とアロー関数
- コールバック関数や非同期処理（Promise, async/await）との組み合わせ
- 関数式と即時関数（IIFE）の使い方
アロー関数はJavaScriptのモダンな書き方の象徴。うまく使いこなすと、コードがぐっと読みやすくなりますよ！
ぜひ実際に書いて、関数式との違いを体感してみてください！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール