In 'n' Out

関数とは何か？

同じ処理を何度も書くと、修正や管理が大変になります。
JavaScriptでは、こうした処理をまとめる方法があります。
それが関数です。
関数とは、処理をまとめて名前を付けたものです。
ここでは関数の概要を説明します。

関数を作る

関数には、自分で定義する自作関数と、JavaScriptにあらかじめ用意されている関数があります。
これまで使ってきたalertも、用意されている関数の一つです。

構文

function 関数名(){
    処理;
}

functionとは関数を作るための宣言です。
関数名は任意で決められますが、予約語などは避ける必要があります。
()は後ほど説明する役割を持っていますが、ここでは空のままで問題ありません。
{}ブロック内には実際に実行したい処理を記述します。
なお、これだけでは関数は定義しただけでは動かず、関数名()を書いて初めて実行されます。

コード例

//myFunc.js
let arrNum = 5;

function createArray(){
    let num = [];

    for(let i=0; i<arrNum; i++){
        num[i] = i * 5;
    }

    alert(num);
}

<script src="myFunc.js"> 
</script>
<script>
    createArray();
</script>

動作例

このコードでは、関数を使って配列を作成し、その結果を表示しています。
処理の流れを順に見ていきましょう。
まず、arrNumという変数に5を代入しています。
これは、配列をいくつ作るかの回数として使用します。
次に、createArrayという関数を定義しています。
関数の中では、まず空の配列numを用意しています。
for文では、iが0からarrNum未満の間、処理を繰り返します。
この例では5回繰り返されます。
繰り返しの中で、num[i]にi * 5の計算結果を代入しています。
これにより、配列には0, 5, 10, 15, 20という数値が順番に追加されます。
for文が終わると、完成した配列numをalertで表示します。
最後に、HTML側でcreateArray()を実行することで、定義した関数の中の処理がまとめて実行されます。
では、肝心のコードを使いまわしたい場合、どうすればいいか。
HTML側で変数に値を代入してから、関数を実行するだけです。

コード例

<script src="myFunc.js"> 
</script>
<script>
    arrNum = 10;
    createArray();
</script>

動作例

このようにHTMLから数値を渡してから、関数を実行しなさいと指定するだけです。 すると先ほどの配列とは違って、0, 5, 10, 15, 20...45とalertが表示されます。 ただし、いくつか注意点があります。
まず、関数を呼び出す前に代入しないと意味がありません。
次に、他の関数でもarrNumを使っている可能性があります。
その場合、意図しない影響が出ることがあります。
最後にHTMLで毎回グローバル変数を書き換えなくてはなりません。
そこで登場するのが引数です。

引数

引数を使うと、関数を実行するときに外から値を渡し、同じ処理を状況に応じて変えることができます。

構文

function 関数名(引数){
    処理;
}

関数の構文の()内に引数を追加するだけです。
一旦空白で進めてきた理由はこのためです。

コード例

//myFuncArgument.js
function createArray(arrNum){
    let num = [];

    for(let i=0; i<arrNum; i++){
        num[i] = i * 5;
    }

    alert(num);
}

<script src="myFuncArgument.js"> 
</script>
<script>
    createArray(10);
</script>

動作例

このように関数の外にあったarrNumをHTMLから受け取るように、関数の()内に10を記載するだけで先ほどと同じ結果が表示されます。
この数値を変えるだけで、いかようにもでき、関数は共通化されました。
また、後からarrNumを書くことがなく、他の関数で使われていても問題は起こらず、グローバル変数を記載する必要もなくなりました。
これまで学んできたfor文や配列の処理も、引数を使うことで柔軟に使い回せるようになります。

本当は関数はもっと深く説明する必要はあるのですが、Webとかけ離れた内容も含まれるためここまでとします。
新しく説明が必要になった段階で改めて説明をすることにします。