JavaScript ・ 基本構文
function
処理をまとめて名前を付ける
ひとまとまりの処理に名前を付けて、何度でも呼び出せるようにします。値を受け取る「引数」と、結果を返す「戻り値」を使えます。
01
サンプルコード
JS
1function withTax(price) {
2 return Math.round(price * 1.1);
3}
4
5console.log(withTax(480));
6console.log(withTax(550));
02
実行結果
コンソール
- console.log() の出力がここに表示されます
03
解説
function 名前(引数) { 処理 } で関数を定義し、名前(値) で呼び出します。同じ処理を何度も書かずに済み、修正も1か所で済みます。
( ) の中の引数で値を受け取り、return で結果を呼び出し元に返します。return に達するとそこで関数は終了します。
引数には既定値を付けられます。function greet(name = 'ゲスト') のように書くと、値が渡されなかったときに既定値が使われます。
04
応用例・注意点
関数の書き方
| 書き方 | 説明 |
|---|---|
function 名前() {} | 関数宣言 |
const 名前 = function() {} | 関数式 |
const 名前 = () => {} | アロー関数 |
(a, b = 1) | 引数と既定値 |
return 値 | 結果を返して終了する |
ボタンのクリックで関数を呼ぶ
処理を関数にしておくと、イベントにそのまま渡せます。
HTML
1<button type="button" id="hello">あいさつ</button>
JS
1function sayHello() {
2 console.log('こんにちは');
3}
4document.querySelector('#hello').addEventListener('click', sayHello);
注意点
- 01return のない関数は undefined を返します。
- 02関数名は「何をするか」が分かる動詞から始めると読みやすくなります（例：getPrice、showMenu）。