よく他人のソースコードを見ている時にギョっとなる関数の書き方がありませんか？？それ、大概はアロー関数式でかかれたJavaScriptの関数です。
アロー関数がどういうものかを理解できていればキョっとなる必要はほぼ無くなります。普通の関数とさほど変わりませんし、一度書き方を覚えてしまえばコーディングの省エネにもなりますので、要所要所で使ってもいいかもしれません。
ただ、他のエンジニアが見ても分かりやすい記述方法をさいようすることが最優先事項ですので、むやみに多用したり、チームメイトのスキルを考えないで乱用することは避けるべきです。多用し過ぎると周りのエンジニアから「あの人コードのクセがすごいんじゃぁ」と突っ込まれる可能性も無きにしも非ずなので注意が必要です。
もちろんチーム内で規則として原則アロー関数を用いる、というようなルールがあればそれに従う他ありませんね。いずれにせよアロー関数式を知っておくことは重要事項となります。
では、アロー関数とはどのようなものか一緒に見ていきましょう。
アロー関数とは？
アロー関数式を使うことで、関数の定義を通常の関数の定義よりも簡略化してコーディングすることができます。
アロー関数式を使わない場合の例を最初に挙げます。
// 非アロー関数式
let 変数名 = function(引数1, 引数2, ...){
処理を記述
...
...
...
return 戻り値;
};次にアロー関数式を用いた関数の型をご覧ください。
// アロー関数式
let 変数名 = (引数1, 引数2, ...) => {
処理を記述
...
...
...
return 戻り値;
};お分かりいただけましたでしょうか？非アロー関数式で記述した「function」が省略され、「引数括弧の後ろに=>」が追加されているだけです。
どちらも関数としての機能は全く同じで、function内に書いた処理は同様に処理されます。ポイントをまとめておけば何も怖くありません。下記を頭に叩き込んでおいてください。
- 「function」の省略
- 「引数括弧の直後に=>（アロー）」を追記
たった2点……ここだけ重要ポイントなので押さえておいてください。全く難しくないですね。カンタンカンタン。
アロー関数式はさらに省略が出来る
ここまでは２つのポイントだけ抑えればOKでしたが、実はアロー関数式はさらなる省略に対応しています。おそらくこの省略が、エンジニアが混乱するポイントになるのではないかと考えています。
早速、さらなる省略形を見てみましょう。アロー関数式第2形態ともいえますね。
let 変数名 = () => { // 引数が無い場合は()のみ記述
処理を記述
...
...
...
return 戻り値;
};引数が無い場合は引数内部を書かなくてOKです。型としては() => {となりますね。この空括弧が「？？？」となる初心者の方はこういうパターンもありだということを頭に入れておきましょう。
もう一つ、初心者を悩ます第３形態が存在します。それが、戻り値が必ずある場合のアロー関数式です。アロー関数式をGoogle等を使って調べているエンジニアの多くはこのパターンで引っかかってるのかもしれません。誰かが教えてくれないと、この文法は読み解けないですよね……
let 変数名 = (引数1, 引数2, ...) => 戻り値; // 戻り値は必須ですなんじゃこりゃって感じですかね。フリーザで言うと最終形態ですね。
まだよく分からないと思うので、これを実際のコードに落とし込んでみましょう。
let getTotalVolume = (x, y) => x + y;こんな感じで2つの引数を足し算した数を戻り値として返す式が1行で書けます。returnは省略してしまってください。実際にこのアロー関数を使うには次のようにします。
let getTotalVolume = (x, y) => x + y;
console.log(getTotalVolume(10, 7)); // コンソールに 17 が表示されます非常にシンプルでクールな感じがします。この型を知っていると「お、やりますな」認定間違いなしなので、是非覚えておいてください。
アロー関数式の落とし穴２選
以下の2つの頭の片隅に入れておくと後々変なところでハマらなくなるので是非覚えていってください。
- アロー関数式にはArgumentオブジェクトが使えない
- 戻り値がオブジェクトリテラルでは
({a: x, b: y})のように「()」括弧で囲む
１は「そうなんだ」程度でもいいかなと思いますが、２についてはちょっと補足しますね。
まずエラーとなるサンプルコードを提示してみます。
let setValueIntoObject = (x, y) => {a: x, b: y}; // これダメな書き方です上は構文的にエラーになります……戻り値がオブジェクトリテラルの場合には「()」が外側にある必要があるんですね。次が正しい例です。
let setValueIntoObject = (x, y) => ({a: x, b: y}); // ()で囲んだご自身でコーディングする際にハマりがちなのでご注意ください。
まとめ
- 「function」の省略
- 「引数括弧の直後に=>（アロー）」を追記
- 引数不要の場合は「()」のみ記述する
- 1行で書く場合には、末尾の式はretrunを意味する
- Argument（引数）オブジェクトは関数内で使用不可
- オブジェクトを返すときは「()」を付けて「({a: x……})」の形をとる
まとめると全部でたった６つのポイントを押えておけば大丈夫そうです。もし4つ目なんだったっけ？6つ目なんだったっけ？となったらこのページを何度も反復して見返してみてください。反復することで脳に定着する確率が格段に上がります。
では、今回はアロー関数式についての整理とまとめのご紹介でした。よいコーディングライフを！
