普段から使うことの多いアロー関数の省略について、ざっと省略の仕方をまとめました。
1.省略しない場合と省略した場合の比較
例として、渡された数値を2倍にして返す関数を考えます。
before
const doubleNumber = (number) => {
return number * 2;
}
after
3行あったコードが1行で記述されています。
const doubleNumber = nubmer => number * 2;
上記のようなコードは、Javascript開発に携わっていると、親の顔より見た光景になると言っても過言ではありません。
見慣れてしまえば、なんのことはないのですが、なれていないと「??」と戸惑うこともあるかもしれません。
では、どのような省略の過程を経て3行が1行になったのか見てみます。
引数のカッコの省略
まずは引数周りです。
before
(number)
↓
after
number
引数に注目してみると、（）が省略されています。
これは、引数が一つの時()を省略することができるからです。
引数がなかったり、引数が複数ある場合は（）は省略できません。
(number)
// ↓
number // ◯
(number1, number2)
// ↓
number1, number2 // × (省略不可)
()
//↓
// × (省略不可。そもそもなんだか分からんだろう。)
ということで、引数のカッコを省略した版は以下の通りです。
const doubleNumber = number => {
return number * 2;
}
それでは、次の省略を見てみましょう。
{} と return の省略
次に省略できる可能性のあるものはブロックを表すの{}とreturnです。
前述の引数だけ省略した版から、これらを省略してみます。
before
const doubleNumber = number => {
return number * 2;
}
↓
after
const doubleNumber = number => number * 2
はい。これでできる省略はすべて行いました。
この{}が省略できる条件は、関数内のコードが式1つだけのときです。
なので、以下のような場合は省略できません。
const greetFunction = name => {
const greet = `hello ${name}`;
return greet;
}
もし、このようにひとつの式で終わっていれば、さらに省略できるというわけです。
const greetFunction = name => {
return `hello ${name}`;
}
↓
const greetFunction = name => `hello ${name}`;
※この例では、関数の中が2行でも1行でもさほど変わりないのですが、実際のコードはもっと複雑なことも少なく有りません。無理に1行にして、可読性が損なわれたりしないか注意しましょう。
returnするのが、Objectの場合
returnするのがObjectの場合。
before
const createObj = (name) => {
return {
userName: name
}
}
今まで見てきた省略のルールに従うと、このようにできそうな気がしますが...
const createUser = name => {userName: name}
これは×です。
この場合、｛｝はオブジェクトの｛｝ではなく、関数の｛｝と認識されていまいます。
以下の状態と同じことになります。
const createUser = name => {
userName: name
}
この場合userNameはオブジェクトのプロパティ名ではなく、ラベルと解釈されるので、意図する状態ではありません。
そのため、returnするのがojbectの場合は、以下のように()でobjectを囲むようにします。
after
const createUser = name => ({userName: name})
まとめ
以上、アロー関数の省略についてでした。
省略記法はごく一般的なテクニックですし、コードの記述量も減るので積極的に使っていきたいところです。
ですが、必要以上に省略をしたことで第3者がコードを見た時に、「は？ここはどういうことだ？」とコードの解読に手間取ってしまうようなことになってしまっては本末転倒です。
実務のプロジェクトでは、エンジニアの入れ替わりなんかも度々あるので、コードの可読性も大事です。
「短いコードで書く」ことを心がける確かに大事なことですが、「なんでもかんでも省略すれば良い」というわけではありません。
わかりやすさを損なわないように省略を活用して行きたいですね。