JavaScriptの関数とは？定義方法・引数・return・呼び出し方を初心者向けに解説
JavaScriptでは、繰り返し使う処理をひとまとめにして再利用できるようにしたものを関数と呼びます。関数を使うことでコードが整理され、読みやすく、メンテナンスしやすくなります。
JavaScriptにはあらかじめ用意された関数もありますが、ユーザーが自由に関数を定義することもできます。
関数の基本構文
function 関数名(引数) {
処理内容;
}
処理内容;
}
- 関数名：任意の名前（命名規則に従う）
- 引数：関数に渡す値（省略可）
- 処理内容：関数が実行する処理
関数名の付け方
function の後に関数名を指定します。
どんな処理をする関数なのか分かりやすい名前にすると、後から読み返したときに理解しやすくなります。
引数とは？
引数とは、関数に渡す値のことです。
引数を使うことで、同じ関数でも渡す値によって処理結果を変えることができます。
- 引数は
()の中に指定する - 複数ある場合はカンマで区切る
- 不要な場合は空のままでOK
関数の中身（処理内容）
関数が実行する処理は { } の中に記述します。
関数の中から別の関数を呼び出すこともできます。
例：関数 msg2 の中で msg3 を呼び出す
function msg2() {
alert(“この関数は onclick によって呼び出されました。”);
msg3();
}
alert(“この関数は onclick によって呼び出されました。”);
msg3();
}
return｜関数の処理を終了し、値を返す
return は、関数の処理を終了し、呼び出し元に値を返すための命令です。
function myFunc() {
alert(“OK”);
return 1; // 呼び出し元に1を返す
}
alert(“OK”);
return 1; // 呼び出し元に1を返す
}
i = myFunc(); // i には 1 が入る
関数の呼び出し
function は「関数を定義するだけ」なので、読み込まれただけでは実行されません。
実際に動作させるには、イベントや別の関数から呼び出す必要があります。
呼び出し方は簡単で、関数名() と書くだけです。
サンプル：ページ読み込み時とボタンクリック時に関数を呼び出す
function msg1() {
alert(“ページをロードすると関数 msg1 が呼び出されます。”);
}
alert(“ページをロードすると関数 msg1 が呼び出されます。”);
}
function msg2(a) {
alert(“ボタンをクリックすると関数 msg2 が呼び出されます。\n引数は ” + a + ” です。”);
msg3();
}
function msg3() {
alert(“関数 msg3 は関数 msg2 の内部から呼び出されます。”);
}
HTML側
<body onload=”msg1()”>
<form id=”sample_form”>
<input type=”button” value=”Click!” onclick=”msg2(2)”>
</form>
</body>
<form id=”sample_form”>
<input type=”button” value=”Click!” onclick=”msg2(2)”>
</form>
</body>
このサンプルでは、
- ページ読み込み時（onload）に msg1 が実行
- ボタンクリック時に msg2 が実行
- msg2 の中で msg3 が呼び出される
まとめ
- 関数は「繰り返し使う処理」をまとめたもの
- 引数を使うと処理内容を柔軟に変えられる
- return で値を返すことができる
- 関数は定義しただけでは実行されない（呼び出しが必要）
