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


ゼロから始めるJavaScript講座Vol12 ユーザー定義関数の書き方
目次
  1. ゼロから始めるJavaScript講座ユーザー定義関数の書き方
  2. ユーザー定義関数
  3. ユーザー定義関数の書き方
  4. ユーザー定義関数の利点

ゼロから始める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-func2-639

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

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

javascript-func2-2-639

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

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

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

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

javascript-func2-3-639

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

javascript-func2-4-639

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

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

javascript-func2-5-639

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

「varname=‘山田’;

javascript-func2-6-639

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>

javascript-func2-7-639

javascript-func2-8-639

throw_dice関数の内容は、

処理サイコロを指定回数振った合計値を計算する引数サイコロ個数返り値サイコロの合計値

となります。

このように同じような処理をthrow_dice関数にまとめることで、短く読みやすいプログラムを書くことができます。

ユーザー定義関数には様々な利点がありますが、代表的なものは以下となります。

  • プログラムが読みやすくなる- コード(関数)の使い回しができる- 変更箇所が少なくなる

今回作成したサンプルから利点のおおまかなイメージを掴めたと思います。

最初はどの処理を関数としてをまとめたら良いか悩むと思いますが、まずは

JavaScriptの一部処理をコピーして流用している→コピーしている処理を関数化

から始めてみると良いかもしれません。

NEXTLESSONグローバル変数グローバル変数

PREVLESSON関数の基礎関数の基礎


関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp