Day9 後半のゴール
Day9 後半では、前半で学んだ
function・引数・return を「なんとなく知っている」から
「自分で設計して使える」レベルに引き上げます。
特に意識したいのは次の3つです。
Day9 後半で深掘りするポイント
「呼び出す側」と「関数の中」の役割分担を意識する
return を使って「値を返す関数」と「処理だけする関数」を区別する
関数を使うことで、コードがどれだけ読みやすく・安全になるかを体感する
関数を使う前と後のコードを比べる
関数を使わない場合のコード
まずは、関数を使わずに書いたコードを見てみます。
const price1 = 1000;
const taxRate = 0.1;
const total1 = price1 + price1 * taxRate;
console.log("合計金額1: " + total1);
const price2 = 2500;
const total2 = price2 + price2 * taxRate;
console.log("合計金額2: " + total2);
const price3 = 500;
const total3 = price3 + price3 * taxRate;
console.log("合計金額3: " + total3);
同じ「税込み金額を計算する処理」が、
ほぼコピペで何度も出てきています。
関数を使った場合のコード
同じ処理を関数にまとめると、こう書けます。
function calcTotal(price, taxRate) {
const total = price + price * taxRate;
return total;
}
const total1 = calcTotal(1000, 0.1);
console.log("合計金額1: " + total1);
const total2 = calcTotal(2500, 0.1);
console.log("合計金額2: " + total2);
const total3 = calcTotal(500, 0.1);
console.log("合計金額3: " + total3);
「税込み金額をどう計算するか」は関数の中に閉じ込めて、
呼び出す側は「何をしたいか」だけを書いています。
深掘り：関数の一番大事な価値
同じ処理を何度も書かなくてよくなる
計算方法を変えたいとき、関数の中だけ直せばいい
「何をしているか」が名前から伝わる（calcTotal など）
この3つが揃うと、
コードは一気に「壊れにくく」「読みやすく」「安全」になります。
「処理だけする関数」と「値を返す関数」
処理だけする関数（副作用メイン）
たとえば、ログを出すだけの関数。
function logLogin(userName) {
console.log(userName + " さんがログインしました");
}
この関数は、何か値を返すわけではなく、
「コンソールにメッセージを出す」という“処理”を行います。
呼び出し側は、結果を受け取る必要がありません。
logLogin("Taro");
値を返す関数（計算メイン）
一方、計算結果を返す関数は、
return を使って「値」を返します。
function add(a, b) {
return a + b;
}
const result = add(3, 5);
console.log(result); // 8
ここで大事なのは、
「この関数は何をするためのものか？」
「結果をどこかで使いたいのか？」
を意識して、
「処理だけする関数」か「値を返す関数」かを決めることです。
return を使いこなすための視点
return は「答え」と「終了」を同時に表す
次のコードを見てください。
function judgeScore(score) {
if (score >= 80) {
return "合格";
}
return "不合格";
}
const result = judgeScore(75);
console.log(result); // "不合格"
score が 80 以上なら、
最初の return で「合格」を返して関数終了。
そうでなければ、
次の return で「不合格」を返して終了。
このように、
「条件によって返す値を変える」
「return によって処理の流れを分岐させる」
という書き方は、実務でも頻繁に使います。
早期 return という考え方
もう少しだけ踏み込んだ書き方も見てみます。
function isValidPassword(password) {
if (password.length < 8) {
return false;
}
if (password.includes(" ")) {
return false;
}
return true;
}
条件を満たさない場合は、
その場で return して「早めに抜ける」書き方です。
このスタイルは、
ネスト（if の入れ子）が深くなりにくい
「ダメな条件」を先に書くことで読みやすくなる
というメリットがあり、
セキュリティチェックなどでもよく使われます。
関数の「名前の付け方」を意識する
名前は「何をするか」がわかるように
悪い例：
function f(a, b) {
return a + b;
}
良い例：
function add(a, b) {
return a + b;
}
さらに良い例（文脈による）：
function calcTotalPrice(price, taxRate) {
return price + price * taxRate;
}
関数名を見るだけで「何をしているか」がわかると、
コードを読む人（未来の自分を含む）が圧倒的に楽になります。
セキュリティの視点から見る「関数の役割」
大事なチェックを関数に閉じ込める
たとえば、ログイン時のパスワードチェックを考えてみます。
function isValidPassword(password) {
if (password.length < 8) {
return false;
}
if (!password.match(/[0-9]/)) {
return false;
}
if (!password.match(/[A-Z]/)) {
return false;
}
return true;
}
アプリのあちこちでバラバラにチェックを書くのではなく、
必ずこの関数を通すようにすれば、
チェック漏れが減る
ルール変更もこの関数だけ直せばいい
レビューもしやすい
という状態になります。
「重要なロジックを関数にまとめる」ことは、
セキュリティを高めるうえで非常に強力なテクニックです。
実践：Day9 後半のサンプルコード
function・引数・return をフル活用した例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day9 関数 後半</title>
</head>
<body>
<h1>Day9: 関数の設計と使い方</h1>
<script>
function calcTotal(price, taxRate) {
return price + price * taxRate;
}
function printTotal(label, price, taxRate) {
const total = calcTotal(price, taxRate);
console.log(label + " の合計金額は " + total + " 円です");
}
printTotal("商品A", 1000, 0.1);
printTotal("商品B", 2500, 0.1);
printTotal("商品C", 500, 0.1);
</script>
</body>
</html>
calcTotal は「値を返す関数」。
printTotal は「メッセージを表示する関数」。
役割を分けることで、
「計算ロジック」と「表示ロジック」がきれいに分離されています。
Day9 後半のまとめ
関数は「処理をまとめて名前をつける」だけでなく、
「大事なロジックを1か所に閉じ込める」ための道具でもあります。
引数で入力を受け取り、
return で結果を返す。
その流れを意識して設計できるようになると、
コードは一気に「再利用しやすく」「安全で」「読みやすい」ものに変わります。
ここまで来ているあなたなら、
もう「ただ書くだけのコード」から
「設計されたコード」に一歩踏み出せています。