更新日: 2017年2月27日
公開日: 2015年12月5日

ゼロから始めるJavaScript講座Vol12 ユーザー定義関数の書き方

ゼロから始めるJavaScript講座ユーザー定義関数の書き方
ユーザー定義関数
ユーザー定義関数の書き方
ユーザー定義関数の利点

ゼロから始めるJavaScript講座ユーザー定義関数の書き方

ユーザー定義関数

関数は自分で作る(定義する)ことができ、これをユーザー定義関数と呼びます。まずはお手本にある通り、ユーザー定義関数を使ったプログラムを書いてみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ユーザー定義関数</title>
</head>
<body>
    <script>
        function hello(){
            document.write('<p>hello関数: hello</p>')
        }

        function hello_name(name){
            document.write('<p>hello_name関数: hello ' + name + '</p>')
        }

        function return_hello_name(name){
            var str = '<p>return_hello_name関数: hello ' + name + '</p>';
            return str;
        }

        // hello関数実行
        hello();

        // hello_name関数実行
        hello_name('山田');

        // return_hello_name関数実行
        var return_hello_name = return_hello_name('鈴木');
        document.write(return_hello_name);
    </script>
</body>
</html>

ユーザー定義関数の書き方

ユーザー定義関数は以下のような書式で記述します。

「関数名」は自分で関数の名前を付けます。名前に利用できる文字は変数と基本的には同じです。JavaScriptでは関数名の大文字と小文字を明確に区別します。

「引数」は関数に渡す値です。詳しくは後ほど説明します。

「処理」の部分に、関数にさせたい処理内容を記述します。

JavaScriptでは同じ名前の関数を複数定義した場合、後に定義した関数が有効となり、元の定義を上書きします。

定義した関数の実行は「関数名(引数)」で行います。

hello関数は挨拶を表示する関数で、引数はありません。

引数は必ず指定しなければいけないわけではなく、なしにすることも可能です。「hello()

hello_name関数は挨拶＋名前を表示する関数で、引数は関数実行時に指定された値を受け取る役割を持っています。

「varname=‘山田’;

retrun_hello_name関数は引数に名前を指定すると、挨拶＋名前の文字列を返す関数です。

関数の中に「return」を記述することで関数を実行した際に値を返すことができ、この値を返り値返り値

なおreturnが実行されると、以降に記述されている処理は行われません。

ユーザー定義関数の利点

関数の利点や使い方について理解を深めるため、まずはお手本にある通り次のプログラムを作成してましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ユーザー定義関数の利点</title>
</head>
<body>
    <script>
        function throw_dice(num){
            var sum = 0;

            for (var i = 0; i < num; i++) {
                // 16の数字を変数sumへ合算
                sum += Math.ceil(Math.random() * 6);
            }

            return sum;
        }

        document.write('<p>サイコロを1個振る: ' + throw_dice(1) + '</p>');
        document.write('<p>サイコロを1個振る: ' + throw_dice(1) + '</p>');
        document.write('<p>サイコロを2個振る: ' + throw_dice(2) + '</p>');
        document.write('<p>サイコロを2個振る: ' + throw_dice(2) + '</p>');
        document.write('<p>サイコロを3個振る: ' + throw_dice(3) + '</p>');
        document.write('<p>サイコロを3個振る: ' + throw_dice(3) + '</p>');
    </script>
</body>
</html>