JS：関数の記述方法と使い方

JavaScriptでも関数は作成できます。
関数の定義方法と実行方法を簡単な例で示します。

JavaScript関数の簡単な例
引数を持つ関数の場合

JavaScript関数の簡単な例

js_function1.html

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <title>JavaScript関数の簡単な例</title>
  
    <script>
        // 関数helloを定義
        function hello(){
            alert("Hello!");
        }
    </script>
  
</head>
  
<body>
  
    <h1>JavaScript関数の簡単な例</h1>
    <p>
        <input type="button" value="押してね" onclick="hello()">
    </p>
      
</body>
</html>

実行イメージ（ボタンを押した時）

解説
ボタンを押した時、関数を実行しポップアップアラートを表示する例です。

関数の定義は通常headタグ内か、あるいは外部ファイル（拡張子js）で行います。
上記例では、headタグ内で関数を定義しています。（9行目～12行目）

// 関数helloを定義
function hello(){
    alert("Hello!");
}

関数は定義しただけでは何も起きません。通常何かのイベントと組み合わせて関数を呼び出します。
ボタンを押した時というイベントは行目のinputタグにonclick属性を追加して定義しています。

1	`<input` `type="button"` `value="押してね"` `onclick="hello()">`

として呼び出しています。

JavaScript関数の定義方法

function 関数名(引数1, 引数2, ....){
    // ここに関数内容を記述
}

JavaScript関数の実行方法

関数名(引数1, 引数2, ....);

C言語などとの違いは、関数の戻り値の型があるなしに関わらずfunctionと記述することです。
また、引数にも変数型が必要ありません。（そもそもJavaScriptの変数宣言には型がないため）

引数を持つ関数の場合

引数を持つ関数をJavaScriptでも定義できます。

例えば先ほどの関数hello()を以下の関数hello2()に書き換えてみます。
関数hello2()は、引数namaeをもつ関数です。

hello2()関数

function hello2(namae){
    alert("Hello, " + namae + "さん！");
}

関数hello2()を呼び出すには以下のようにします。引数に文字列が指定できます。

1	`hello2("山田");`

ただしこの関数を呼び出すときは注意が必要です。
inputタグを以下のようにしてもうまく動作しません。

<input type="button" value="押してね" onclick="hello2("山田")">

多分コンソール画面に以下のようなエラーメッセージが出力されるはずです。

SyntaxError: Unexpected end of input

原因はonclickのダブルクォーテーションで括られた文字列の中に更にダブルクォーテーション文字列が存在しているからです。

onclick=”hello2(“山田“)”　の部分

この場合は、内側のダブルクォーテーションをシングルクォーテーションに直すことで正常に動作するようになります。

<input type="button" value="押してね" onclick="hello2('山田')">

プログラム全体を示します。

JavaScript関数（引数を持つ関数）の例

js_function2.html

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <title>JavaScript関数（引数を持つ関数）</title>
  
    <script>        
        // 関数hello2を定義（引数を持つ関数）
        function hello2(namae){
            alert("Hello, " + namae + "さん！");
        }
         
    </script>
  
</head>
  
<body>
  
    <h1>JavaScript関数（引数を持つ関数）</h1>
    <p>
        <input type="button" value="押してね" onclick="hello2('山田')">
    </p>
      
</body>
</html>

実行イメージ

今回は、ボタンクリックによるイベントで関数を呼びましたが、これはあくまで一例です。
関数呼び出しのタイミングは、多岐に渡ります。
今回のボタンクリック以外にも「サイトが表示されたとき」「テキストボックスに文字が入力されたとき」あるいは「関数から関数を呼び出す」、なども考えられます。

・関数は、定義しただけでは実行されない。
・関数呼び出しは、何かのイベントと組み合わせて使うことが多い。