毎週木曜日にモブプロをやっている。

ここの所、Cyber Dojoを使ったTDDをやることが多い。

今回のお題

今回も言語はJavaScriptで、お題はマインスイーパ。n*mのマス目と地雷の位置が文字列で入力されるので、受け取って各マスに表示されるべき数を記した文字列を返せというもの。

今回気になるコード

完成も間近な所で、こんなコードを書いた。

function convertToResult(matrix){
 const lines = matrix.map(line => line.map(ch => ch === -1 ? '*':ch.toString()).join(''));
 const result = lines.join('\n');
 return result;
}

仕様の詳細を語る事が目的ではないのでざっくりとだけ説明すると、このメソッドに渡ってくる時点で、マインスイーパの盤面を表す配列は2次元配列としてほぼできている。
地雷の位置を`-1`と表現しており、これを回答に渡す際に地雷を意味する`*`に変更する。
要は、処理結果を問題文が要求する文字列の形に整形するためのメソッドである。

1行目、ゆっくり読んでいけば分かるのだが、幾つかの処理をまとめて1行に書いている。

1. 二次元配列から要素内の配列を抜き出す
2. 値を全て確認して、値が-1であれば`*`に置き換える、それ以外はtoStringする
3. 配列を結合して文字列にする

これらの処理をまとめて1行に書いた結果、横に長く伸びてしまっており、可読性が悪い。

とはいえ、上記の程度の条件であれば、三項演算子をif文で書くのも冗長だった。

イケてるリファクタリング結果

そんな時に、以下のような方法を教わった。

function convertToResult(matrix){
 const convertToAsterisk = line => line.map(ch => ch === -1 ? '*':ch.toString())
 const lines = matrix.map(line => convertToAsterisk(line).join(''))
 const result = lines.join('\n')  
 return result
}

処理の一部を`convertToAsterisk `という名前をつけて切り出し、外に持つようにしただけである。にも関わらず、2行目は格段に読みやすくなった。
アロー関数の嬉しい所が自分にも漸くわかった瞬間だった。

1行のためにfunctionを新しく追記するなんていうこと、普通はあまりやりたがらないと思う。再利用の予定があるならまだしも、そんな予定もまるでないとしたら余計にだ。

だがアロー関数であれば、functionより遥かに短く、ちょっとしたの処理に名前を与えてやることができる。これにより、複雑なメソッドチェーンの可読性がグンと上がる。

まとめ

アロー関数のメリット、詳細に知りたければMDNを読んだ方が間違いないのだが、肌感で知ることができたのは今回が初めてだった。

どんな場面であってもどんな言語であっても、読みやすい上で短く書けるのは良い事である。