第9章　関数

# **関数**
***

function(関数)とは、```様々な処理を1つにまとめて、名前をつけることがで
きるもの```です。
プログラムの中で繰り返し利用される一連の処理をまとめておき、必要な時に呼び出して使います。
まとめておけば同じ処理は一度しか記述する必要がありません。
メリットとして単に記述量が減るという点だけではなくプログラムも見やすくなり、またチェック
も1回で済む為にプログラムの記述ミスも減らすことができます。
#### **例**
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>サンプル</title>
    <script>
        function sayHello() {
            alert( "おはよう" );
            alert( "こんにちは" );
            alert( "こんばんは" );
        }
    </script>
</head>
<body>
    <form>
        <input type="button" value="ボタン１" onclick="sayHello()"><br>
        <input type="button" value="ボタン２" onclick="sayHello()">
    </form>
</body>
</html>
```

<br><br>
## **1.関数を定義する**
関数の定義（関数の宣言や関数定義文 (function statement) とも呼ばれま
す）は ```function キーワード```と、それに続く以下の内容で構成されま
す。
+ 関数の名前。
+ 関数への引数のリスト。丸括弧でくくり、カンマで区切ります。
+ 関数を定義する JavaScript の文。波括弧 { } でくくります。

```
function 関数名(引数1, 引数2, ...){
  実行される処理1;
  実行される処理2;
}
```

次のコードは ```square という名前```の簡単な関数を定義します :
```
function square(number) {
  return number * number;
}
```
関数 square は ```number``` という名前の引数を 1 つとります。この関数
は、引数（すなわち number）の 2 乗を返すように指示する 1 つの文で構成さ
れています。return 文は、関数が返す値を指定します。
```
return number * number;
```
プリミティブなパラメータ（数値など）は```値渡し```で関数に渡されます。
つまり、値は関数に渡されますが、関数がパラメータの値を変更しても、```こ
の変更はグローバルな値や関数の呼び出し元の値には影響を与えません。```

<br><br>
## **2.関数の呼び出し**
定義された関数はスクリプト内から呼び出すことができます。関数を呼び出すには次の書式を使います。
```
関数名(引数1, 引数2, ...);
```

例えば、関数 square を定義し た場合、次のようにしてそれを呼び出すことができます。
```
square(5);
```
関数を呼び出す時には関数名の後の「(」と「)」の間に引数を指定して呼び出します。引数が1つも無い場合でも「(」と「)」は省略できません。

また関数を呼び出すと値を返してくる場合があります。例えば計算を行うような関数を定義した場合、戻り値として計算結果などを返してきます。
その場合は次のように記述することで関数から返された値を変数に対して代入出来ます。(戻り値についても次のページ以降で確認します)。
```
変数 = 関数名(引数1, 引数2, ...);
```
この文は 5 という引数とともに関数を呼び出します。関数は自身の文を実行
し、25 という値を返します。
関数は呼び出されるスコープ内になければいけませんが、次の例のように、関数
の宣言は呼び出しより後に置くことができます :
```
document.write(square(5));
/* ... */
function square(n) { return n*n }
```
#### **例**
[sample9-1.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        function square(n) {
            return n * n
        }
        document.write(square(5))
    </script>
</body>
</html>
```

#### **実行結果**
25

+ **ポイント**
    + 関数は引数を受け取り、戻り値を返す。
    + 関数は定義しただけでは実行されない。呼び出しを行ったタイミングで実行される。

<br><br>
## **3.変数のスコープ**
変数には、スコープ（有効範囲）が設定されています。スコープは、その変数が参照できる範囲のことです。

<table border="1">
	<tr style="width:100px ;background-color:#C6E0B4 ;text-align:center;">
		<td>種類</td>
		<td>説明</td>
		<td>対象</td>	
	</tr>
	<tr>
		<td>グロバルスコープ</td>
		<td>スクリプト全体で変数を参照できる</td>
		<td>・関数の外側で宣言した変数<br>  
        ・宣言を省略した変数
        </td>	
	</tr>
	<tr>
		<td>ローカルスコープ</td>
		<td>ある関数の中でのみ変数を参照できる</td>
		<td>・関数の内側で宣言した関数<br>    
		・関数の引数  
        </td>
	</tr>
</table>

**スコープの注意点と使い分け**<br>
異なるスコープで同名の変数を使うとどうなるでしょうか。

#### **例**
[sample9-2.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        var str = "グローバル";
        function func1(){
            var str = "func1";
            document.write("strは" + str + "です。<br>");
        }

function func2(){
            var str = "func2";
            document.write("strは" + str + "です。<br>");
        }
        func1();
        func2();
        document.write("strは" + str + "です。<br>");
    </script>
</body>
</html>

```
#### **実行結果**
strはfunc1です。<br>
strはfunc2です。<br>
strはグローバルです。

<br><br>
## **4.関数の引数**
一般的な記述方法としては```function( 引数, 引数・・・ )```のようにいく
つでも引数を記述することができます。
この引数は、```関数内で自由に扱える```ようになっています。
処理の中に組み合わせて使うのがいいです。
```
function sample(name, age) {
    
    //この中に記述する処理で引数「name」「age」が使える
    
}
```
関数sample()の引数として「name」と「age」を記述しています、あとは、この
関数内で「name」と「age」を普通の変数みたいに扱うことができるようになり
ます。

### **値を渡す方法**
先ほど引数として「name / age」を設定しましたが、これらに値を渡すには次
のようにします。
```
 function sample(name, age) {
            document.write(name + "さんの年齢は" + age + "です！");
        }
       
//引数に値を渡す
sample(’太郎’, 32);
```
「sample(‘太郎’, 32)」と引数を記述することで、それぞれ順番に「name /
 age」へ値が格納されていきます。
つまり、「name」には「太郎」という文字列が入り、「age」には「32」という
数値が格納されているわけです。
これらの引数を活用すれば、実行結果のように```1つの文字列として出力する```
ことも出来るのです。

#### **例**
[sample9-3.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        function sample(name, age) {
            document.write(name + "さんの年齢は" + age + "です！");
        }
        sample("太郎", 32);
    </script>
</body>
</html>
```

#### **実行結果**
太郎さんの年齢は32です！

<br><br>
## **5.関数の戻り値**
関数は```戻り値```を設定することで、```関数内で処理した結果を返すことが可能```になります。
そこで、一般的に使われる```return文```を利用します。
関数内にreturn文を記述することで、何らかの処理をした結果を「プログラムに伝える」ことです。
```
function multiply( num1, num2 ) { 
    return num1 * num2; 
} 
document.write( multiply(5, 2) );
```
「multiply()」に2つの引数が設定されており、実行時に数値を当てはめています。
処理の内容としては、引数「num1」「num2」を掛け算してからreturnしているだけです。
ここでreturnを記述するだけで、掛け算をした```結果を返す```ようになります。

#### **例**
[sample9-4.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        function multiply(num1, num2) {
            return num1 * num2;
        }
        document.write(multiply(5, 2));
    </script>
</body>
</html>
```

#### **実行結果**
10

***

>**練習**
>>**問題**[ex9-1.html]

２つの引数の和を返す関数を作成してください。

content

第9章 関数

第9章　関数