【JavaScript】関数で処理を軽減しよう【基本講座】

JavaScriptのプログラムを組んでいくうちに、気付けば同じ処理ばかり書いていることがあるかもしれません。巨大なソースコードにおいて、それは無駄以外の何物でもありません。むしろソースの視認性を下げ他人はおろか自分が見返したときも、よくわからないかもしれません。そのためシンプルなソースにすることが求められるわけですが、その一つの手法として関数があります。ぜひマスターしてスッキリしたコードを書けるように練習しましょう。

出典：http://www.photo-ac.com/

関数の基本

関数とは

関数は、処理を部品化して再利用できるようにした物を言います。
導入部分でも言いましたが、同じ処理を何度も描くことは、好ましくありません。最初はコピペで楽かもしれませんが、あるところだけ修正が発生した時、どこを修正したらいいか分かりますか？
1万行のプログラミングソースコードを一つ一つ検索→置換しますか？例えば、一括置換で良いと思うかもしれませんが、それがちゃんと置換されていると保証できますか？
ちゃんと論理的に根拠をもってそれをするなら止めませんが、やはりリスクヘッジを考えてプログラミング設計すべきではないかと思います。

関数の作り方

関数の作り方ですが、関数名の前に、function をつけて｛｝でブロックを囲い中に処理を書いていきます。

次の例題を見てください。

let a = [1, 2, 3];
let b = [4, 5, 6];

let sum1 = 0;
let sum2 = 0;

for(let i of a){
   sum1 += i;
}

for(let i of b){
   sum2 += i;
}

console.log("aの合計：", sum1)
console.log("bの合計：", sum2)

>> aの合計： 6
bの合計： 15

let a = [1, 2, 3];

let b = [4, 5, 6];

let sum1 = 0;

let sum2 = 0;

for(let i of a){

sum1 += i;

}

for(let i of b){

sum2 += i;

}

console.log("aの合計：", sum1)

console.log("bの合計：", sum2)

>> aの合計： 6

bの合計： 15

リスト内の要素を足し算しているだけで、難しくありませんね？
注目してほしいのは、同じ処理をリスト分やっているということ。
これの何がまずいかというと、このリストが1万個あったとき、いちいちfor文で取り出して合計を計算するのはどうでしょうか？
正直面倒ではないでしょうか？
そこは頑張るという人。プログラミングに精神論はいらなく、いかに楽をして（コンピュータに計算させて）値を出すか考えてください。
それがプログラミング脳というやつです。その考え方は、あなたをブラッシュアップしてくれます。そしてより高度なテクニックを身に付けれるようになります。
最初は、まずは、プログラムを書いてみて、この処理は一般化できるか考えてみると良いでしょう。そのひとつに関数があります。

では、これを関数化してみましょう。

function listSum(list){
    let sum = 0;
    for(let num of list){
        sum += num;
    }
    console.log("合計：", sum)
}

let a = [1, 2, 3];
let b = [4, 5, 6];
listSum(a)
listSum(b)

function listSum(list){

let sum = 0;

for(let num of list){

sum += num;

}

console.log("合計：", sum)

}

let a = [1, 2, 3];

let b = [4, 5, 6];

listSum(a)

listSum(b)

共通部分をまとめてみました。
また、表示部分を省いて合計値のみ返してほしいときは、このように書きます。

function listSum(list){
    let sum = 0;
    for(let num of list){
        sum += num;
    }
    return sum;
}

let a = [1, 2, 3];
let b = [4, 5, 6];

console.log("合計：", listSum(a))
console.log("合計：", listSum(b))

function listSum(list){

let sum = 0;

for(let num of list){

sum += num;

}

return sum;

}

let a = [1, 2, 3];

let b = [4, 5, 6];

console.log("合計：", listSum(a))

console.log("合計：", listSum(b))

そうです。返り値をreturnで返せば良いです。
ちなみに、上記の例文でreturn を付けなければ、「合計： undefined」と出力されます。

関数のあれこれ

関数について、自明かもしれませんが、引数に制限はありません。
さらに引数についてですが、あらかじめ値を入れておくことができます。これを引数のデフォルト値と言います。
引数に値を入れ忘れると「undefined」になります。実務において、「undefined」と取りたくないときがあるでしょう。そんなときのためにデフォルト値を活用すると良いです。

このような感じですね。

function listSum(list, id=0){
    let sum = 0;
    for(let num of list){
        sum += num;
    }
    return sum;
}

let a = [1, 2, 3];
let b = [4, 5, 6];

console.log("合計：", listSum(a))
console.log("合計：", listSum(b))

function listSum(list, id=0){

let sum = 0;

for(let num of list){

sum += num;

}

return sum;

}

let a = [1, 2, 3];

let b = [4, 5, 6];

console.log("合計：", listSum(a))

console.log("合計：", listSum(b))

引数を可変長にする

実務を行っていると、関数を作ったが引数がどれくらい持つのか現段階では判断できないということが多々あります。そういったときのため引数を可変長にする方法があります。
やり方は簡単で「関数名（…引数）」と言った感じで「.」を3つ付けるだけです。

JavaScriptおすすめ書籍

JavaScriptの入門書は、「これから学ぶ～」が分かりやすいです。その次に「Good Parts」をやることをおススメします。これは、JavaScriptのテクニック的な参考書で実践に使えます。他、有名なサイの本もありますが、これは、そこまで必須ではないかもしれません。「The Good Parts」で良いかなと思える感じです。主に初学者用にチョイスしました。良かったら読んで見てください。