ひな姉と学ぶJavaScript！スッキリ書ける「アロー関数」ってなに？

Javascriptの解説記事では、先輩エンジニアとの対話形式でJavascriptの学習を進めていきます。

プログラミング初心者の方、初めてプログラミングを学ぼうと思っている方、仕事の都合上Javascriptが必要になったという方にとって有益なコンテンツになっています。

少しでも当てはまる方は、ぜひみていってくださいね！

アロー関数とは?

登場人物
・天野 陽菜（あまの ひな）：自社サービス開発企業に勤めるフロントエンドエンジニア（29歳）。明るくフレンドリーで、後輩の育成にも積極的。実は元ゲーマーで方向音痴。

・ 後輩ちゃん：JavaScriptを学び始めた初心者。疑問を持ちつつも、天野先輩の解説で理解を深めていく。

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]今回からJavascriptの勉強、お願いします！[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]こんにちはー！やる気満々だね、嬉しいな！
今日はね、コードをもっとスッキリ書けるようになる、ちょっとカッコイイ書き方を紹介しようと思ってるんだ。[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_57_27.png” name=”後輩ちゃん” type=”l line”]カッコイイ書き方…？なんですかそれ、気になります！[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]ふふふ、その名もアロー関数！ まるで弓矢みたいでしょ？
これが使えるようになると、コードが短く、そして読みやすくなる場面がたくさんあるんだ。
特に、他の関数の中でちょこっとした処理を書きたい時とかに大活躍するよ！[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]アロー関数…！名前は聞いたことあるような、ないような…。でも、コードがスッキリするのは嬉しいです！[/voice]

Javascriptの関数をおさらい

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]よし、じゃあまず、今まで使ってきた普通の関数の書き方、ちょっと思い出してみようか。
例えば、二つの数字を足し算する関数、どうやって書くか覚えてる？[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_57_27.png” name=”後輩ちゃん” type=”l line”]えっと… functionって書くやつですよね？こんな感じでしたっけ？[/voice]

function add(a,b) {
return a + b;
}
console.log(add(3,5));//8と表示される

解説:addという関数を作成しました。
addという関数内では、a+bという処理を行います。
最後に、console.logでaddの結果(今回は3+5なので8になる)を表示します。

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]大正解！ さすがだね！これが基本の関数の書き方。
じゃあ、この add 関数をアロー関数で書くとどうなるか、見てみようか！[/voice]

const addArrow = (a,b) => {
return a + b;
}
console.log(addArrow(3+5));//これも8って表示される

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]じゃーん！これがアロー関数版の add 関数だよ！[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]わ！本当だ！ function っていう言葉がなくなって、代わりに=>っていう矢印みたいなのが入ってますね！これがアロー…？[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]その通り！この => がアロー（矢印）の由来なんだ。なんだかシュッとしてるでしょ？[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]確かに、少し短くなった気がします！[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]でね、アロー関数はもっとスリムになれるんだ。例えば、関数の中の処理が return 一行だけの場合、{} と return を省略できちゃう！[/voice]

const addArrowSlim = (a,b) =>  a + b;
console.log(addArrow(3+5));//これも8って表示される

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]ええー！すごい！一行になっちゃった！これは見やすいかも！[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]でしょでしょ？さらに、引数が一つだけの場合は、引数を囲む () も省略できるんだ。例えば、数字を二乗する関数とか。[/voice]

//普通の関数
function square(x){
return x * x;
}

//アロー関数
const squareArrow = x => x * x;
console.log(squareArrow(4));//16

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]おおー！どんどん短くなりますね！じゃあ、もし引数がない場合はどうなるんですか？[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]いい質問だね！引数がない場合は、() は省略せずに書くんだ。こんな感じ。[/voice]

const seyHello = () => {
console.log('こんにちは!');
}
seyHello();//こんにちは！って表示される

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_38.png” name=”後輩ちゃん” type=”l line”]なるほどー！いろんなパターンがあるんですね。慣れるまでちょっと練習が必要かも…。[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]大丈夫、大丈夫！最初は見慣れないかもしれないけど、使っていくうちに自然と手が動くようになるよ。まるでゲームのコマンド入力みたいにね！[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]天野先輩の例え、いつも面白いです！[/voice]

