JavaScriptのコードをネットで調べていると、こんな不思議な記号を見たことはありませんか？
const add = (a, b) => {
return a + b;
};「えっ、function はどこ行ったの？」「この => は何？」と思いますよね。
これが現代のJavaScriptのスタンダード、「アロー関数（Arrow Function）」です。
今回は、これまでの書き方と何が違うのか、なぜみんなこれを使うのかを解説します。
1. 比較：昔の書き方 vs 今の書き方
まずは見比べてみましょう。
「足し算をする関数」を作る場合です。
これまでの書き方（関数宣言）
function add(a, b) {
return a + b;
}アロー関数（今の書き方）
// 変数の中に、関数を代入するイメージ
const add = (a, b) => {
return a + b;
};ポイントは以下の2点です。
functionというキーワードを書かなくていい！- その代わりに
=>（矢印） を書く。
これだけだと「大して変わらなくない？」と思うかもしれません。
アロー関数の真価は、ここからの「省略テクニック」にあります。
2. 魔法の省略：1行なら「return」も消せる！
処理が「1行だけで、計算結果を返すだけ」の場合、アロー関数は劇的に短く書けます。
// { } と return を消して1行にできる！
const add = (a, b) => a + b;どうですか？function も {} も return も消えて、「入力 => 出力」という数式のような見た目になりました。
このシンプルさが、プログラマーに愛されている理由です。
3. 実践：addEventListenerで使ってみよう
アロー関数が一番輝くのは、addEventListener の中です。
「無名関数（名前のない関数）」を書くのがとても楽になります。
Before（functionを使う場合）
button.addEventListener("click", function() {
console.log("クリックされました");
});After（アロー関数を使う場合）
button.addEventListener("click", () => {
console.log("クリックされました");
});function() と書くより、() => と書くほうがタイプ数も少なくてスッキリしますよね！
4. 実践コード：消費税計算マシーン
では、アロー関数の省略記法を使って、シンプルな計算ツールを作ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<body>
<h1>税込み価格計算</h1>
<input type="number" id="price" placeholder="税抜価格">
<button id="calc-btn">計算</button>
<p id="result"></p>
<script>
// 1. 計算用の関数を「アロー関数」で作る
// （1行なので return を省略！）
const calculateTax = (price) => price * 1.1;
// 2. 要素を取得
const input = document.querySelector("#price");
const btn = document.querySelector("#calc-btn");
const result = document.querySelector("#result");
// 3. クリックイベントも「アロー関数」で書く
btn.addEventListener("click", () => {
const price = Number(input.value); // 数値に変換
const taxPrice = calculateTax(price); // 関数を使う
// 小数点を切り捨てて表示
result.textContent = `税込 ${Math.floor(taxPrice)} 円です`;
});
</script>
</body>
</html>まとめ
function() {}は() => {}と書ける。- 処理が1行なら
{}とreturnを省略できる。 const 関数名 = ...のように、変数に入れて使うのが基本。
最初は => という記号に違和感があるかもしれませんが、慣れると function と書くのが面倒になるくらい便利です。
これからの応用編では、このアロー関数を積極的に使っていきましょう！
📝 今日のミニテスト
クリックで答え合わせ！
Q1. 次の関数をアロー関数に書き換えると？
function hello() { ... }
正解：const hello = () => { ... }
定数に入れて定義するのが一般的です。
Q2. 「引数 a を2倍にして返す関数」の正しい省略形は？
正解：const double = (a) => a * 2;
return と {} をセットで省略するのがポイントです。
Q3. アロー関数を使うメリットは？
正解：記述が短くなる、thisの挙動がシンプル（上級者向け）など
特に addEventListener や、配列の処理（map, filterなど）で見通しが良くなります。