「関数」とは、いわば「命令の詰め合わせパック」です。一度作っておけば、何度でも使い回すことができます。
1. 関数の書き方
まずは、一番シンプルな関数の形を見てみましょう。
JavaScript
// 関数の定義（作り方）
function sayHello() {
console.log("こんにちは！");
console.log("JavaScriptの世界へようこそ。");
}
// 関数の呼び出し（実行）
sayHello();
sayHello();
sayHello() と書くだけで、中身の2行の処理がまとめて実行されます。これが関数の「再利用性」です。
2. 引数（ひきすう）：データを受け取る
関数に情報を渡したいときは、「引数（パラメータ）」を使います。これにより、関数がより柔軟になります。
JavaScript
// name を受け取って挨拶する関数
function greet(name) {
console.log("こんにちは、" + name + "さん！");
}
// 呼び出し
greet("太郎"); // こんにちは、太郎さん！
greet("花子"); // こんにちは、花子さん！
3. 戻り値（もどりち）：結果を返す
関数で計算した結果を、外に持ち帰りたいときは return を使います。
JavaScript
// 数値を2倍にして返す関数
function double(number) {
return number * 2; // 結果を返却する
}
// 結果を変数に代入して使う
const result = double(10);
console.log(result); // 20
double(10)を実行すると、その場所が20という値に置き換わります。returnは「関数が終わる合図」でもあります。
4. 実際に組み合わせてみよう
引数と戻り値を組み合わせて、「消費税を計算する関数」を作ってみましょう。
JavaScript
function calculateTax(price) {
const tax = 0.1; // 消費税10%
return price * (1 + tax);
}
const itemPrice = 1000;
const total = calculateTax(itemPrice);
console.log("税込価格は" + total + "円です。");
第4章のまとめ
- 関数：処理をまとめて名前を付けたもの。再利用できる。
- 引数：関数に入力するデータ。
- 戻り値 (
return)：関数の処理結果として出力するデータ。
第4章は以上です！「関数」という道具を使えるようになると、書くコードがぐっとプロらしく、整理されたものになります。
いよいよ次は、初級編の最終回、第5章「DOM操作の基本（HTMLをJavaScriptで動かす）」です。これまでの知識を使って、実際にWebページ上の文字や色をJavaScriptで操ってみましょう！