1. 関数って何？
関数とは「よく使う処理をまとめて名前をつけた箱」のようなものです。
- 何度も同じ処理を書く必要がなくなる
- 名前で呼び出せるからコードが読みやすくなる
- 後から処理を変えたいときも関数の中だけ変えればOK
イメージ
「Hello」と言う処理 → まとめて dispHello という名前の箱に入れる
2. 関数の基本の書き方
function 関数名(引数1, 引数2, ...) {
// この中に処理を書きます
return 戻り値; // 処理結果を返すときに使います
}
- 関数名：好きな名前をつける
- 引数：関数に渡す情報（必要なときだけ）
- 戻り値：関数が計算した結果を返すもの（必要なときだけ）
3. 例題1：引数も戻り値もなし
function sayHello() {
console.log("Hello, JavaScript!");
}
sayHello(); // 関数を呼び出す
解説
sayHelloという関数を作りました- 関数の中では「Hello, JavaScript!」と表示しています
sayHello();で呼び出すと表示されます
💡 ポイント
- ただ実行するだけなら、引数も戻り値もいらない
4. 例題2：引数を使う
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("Alice"); // Hello, Alice!
greet("Bob"); // Hello, Bob!
解説
nameという引数を使って、呼ぶたびに違う名前を表示できます- 引数を使うことで関数を柔軟に使えるようになります
💡 ポイント
- 引数は「関数に渡す情報」です
- 複数の引数もカンマで区切って使えます
5. 例題3：戻り値を使う
function add(a, b) {
return a + b; // 足した結果を返す
}
let result = add(3, 5);
console.log(result); // 8
解説
aとbという2つの値を受け取り、足し算して返す関数returnで結果を返すと、呼んだ場所で使えるresultに入れて後で使うこともできます
💡 ポイント
returnがあると、関数は計算結果を呼び出し元に渡せます
6. 練習問題
- 「こんにちは」と表示する関数を作って呼び出してみよう
- 名前を渡すと「〇〇さん、こんにちは」と表示する関数を作ろう
- 2つの数字を渡すと掛け算して結果を返す関数を作ろう
解答と解説
練習問題 1
「こんにちは」と表示する関数を作って呼び出す
解答例
function sayHi() {
console.log("こんにちは");
}
sayHi(); // 呼び出す
ステップ解説
function sayHi()で関数sayHiを定義{}の中に実行する処理console.log("こんにちは")を書く- 関数を呼び出すと
console.logが実行され、コンソールに「こんにちは」と表示される
練習問題 2
名前を渡すと「〇〇さん、こんにちは」と表示する関数
解答例
function greet(name) {
console.log(name + "さん、こんにちは");
}
greet("Alice"); // Aliceさん、こんにちは
greet("Bob"); // Bobさん、こんにちは
ステップ解説
nameという引数を用意して関数を定義console.log(name + "さん、こんにちは")で名前を文章に組み込むgreet("Alice")のように呼ぶと、引数がnameに入る- コンソールに「Aliceさん、こんにちは」と表示される
💡ポイント
- 引数を使うと、同じ関数で違う名前に対応できる
練習問題 3
2つの数字を渡すと掛け算して結果を返す関数
解答例
function multiply(a, b) {
return a * b;
}
let result1 = multiply(3, 4);
let result2 = multiply(5, 6);
console.log(result1); // 12
console.log(result2); // 30
ステップ解説
aとbという2つの引数を用意return a * b;で掛け算の結果を返す- 関数を呼び出した場所で結果を変数
result1に受け取る console.logで結果を確認
💡ポイント
returnがあると、計算結果を呼び出した側で使える- 同じ関数を使って、違う数字の計算も簡単にできる
💡 まとめ
- 引数で関数に情報を渡す
- 戻り値で結果を受け取る
- 関数を使うとコードが短く、分かりやすくなる
- 何度も同じ処理を書く必要がなくなる
まとめ
- 関数は「処理をまとめて名前をつける仕組み」
- 引数で情報を渡せる
- 戻り値で結果を受け取れる
- 同じ処理を何度も書かなくて済むので、コードがスッキリする
