JavaScript | 1 日 60 分 × 7 日アプリ学習：超初級編

JavaScript
スポンサーリンク

3日目のゴールと今日のテーマ

3日目のテーマは「関数を“道具”としてちゃんと使えるようになること」です。
1日目は変数、2日目は条件分岐と関数の「呼び出し」までやりました。
今日はそこに、

関数が「値を返す」という考え方（return）
計算ロジックを関数に閉じ込める
小さな“判定ロジック”を関数として切り出す

を足していきます。

ゴールはこうです。
「値を返す関数」と「console に表示する関数」の違いを説明できる。
計算を関数にまとめて、何度も使い回せる。
「この処理は関数にした方がいいな」と感じられる。

ここまで行けたら、超初級3日目としてかなりいい仕上がりです。

return：関数が「結果を返す」ということ

「表示する」と「返す」は別物

2日目までの関数は、こんな感じでした。

function greet(name) {
  console.log("こんにちは、" + name + " さん！");
}
JavaScript

この関数は、「挨拶メッセージを表示する」ことはできますが、
メッセージそのものを「あとで使う」ことはできません。

例えば、「挨拶メッセージを作って、あとでまとめて表示したい」とか、
「挨拶メッセージを別の関数に渡したい」といったときに困ります。

そこで出てくるのが return です。
return は「関数の外に値を返す」ためのキーワードです。

return の基本形

関数の形はこうなります。

function 関数名() {
  // 何か計算したり処理したりする
  return 結果;
}
JavaScript

例えば、「2倍した値を返す関数」はこう書けます。

function double(x) {
  let result = x * 2;
  return result;
}
JavaScript

この関数を呼ぶときは、こうです。

let a = double(5);
console.log(a);  // 10
JavaScript

ここでの重要ポイントは、

double(5) という「関数呼び出し」が、値（この場合は 10）になる。
その値を変数 a に入れて、あとで使える。

ということです。
console.log の中に直接書くこともできます。

console.log(double(10));  // 20
JavaScript

return の動き方を丁寧に追ってみる

return した瞬間に関数は終わる

return にはもう一つ大事な性質があります。
それは、「return が実行された瞬間に、その関数はそこで終了する」ということです。

例えば、次のコードを見てください。

function test() {
  console.log("1つ目");
  return 123;
  console.log("2つ目");
}

let value = test();
console.log("返ってきた値:", value);
JavaScript

実行すると、

1つ目
返ってきた値: 123

だけが表示され、「2つ目」は表示されません。

これは、return 123; が実行された瞬間に、
関数 test の中の処理がそこで終わるからです。

この性質は、条件分岐と組み合わせるときにとても役立ちます。

判定ロジックを「値を返す関数」にする

「大人かどうか」を true / false で返す関数

2日目では、こんな関数を書きました。

function printAgeCategory(age) {
  if (age >= 20) {
    console.log("大人です");
  } else if (age >= 13) {
    console.log("中高生です");
  } else {
    console.log("子どもです");
  }
}
JavaScript

これは「メッセージを表示する関数」です。
今度は、「大人かどうか」を true / false で返す関数を作ってみます。

function isAdult(age) {
  if (age >= 20) {
    return true;
  } else {
    return false;
  }
}
JavaScript

これを使うと、こう書けます。

console.log(isAdult(25));  // true
console.log(isAdult(18));  // false
JavaScript

ここでのポイントは、

isAdult(25) という呼び出しが「true という値」になる。
isAdult(18) という呼び出しが「false という値」になる。

ということです。

判定関数を if の中で使う

isAdult は true / false を返すので、そのまま if の条件に使えます。

let age = 22;

if (isAdult(age)) {
  console.log("お酒が飲めます");
} else {
  console.log("まだ飲めません");
}
JavaScript

ここでの流れはこうです。

isAdult(age) が呼ばれる。
age が 22 なので、age >= 20 は true。
return true; が実行される。
if の条件は if (true) になるので、中の console.log が実行される。

このように、「判定ロジックを関数にしておく」と、
if の中がとても読みやすくなります。

計算ロジックを関数に閉じ込める

消費税を計算する関数を作る

次は、少し実用的な例です。
「金額に消費税を足した値を計算する関数」を作ってみましょう。

消費税率を 10% として、
「税込金額 = 元の金額 × 1.1」とします。

function calcWithTax(price) {
  let result = price * 1.1;
  return result;
}
JavaScript

これを使うと、こう書けます。

let itemPrice = 1000;
let total = calcWithTax(itemPrice);
console.log("税込金額は " + total + " 円です。");
JavaScript

結果は、

税込金額は 1100 円です。

のようになります。

ここでの重要ポイントは、

「消費税の計算」というロジックを、関数に閉じ込めている。
もし税率が変わったら、この関数だけを直せばいい。

ということです。

小数を丸める処理も関数にする

消費税の計算では、小数が出ることがあります。
例えば、price = 999 のとき、

