この記事は下の記事のパロディです。（筆者は別の方です。）
なので、この記事も一緒に見に行っていただけると嬉しいです。
はじめに
JavaScriptのアロー関数の書き方も本当に多いので、まとめてみました！
初心者向きの内容ですが、中級者以上の方でも知らない書き方がもしかしたらあるかもしれません。
さっと見たい人向け
| アロー関数の書き方 | 説明 | |
|---|---|---|
| 1 | () => { return "戻り値" } |
引数がない場合 |
| 2 | () => "戻り値" |
関数内のコードが1行でカッコを省略した場合 |
| 3 | () => ({foo: "bar"}) |
戻り値が連想配列の場合 |
| 4 | (e) => { return "戻り値" } |
引数が1つの場合 |
| 5 | e => { return "戻り値" } |
引数が1つでカッコを省略した場合 |
| 6 | (e1, e2) => { return "戻り値" } |
引数が2つ以上の場合 |
| 7 | (e1, e2) => { const a = e1 + e2; return a } |
関数内が複数行の場合 |
| 8 | async () => { await fetch("https://example.com") } |
非同期関数の場合 |
| 9 | (() => { return "戻り値" })() |
関数を定義と同時に実行させる（即時実行関数式） |
サンプルコード
1. 引数がない場合
const func = () => {
return "関数が実行されたよ"
}
console.log(func())
// > 関数が実行されたよ
最もシンプルなアロー関数の書き方です。
流れとしては以下のようになっています。
-
func変数にアロー関数を代入する。 - アロー関数を実行し、その関数の戻り値を
console.logで出力する。 -
関数が実行されたよが出力される。
2. 関数内のコードが1行でカッコを省略した場合
const func = () => "関数が実行されたよ"
console.log(func())
// > 関数が実行されたよ
1. 引数がない場合のように、関数の中の処理がreturn文１行のみの場合は、省略して記述することができます。
短くなりましたが機能としては全く同じです。
コードが短くなり可読性が向上するので、使える場面では積極的に活用していきましょう。
3. 戻り値が連想配列の場合
const func = () => ({foo: "bar"})
// 以下と全く同じ
// const func = () => { return {foo: "bar"} }
console.log(JSON.stringify(func()))
// > {"foo":"bar"}
では囲む記号が関数と同じ波括弧の連想配列はどのように省略するのかというと、外側を括弧()で囲むことで省略できます（わけがわからないけど）。
この書き方はMDNの下の方にも書かれています。
4. 引数が1つの場合
const func = (value) => {
return `引数は${value}だよ`
}
console.log(func("ほにょほにょ"))
// > 引数はほにょほにょだよ
アロー関数は「関数」なので、当然引数を受け取ることができます。
5. 引数が1つでカッコを省略した場合
const func = value => {
return `引数は${value}だよ`
}
console.log(func("ほにょほにょ"))
// > 引数はほにょほにょだよ
引数が1つの場合は引数の括弧を省略することができます。
ただ、PrettierやDenoのフォーマッターを使うと勝手に括弧をつけてくるので、この省略記法は嫌われている気がします。
6. 引数が2つ以上の場合
const func = (value1, value2) => {
return `引数は${value1}と${value2}だよ`
}
console.log(func("ほにょほにょ", "ごにょごにょ"))
// > 引数はほにょほにょとごにょごにょだよ
引数が2つ以上の場合は半角カンマ(,)で区切って記述します。
この場合、引数の括弧は省略できません。
7. 関数内が複数行の場合
const func = (value1, value2) => {
const a = value1 + value2
return a
}
console.log(func(1, 2))
// > 3
普通の関数と同じように複数行で記述することもできます。
以下のように中括弧を省略して書くことはできません。
const func = (value1, value2) => const a = value1 + value2; return a;
console.log(func(1, 2))
8. 非同期関数の場合
// 非同期関数を定義する。
const func = async () => {
await fetch("https://example.com")
}
// 非同期関数が実行される。
await func()
コードの中にawaitを含む場合は、関数の頭にasyncをつけることで非同期関数として定義することができます。
9. 関数を定義と同時に実行させる（IIFE）
(() => {
console.log("関数が実行されたよ")
})()
今までの例ではアロー関数を変数に代入してから実行していましたが、実は（無理やり）即座に実行させることもできます。
これは即時実行関数式（IIFE）と呼ばれるものです。
これの書き方ですが、まずアロー関数を書いて、それを括弧で囲って、その括弧の後ろにさらに括弧をつけて・・・ と結構ややこしいので、筆者はあまり好きじゃないです。
素直にrun(/* 関数 */)みたいに名前で書いてくれた方がわかりやすいのに…って思います。標準で実装してくれたらいいのに。
自力で実装する方法
JavaScript
const run = (func) => func()
TypeScript
const run = <T>(func: () => T): T => func()
ちなみに、後ろの方の括弧は今までの例で言うfunc()の括弧に相当するので、実は引数を渡すこともできます（特に意味はない）。
((value) => {
console.log(`関数が実行されたよ。引数は${value}だよ。`)
})("ほにょほにょ")
// > 関数が実行されたよ。引数はほにょほにょだよ。
こんな書き方もできますが、初心者の方がこれを見るときっと頭の頭痛が痛くなることでしょうから、忘れることをおすすめします。
おわりに
省略記法を含めて色々ご紹介しましたが、初心者の方はまず1番と7番の使い方を覚えておけば、大抵は問題ないと思います。
ただし、短くシンプルに書いた方が慣れた人にとって可読性が上がるのも事実です。
余裕があれば省略して書く方法も覚えておけば、きっと役立ちます！
ということで、ここまで読んでいただきありがとうございました。