今回は単純なことだけど結構コードが読みやすくなるんじゃないかと思っている２つの内容のご紹介です。
返り値の型は揃える
例えば、配列に対して何らかの処理をし、成功したものだけを返す場合に以下のようなコードがあったります。
// 有効な奇数だけを返す関数
function getActiveOddNumbers() {
// 奇数だけををとってきます
const odds = getOddNumbers();
const activeOdds = odds.filter(odd => odd > 10);
if activeOdds.length > 0 {
return activeOdds
} else {
return false // 有効な奇数が取得できない場合はfalseを返す
}
}ここで、getActiveOddNumbersは有効な奇数が空だった場合にfalseを返しますが、有効な奇数があった場合には配列を返します。
関数の方が配列とBooleanで二種類返ってきていますね。この場合の例だとさほど影響がないように思えますが、クセづいてしまうと、２種類だけではなくさらに多くの型が１つの関数から返ってくるような実装してしまうことがあります。
書いているときはreturnの場所のコードを読めばわかると思いますが、返ってきた値を処理するのが複雑になったり、こういう関数がいろんなところで使われているとそういう複雑な処理だけど同じ処理が散らばって書かれてしまい保守性が下がってしまいます。
書いた当初はfalseで返してほしい理由があったとしても、空の配列を返し、一貫性を保っていた方が後々いいことが多いので気をつけています。
処理の役割パートを明確にする
１つの関数はおもに１つの目的を行っていると思いますが、そのなかでもさらに分けられることがあります。
例えば、WEBページ上で、ある場所に自動でスクロールをする場合としない場合に以下のようなコードを書いたりします。
function scrollToElement(scrollOn) {
if (scrollOn) {
const targetElement = document.getElementById('box');
// 対象Elementまでの高さを取得
const h = targetElement.getBoundingClient().y + window.pageYOffset;
window.scrollTo(0, h);
} else {
window.scrollTo(0, 0);
}
}ここでは、scrollOnがtrueの時には、まずは対象までのscrollする高さを取得し、その後にスクロールするという2種類の処理がはいっていますね。こういうときは、以下のように書き換えたいなと思います。
function scrollToElement(scrollOn) {
let h;
if (scrollOn) {
const targetElement = document.getElementById('box');
h = targetElement.getBoundingClient().y + window.pageYOffset;
} else {
h = 0;
}
window.scrollTo(0, h);
}こうすると、前半はスクロールするための高さを取得する部分と実際にスクロールする部分とにわけることができました。処理の役割が明確になったのではないでしょうか。
さらにはletを使ってしまっているので、前半部分だけを別の関数に分けることも以下のように容易になったと思います。
function getHeightToScroll(scrollOn) {
if (scrollOn) {
const targetElement = document.getElementById('box');
return targetElement.getBoundingClient().y + window.pageYOffset;
} else {
return 0;
}
}
function scrollToElement(scrollOn) {
const h = getHeightToScroll(scrollOn);
window.scrollTo(0, h);
}まとめ
１つ１つの短い関数の中でもちょっとしたことで見やすさがかわることがあるので、日々の業務でも工夫してみてください。