999 * 1.1 = 1098.9
JavaScript

のようになります。

これを「1円未満を切り捨てる」ようにしたい場合、
Math.floor を使います。

function calcWithTax(price) {
  let result = price * 1.1;
  let rounded = Math.floor(result);
  return rounded;
}
JavaScript

これで、

console.log(calcWithTax(999));  // 1098
JavaScript

となります。

ここでの深掘りポイントは、

「丸め方」というルールも、関数の中に閉じ込めている。
外側のコードは、「税込金額を計算してくれる関数」として使うだけでいい。

という設計です。
こうやって「細かいルール」を関数に押し込んでいくと、
外側のコードがどんどん読みやすくなります。

「値を返す関数」と「表示する関数」の役割分担

役割を分けて書いてみる

例えば、「税込金額を計算して、その結果を表示する」という処理を考えます。

全部を一つの関数に詰め込むと、こうなります。

function printTotalWithTax(price) {
  let result = price * 1.1;
  let rounded = Math.floor(result);
  console.log("税込金額は " + rounded + " 円です。");
}
JavaScript

これはこれで動きますが、
「計算」と「表示」が混ざっています。

これを、役割ごとに分けてみます。

function calcWithTax(price) {
  let result = price * 1.1;
  let rounded = Math.floor(result);
  return rounded;
}

function printTotal(price) {
  let total = calcWithTax(price);
  console.log("税込金額は " + total + " 円です。");
}
JavaScript

使うときは、こうです。

printTotal(1000);
printTotal(2500);
JavaScript

ここでの重要ポイントは、

calcWithTax は「計算だけ」を担当している。
printTotal は「表示だけ」を担当している。

という役割分担です。

この分け方をしておくと、

「計算結果を別の用途に使いたい」ときに、calcWithTax だけを使える。
「表示の文言を変えたい」ときに、printTotal だけを直せばいい。

という柔軟さが生まれます。

3日目のミニアプリ：簡単な料金計算ツール

仕様を決める

最後に、今日の内容をまとめたミニアプリを作ってみましょう。
仕様はこうです。

商品価格（price）と個数（quantity）を受け取る。
合計金額（price × quantity）を計算する。
合計金額に消費税を足した「税込合計」を計算する。
結果をメッセージとして表示する。

これを、関数を使って設計してみます。

計算用の関数を作る

まずは、「合計金額を計算する関数」と「税込金額を計算する関数」を作ります。

function calcSubtotal(price, quantity) {
  let subtotal = price * quantity;
  return subtotal;
}

function calcWithTax(amount) {
  let result = amount * 1.1;
  let rounded = Math.floor(result);
  return rounded;
}
JavaScript

表示用の関数を作る

次に、「結果を表示する関数」を作ります。

function printOrder(price, quantity) {
  let subtotal = calcSubtotal(price, quantity);
  let total = calcWithTax(subtotal);

  console.log("単価: " + price + " 円");
  console.log("個数: " + quantity + " 個");
  console.log("小計: " + subtotal + " 円");
  console.log("税込合計: " + total + " 円");
}
JavaScript

実際に呼んでみます。

printOrder(500, 3);
JavaScript

結果は、こんな感じになります。

単価: 500 円
個数: 3 個
小計: 1500 円
税込合計: 1650 円

ここまで来ると、もう立派な「小さな料金計算アプリ」です。

計算ロジックは calcSubtotal と calcWithTax に閉じ込められている。
表示ロジックは printOrder にまとまっている。
外側からは printOrder(500, 3); と呼ぶだけで、全部やってくれる。

これが、「関数を道具として使う」という感覚です。

3日目のまとめと、明日へのつなぎ

今日やったことを、言葉で整理します。

return は「関数の外に値を返す」ためのキーワードで、実行された瞬間に関数は終了する。
「表示する関数」と「値を返す関数」は役割が違う。
判定ロジック（大人かどうかなど）を true / false を返す関数にすると、if が読みやすくなる。
計算ロジック（消費税計算など）を関数に閉じ込めると、外側のコードがシンプルになる。
「計算する関数」と「表示する関数」を分けることで、設計がきれいになる。
料金計算ミニアプリを通して、「関数を組み合わせてアプリっぽいものを作る」感覚をつかめた。

明日（4日目）は、ここに「配列（複数の値をまとめて扱う）」を足していきます。
そうすると、「1つの値」ではなく「たくさんのデータ」を扱えるようになり、
一気に「アプリっぽさ」が増してきます。

最後に一つだけ聞きたい。

今日の中で、「あ、これちょっと気持ちいいな」と感じたのはどこでしたか？
return で値が返ってきた瞬間か、計算用と表示用の関数を分けてスッキリしたときか。
その「気持ちいい」と感じたところが、あなたとロジック設計の一番の接点です。
そこを意識しながら、4日目に進んでいきましょう。

前へ次へ
1234567
スポンサーリンク
タイトルとURLをコピーしました