前回の記事で、JavaScriptのイベントリスナーを使ってWebサイトに動きをつける方法を学びましたね。あの時、function() { ... }というカタチでコードをまとめました。これが**「関数」**です。
関数は、特定の仕事をまとめておくための「道具箱」のようなものです。同じ作業を何度も書く手間を省き、コードを整理整頓するのに役立ちます。
この記事では、関数の基本から、その便利さまでを、一緒に見ていきましょう。
関数の基本：レシピを作るように書く
関数は、まるで料理のレシピを作るように書きます。
function：これは「今からレシピを作りますよ」という合図です。- 関数名：レシピの名前をつけます（例：
sayHello）。 ()：ここに材料（引数）を書きます。{}：ここにレシピの手順（実行するコード）を書きます。
JavaScript
// 「挨拶をする」というレシピ
function sayHello() {
console.log("こんにちは！");
}
// レシピを使って料理を作る
sayHello();
sayHello()と書くだけで、{}の中のコードが実行されます。
材料（引数）を使った関数
レシピの中には、材料によって味が変わるものがありますよね。関数も同じで、()の中に「引数（ひきすう）」という形で材料を渡すことができます。
JavaScript
// 名前を材料にして挨拶するレシピ
function sayHelloTo(name) {
console.log("こんにちは、" + name + "さん！");
}
// レシピに材料を渡して実行
sayHelloTo("太郎"); // 「こんにちは、太郎さん！」と表示
sayHelloTo("花子"); // 「こんにちは、花子さん！」と表示
nameという引数を受け取ることで、一つの関数で複数の人に挨拶ができます。
結果を返す関数
料理が完成したら、お皿に盛り付けて提供しますよね。関数も、計算した結果などを「返す」ことができます。これにはreturnという言葉を使います。
JavaScript
// 2つの数字を足して、結果を返すレシピ
function add(num1, num2) {
return num1 + num2;
}
// レシピを使って料理を作り、結果を受け取る
let result = add(5, 3); // resultには8が入ります
console.log(result);
returnの後ろに書いたものが、関数の実行結果として戻ってきます。
まとめ：関数でコードをきれいに、そして便利に
関数は、コードを整理して読みやすくするだけでなく、同じコードを何度も書く手間を省いてくれます。
- コードの再利用：一度書いた関数を何度も使い回すことができます。
- メンテナンスのしやすさ：もし手順を変えたくなっても、関数の定義を一度書き換えるだけで済みます。
これまでの記事で学んだ「イベントリスナー」と「関数」を組み合わせれば、より複雑なWebサイトの動きも作れるようになります。
JavaScript
// ボタンをクリックしたら、関数を呼び出す
document.getElementById('myButton').addEventListener('click', function() {
sayHelloTo("読者の皆様");
});