Day9 前半のゴール
Day9 のテーマは「関数」です。
ここから一気に「コードを部品として再利用する」力が手に入ります。
前半では、まず次の3つをしっかり押さえることをゴールにします。
Day9 前半で身につけたいこと
function で「処理に名前をつけてまとめる」感覚をつかむ
引数で「外から値を受け取る」仕組みを理解する
return で「結果を返す」流れをイメージできるようにする
関数とは何か
「名前のついた処理のかたまり」
ここまで書いてきたコードは、基本的に「上から順番に実行されるだけ」でした。
console.log("こんにちは");
console.log("JavaScript を勉強中です");
もし、同じ処理を何度も使いたくなったらどうでしょう。
console.log("こんにちは、Taro さん");
console.log("こんにちは、Hanako さん");
console.log("こんにちは、Ken さん");
// もっと増えたら…？
毎回同じようなコードを書くのは面倒だし、ミスもしやすいです。
そこで登場するのが 関数（function） です。
関数は、「処理に名前をつけて、ひとまとめにしたもの」です。
function の基本形
いちばんシンプルな関数
まずは「挨拶をするだけ」の関数を作ってみます。
function greet() {
console.log("こんにちは");
console.log("JavaScript を勉強中です");
}
これで「greet という名前の処理のかたまり」ができました。
ただし、この時点では「定義しただけ」で、まだ実行されていません。
関数を呼び出す
関数を実行するには、「名前のあとに () をつけて呼び出す」必要があります。
greet();
これで、関数の中の
console.log("こんにちは");
console.log("JavaScript を勉強中です");
がまとめて実行されます。
何度でも呼び出せる
greet();
greet();
greet();
と書けば、同じ処理を3回実行できます。
「一度定義して、何度でも使える」――これが関数の大きな価値です。
引数とは何か
関数に「入力」を渡す仕組み
さっきの greet 関数は、毎回同じメッセージしか出せませんでした。
function greet() {
console.log("こんにちは");
}
でも本当は、「人によってメッセージを変えたい」ことが多いですよね。
「Taro さん、こんにちは」
「Hanako さん、こんにちは」
この「変えたい部分」を外から渡すために使うのが 引数（ひきすう） です。
引数つきの関数の書き方
function greet(name) {
console.log(name + " さん、こんにちは");
}
ここでの name が「引数」です。
関数を呼び出すときに、具体的な値を渡します。
greet("Taro"); // "Taro さん、こんにちは"
greet("Hanako"); // "Hanako さん、こんにちは"
関数の中では、name という変数として使えます。
深掘り：引数は「関数専用の変数」
引数は、その関数の中だけで使える「専用の変数」です。
function greet(name) {
console.log(name);
}
greet("Taro");
このとき、関数の中では name は “Taro” になりますが、
関数の外で name を使おうとするとエラーになります。
「関数の外から値を渡す → 関数の中では引数として受け取る」
という流れをイメージできると、一気に理解が進みます。
引数を複数にする
2つ以上の情報を渡したいとき
たとえば、「名前」と「年齢」を使ってメッセージを作りたいとします。
function introduce(name, age) {
console.log(name + " さんは " + age + " 歳です");
}
呼び出すときは、カンマで区切って値を渡します。
introduce("Taro", 20);
introduce("Hanako", 25);
関数の中では、
name には “Taro”、age には 20 が入ります（呼び出しごとに変わる）。
return とは何か
関数から「結果」を返す
ここまでは、関数の中で console.log して終わりでした。
でも、実際には「計算した結果をどこかで使いたい」ことが多いです。
たとえば、「2つの数を足して、その結果を使いたい」とき。
function add(a, b) {
const result = a + b;
console.log(result);
}
これだと、結果は表示されるだけで、
他の計算に使うことができません。
そこで使うのが return です。
return の基本
function add(a, b) {
const result = a + b;
return result;
}
この関数を呼び出すとき、
const sum = add(3, 5);
console.log(sum); // 8
というように、「関数の結果を変数に入れて使う」ことができます。
return result; は
「この関数の“答え”は result です」と外に渡しているイメージです。
return された瞬間、関数はそこで終わる
function add(a, b) {
const result = a + b;
return result;
console.log("ここには来ない");
}
return に到達した時点で、関数の処理は終了します。
その後に書かれたコードは実行されません。
「return は“結果を返す”と同時に“関数を終わらせる”」
という性質を持っています。
function・引数・return をまとめた例
合計を計算してメッセージを作る関数
function calcTotal(price, taxRate) {
const total = price + price * taxRate;
return total;
}
const result = calcTotal(1000, 0.1);
console.log("合計金額は " + result + " 円です");
ここでやっていることは、
price と taxRate を引数として受け取る
関数の中で合計金額を計算する
return で結果を返す
呼び出し側で結果を受け取り、メッセージに使う
という流れです。
セキュリティの視点から見る「関数」
「危険な処理」を1か所に閉じ込める
関数は「処理をまとめる」だけでなく、
「危険な処理を1か所に閉じ込める」という意味でも重要です。
たとえば、ユーザー入力をチェックする関数を作っておけば、
function isValidName(name) {
return name.length > 0 && name.length <= 20;
}
アプリのあちこちでバラバラにチェックを書くのではなく、
この関数を必ず通すようにすれば、
チェック漏れを防げる
ルールを変えたいときも、この関数だけ直せばいい
という状態になります。
「大事なロジックを関数にまとめる」ことは、
バグを減らすだけでなく、セキュリティを高めるうえでも非常に重要です。
実践：Day9 前半のサンプルコード
引数と return を両方使う関数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day9 関数 前半</title>
</head>
<body>
<h1>Day9: 関数の基本</h1>
<script>
function greet(name) {
console.log(name + " さん、こんにちは");
}
function add(a, b) {
return a + b;
}
greet("Taro");
greet("Hanako");
const sum = add(3, 5);
console.log("3 + 5 の結果は " + sum + " です");
</script>
</body>
</html>
関数定義 → 呼び出し → 引数 → return の流れを、
実際にコンソールで確認してみてください。
Day9 前半のまとめ
関数は「名前のついた処理のかたまり」。
引数は「関数に渡す入力」、return は「関数から返す結果」。
一度作った関数は、何度でも・いろいろな値で呼び出せる。
ここまで理解できていれば、
後半では「関数の設計の仕方」「戻り値をどう使うか」、
そして少しだけ「関数を使ったきれいなコードの書き方」に踏み込んでいきます。