functionとアロー関数の違いを解説！関数の書き方と使い方

JavaScriptでは、関数を定義する方法が複数あります。「function宣言」と「アロー関数」です。

一見似ているようで、挙動や使いどころには明確な違いがあります。

本記事では、functionとアロー関数の基本的な書き方と、その違いについてわかりやすく解説します。

基本のfunction宣言

function greet(name) {
  return "こんにちは、" + name + "さん！";
}

console.log(greet("太郎")); // こんにちは、太郎さん！

特徴

• function キーワードを使って定義。
• 巻き上げ（ホイスティング）がされる（関数を定義前に呼び出すことが可能）。
• this の参照先が定義された場所によって決まる。

アロー関数の書き方

const greet = (name) => {
  return "こんにちは、" + name + "さん！";
};

console.log(greet("花子")); // こんにちは、花子さん！

特徴

• より短く書ける。
• this を引き継ぐ（レキシカルスコープになる）。
• 無名関数（関数名を持たない）として使うことが多い。

アロー関数の省略形

アロー関数の魅力の1つは、短く書ける省略記法にあります。構文の簡略化が可能な条件とそのパターンを以下に紹介します。

関数本体が1行だけで、式（戻り値があるもの）の場合は {} と return を省略できる

const square = n => n * n;
console.log(square(4)); // 出力: 16

• この形式では、暗黙的に return されます。
• 処理が1行でも、if 文や console.log() など、return しない処理の場合は {} を省略できません。

引数が1つだけの場合は括弧を省略できる

const greet = name => console.log(`こんにちは、${name}さん`);
greet("田中");
// 出力: こんにちは、田中さん

• 引数が 1つだけ のとき、() を省略できます。
• 引数が 0個または2個以上 の場合は、省略できません（() が必要です）。

const sayHello = () => console.log("Hello!");
const add = (a, b) => a + b;

オブジェクトリテラルを返すときは () で囲む

const getUser = () => ({ name: "山田", age: 30 });

• () で囲まないと、{} が関数本体のブロックと解釈されてしまいます。

// NG例: undefined が返る
const getUser = () => { name: "山田" }; // 戻り値なし

アロー関数の省略形チェックポイント

このように、アロー関数は簡潔に記述できる反面、省略ルールを正しく理解していないと予期せぬ挙動をすることもあります。省略形を多用する際は、可読性とのバランスも意識するようにしましょう。

functionとアロー関数の違いまとめ

実例：thisの違いを体感してみよう

const obj = {
  name: "太郎",
  sayHello: function() {
    console.log("function:", this.name);
  },
  sayHelloArrow: () => {
    console.log("arrow:", this.name);
  }
};

obj.sayHello();      // function: 太郎
obj.sayHelloArrow(); // arrow: undefined（グローバルのthis）

アロー関数は this を外側のスコープから引き継ぐため、obj に束縛されません。

argumentsオブジェクトについて

JavaScript の function では、関数に渡されたすべての引数を格納した「argumentsオブジェクト」を利用することができます。

例：functionでのarguments

function showArguments() {
  console.log(arguments);
}

showArguments("りんご", "バナナ", "みかん");
// 出力: [Arguments] { '0': 'りんご', '1': 'バナナ', '2': 'みかん' }

• arguments は配列のようなオブジェクトで、インデックスでアクセスできます。
• 配列メソッドは直接使えないため、Array.from(arguments) などで変換すると便利です。

アロー関数ではargumentsは使えない

アロー関数には arguments オブジェクトが存在しません。このため、同様のことを行うには「Restパラメータ」を使用する必要があります。

const showArguments = (...args) => {
  console.log(args);
};

showArguments("りんご", "バナナ", "みかん");
// 出力: ['りんご', 'バナナ', 'みかん']

• ...args は ES6 で導入された構文で、可変長引数を配列として受け取れます。
• アロー関数では arguments の代わりに、常に ...args を使うのが推奨されます。

補足：配列と「配列風オブジェクト」の違い

• arguments は「配列風オブジェクト」であって、map() や forEach() などの配列メソッドは使えません。
• 一方、...args は本物の配列です。

使い分けのポイント

• this を使う処理や、メソッドには function を使った方が分かりやすい
• コールバックや短い処理にはアロー関数が便利
• arguments を使う必要があるときは function を選ぶ

まとめ

function とアロー関数は、記述のスタイルだけでなく、挙動にも違いがあります。特に this の扱い方は混乱しやすいポイントなので、状況に応じて適切な形式を選びましょう。