解説:アロー関数を使う場合、関数の処理がreturn文1行だけの時は、returnと{}を省略することが可能です。
アロー関数の引数が1つだけの場合、()も省略することができます。
個人的にはあまり省略形を使うことはありませんが、覚えておくと他の人が書いたコードを読む時に便利です！

アロー関数のメリットって?

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]アロー関数のいいところは、さっきから見てるようにコードが短くスッキリ書けること。これは大きなメリットだね。あと、もう一つ大事なポイントがあって、それは this の扱いが普通の関数とちょっと違うんだ。[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_38.png” name=”後輩ちゃん” type=”l line”]this …ですか？なんだか難しそうな響き…。[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]うん、this はね、JavaScriptの中でもちょっとクセのある子でね。普通の関数だと、this が何を指すかは『どうやって呼び出されたか』で変わっちゃうことがあるんだけど、アロー関数の場合は、基本的に『アロー関数が書かれた場所』の this をそのまま引き継ぐんだ。[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_38.png” name=”後輩ちゃん” type=”l line”]ひ、引き継ぐ…？[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]そうそう。例えば、オブジェクトのメソッドの中で、さらにコールバック関数を使う時とかに、this がどこを向いてるか混乱しにくくなるんだよ。…って、ちょっと専門的すぎたかな？これはまた別の機会に、もっと詳しくお話しするね！今は『ふーん、そんな違いもあるんだな』くらいでOK！[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]は、はい！とりあえず、今はスッキリ書けるのが便利って覚えておきます！[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]それで十分！理解が早くて助かるよー！[/voice]

解説:実は、functionで定義した関数と、アロー関数で定義した関数には違いがあります。
this、argumants,superへのバインドがない、コンストラクターとして使用することができない、ジェネレーター関数として使用することができないなど、さまざまな違いがあります。
今回は、「少し違いがあるんだな」と覚えてもらえればOKです！

アロー関数が大活躍する場面！

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]じゃあ、アロー関数が特に輝く場面を紹介するね！それは、配列を操作するメソッドと一緒に使う時なんだ。[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_57_27.png” name=”後輩ちゃん” type=”l line”]配列のメソッド…？ map とか filter とかですか？[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]そうそう、それそれ！例えば、数字の配列の各要素を2倍にしたい時、map を使うよね。普通の関数で書くとこんな感じ。[/voice]

const numbers = [1,2,3,4,5];
const dubledNumbers = numbers.map(function(number){
return number * 2;
});
console.log(dubledNumbers);//[2,4,6,8,10]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]これをアロー関数で書くと…[/voice]

const numbers = [1,2,3,4,5];
const doubleNumbersArrow = numbers.map(number => number * 2);
console.log(doubledNumberArrow);//[2,4,6,8,10]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]うわー！めちゃくちゃスッキリしましたね！一行で書けちゃうんだ！[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]でしょ？まるで装備を最適化してステータスアップした感じ！こういう短い処理をコールバック関数として渡すときに、アロー関数は本当に見やすくて便利なんだよ。他にも forEach とか filter とか、色々な配列メソッドで大活躍するから、ぜひ使ってみてほしいな。[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]はい！なんだかアロー関数、好きになってきました！[/voice]

解説:mapやforEachなどの、コールバック関数を持つタイプのメソッドを扱う場合、functionで定義する形の関数を使用すると、コードが冗長になってしまいます。
アロー関数を使用することで、短くすっきりとしたコードを書くことができます！

まとめと応援メッセージ

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]よかった！今日のポイントをまとめると…

・アロー関数は => を使って書く、新しい関数の書き方だよ！
・function キーワードが不要で、条件によっては {}, return, () も省略できてスッキリ！
・特に配列のメソッド（map とか）と一緒に使うと、コードが読みやすくなるよ！
・this の扱いがちょっと違うけど、それはまた今度詳しくね！ [/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]天野先輩、ありがとうございます！アロー関数、使ってみたくなりました！[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]うんうん！最初は書き慣れないかもしれないけど、積極的に使ってみるのが上達への近道だよ。もし途中で道に迷ったら…あ、いや、コードで迷ったら、いつでも聞いてね！私もたまにリアルで道に迷うけど、JavaScriptの道案内は得意だから！ [/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]頼りにしてます！ひな姉、今日もありがとうございました！[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]どういたしまして！また一緒に楽しく学んでいこうね！じゃあ、また次回！ [/voice]