モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | モダンJavaScript基礎 － DAY 3：関数

React 60日で身につけるReact
スポンサーリンク
スポンサーリンク
  1. DAY 3：関数（前半）
  2. 関数とは
    1. 処理に名前をつけて「ひとまとまり」にしたもの
  3. 関数定義
    1. 基本形：function キーワードを使った書き方
  4. 引数
    1. 関数に渡す「入力値」
    2. 引数があることで「再利用性」が一気に上がる
  5. 戻り値
    1. 関数が「外側に返す結果」
  6. return
    1. 「結果を返す」と同時に「そこで関数を終わらせる」
    2. 「console.logで終わらせない」癖をつける
  7. 関数を再利用する考え方
    1. 「同じ処理を何度も書いていないか」を常に意識する
    2. 「小さく分けて、組み合わせる」発想
  8. DAY 3（前半）のまとめと後半へのつながり
  9. DAY 3：関数（後半）
  10. 関数とは（ロジックを整理するための「単位」として考える）
    1. 関数を4つの要素で捉える
  11. 関数定義（コードを書く前に「日本語で説明する」）
    1. まずは言葉で「何をどうする関数か」を言ってみる
  12. 引数（「変えたいところ」を外から渡す）
    1. 固定部分と可変部分を分けて考える
    2. 引数の数を増やしすぎない
  13. 戻り値とreturn（「結果を外に渡すための出口」）
    1. 「結果を返す関数」と「処理だけする関数」
    2. returnで「早めに抜ける」テクニック
  14. 関数を再利用する考え方（「小さく分けて、組み合わせる」）
    1. 1関数1役割を意識する
    2. 小さな関数を組み合わせる例
  15. Reactとのつながり：コンポーネントは「UIを返す関数」
    1. コンポーネントも「関数＋引数＋戻り値」
    2. コンポーネントの中で関数を使う
  16. DAY 3（後半）のまとめと次へのつながり
  17. DAY 3：関数とミニ課題まとめ
  18. 関数とは（ミニ課題に向けたイメージづくり）
    1. 処理に名前をつけて「ひとまとまり」にするもの
  19. 関数定義（ミニ課題のための基本形）
    1. function キーワードを使った基本形
  20. 引数（「毎回変わる値」を外から渡す）
    1. 固定部分と可変部分を分けて考える
  21. 戻り値とreturn（結果を外に渡す）
    1. 「結果を返す関数」としてミニ課題を設計する
  22. 関数を再利用する考え方（ミニ課題を組み合わせる）
    1. 1関数1役割を意識して、組み合わせて使う
  23. ミニ課題：4つの関数をステップで作る
    1. 足し算関数：add
    2. 税込価格計算関数：calcTaxIncluded
    3. 偶数判定関数：isEven
    4. 最大値判定関数：max
  24. 関数を組み合わせて再利用する例
    1. 小さな関数をつなげて「少し大きな処理」を作る
  25. DAY 3ミニ課題のまとめと次へのつながり

DAY 3：関数（前半）

DAY 3の前半では、「関数とは何か」「関数の定義」「引数」「戻り値」「return」「関数を再利用する考え方」を、できるだけイメージしやすく整理していきます。 JavaScriptにおいて関数は、ほぼすべてのロジックの“基本単位”になります。Reactコンポーネントも「UIを返す関数」として定義されるので、ここでの理解がこの先の学習に直結していきます。

関数とは

処理に名前をつけて「ひとまとまり」にしたもの

関数は、特定の仕事をするコードのかたまりに名前をつけたものです。 同じ処理を何度も書く代わりに、関数として1回だけ書いておき、必要なときに呼び出して使います。

function sayHello() {
  console.log('こんにちは！');
}

// 関数を呼び出す
sayHello(); // こんにちは！
sayHello(); // こんにちは！
JavaScript

ここで起きていることをかみ砕くと、次のようになります。

  • function sayHello() { ... } 「sayHello」という名前の関数を定義しています。
  • sayHello(); 定義した関数を「呼び出して」実行しています。

関数は、「レシピに名前をつけておいて、必要なときにそのレシピを呼び出す」ようなものだとイメージすると分かりやすいです。

関数定義

基本形：function キーワードを使った書き方

JavaScriptの基本的な関数定義は、次のような形をしています。

function 関数名(引数1, 引数2, ...) {
  // 実行したい処理
  return 戻り値; // 必要なら
}
JavaScript

例えば、2つの数を足し算する関数はこう書けます。

function add(x, y) {
  return x + y;
}

const result = add(5, 3);
console.log(result); // 8
JavaScript

この add 関数を分解すると、次のようになります。

  • function 関数を定義するときに使うキーワードです。
  • add 関数の名前です。「何をする関数か」が分かる名前にすることが大切です。
  • (x, y) 関数が受け取る「入力」を表す部分で、これを引数と呼びます。
  • { ... } の中 関数が実際に行う処理を書きます。
  • return x + y; 処理の結果を「戻り値」として返します。

ここで重要なのは、関数を定義しただけでは実行されないという点です。 add(5, 3) のように「呼び出したとき」に初めて、その中の処理が動きます。

引数

関数に渡す「入力値」

引数（ひきすう）は、関数に渡す「入力値」のことです。 関数の定義側では「パラメータ」と呼ばれ、呼び出し側から渡す実際の値は「引数」と呼ばれますが、初心者のうちは「関数に渡す値」と覚えておけば十分です。

function greet(name) {
  console.log(`こんにちは、${name}さん！`);
}

greet('佐藤');  // こんにちは、佐藤さん！
greet('鈴木');  // こんにちは、鈴木さん！
JavaScript

ここで、

  • name が「関数の定義側で受け取るパラメータ」
  • '佐藤' や '鈴木' が「呼び出し側から渡す引数」

です。

引数があることで「再利用性」が一気に上がる

引数を使うことで、同じ関数を違う入力で何度も使い回せるようになります。

function add(x, y) {
  return x + y;
}

console.log(add(1, 2));    // 3
console.log(add(10, 5));   // 15
console.log(add(100, 200)); // 300
JavaScript

「足し算する」というロジックは1回だけ書いておき、 具体的な数値だけを引数として変えることで、何度でも使えるようになっています。

Reactでも、コンポーネントに渡す props は「コンポーネントの引数」のようなもので、 同じコンポーネントを違うデータで何度も使い回すための仕組みになっています。

戻り値

関数が「外側に返す結果」

戻り値とは、関数が処理を終えたあとに「外側へ返す値」のことです。 return キーワードを使って、戻り値を指定します。

function double(number) {
  return number * 2;
}

const result = double(5);
console.log(result); // 10
JavaScript

ここで、

  • 関数 double は「入力された数を2倍にして返す」役割を持つ
  • return number * 2; が「戻り値」を指定している
  • 呼び出し側では、その戻り値を result に代入して使っている

という流れになっています。

戻り値があることで、関数の結果を別の計算に使ったり、別の関数に渡したりできるようになります。

return

「結果を返す」と同時に「そこで関数を終わらせる」

return には、次の2つの重要な役割があります。

  1. 値を返す 呼び出し元に結果を渡します。
  2. 関数の処理をそこで終了する return の行に到達した瞬間、関数の中の処理はそこで終わり、それ以降の行は実行されません。
function checkNumber(num) {
  if (num < 0) {
    return '負の数です';
  }

  // ここに来るのは num >= 0 のときだけ
  return '0以上の数です';
}

console.log(checkNumber(-5)); // 負の数です
console.log(checkNumber(10)); // 0以上の数です
JavaScript

このように、return を使うことで「条件に応じて早めに関数を抜ける」ことができ、 複雑な if 文のネストを避けて、読みやすいロジックを書きやすくなります。

「console.logで終わらせない」癖をつける

初心者がよくやりがちなパターンとして、「関数の中で console.log して終わり」という書き方があります。

function addAndLog(x, y) {
  console.log(x + y);
}
JavaScript

これは「結果を表示する」ことはできますが、結果を他の処理に渡すことができません。 できるだけ return で結果を返す癖をつけておくと、後から関数を再利用しやすくなります。

function add(x, y) {
  return x + y;
}

const result = add(5, 3);
console.log(result); // 8
JavaScript

こうしておけば、結果を変数に入れて別の計算に使うこともでき、 表示方法（console.log なのか、画面表示なのか）を後から自由に変えられます。

関数を再利用する考え方

「同じ処理を何度も書いていないか」を常に意識する

関数の本質的な目的は、同じ処理を何度も書かずに済むようにすることです。

例えば、税込価格を計算する処理を、毎回こう書いていたとします。

const price1 = 1200;
const taxRate = 0.1;
const total1 = price1 + price1 * taxRate;

const price2 = 800;
const total2 = price2 + price2 * taxRate;

const price3 = 500;
const total3 = price3 + price3 * taxRate;
JavaScript

同じ計算式が何度も出てきていて、もし税率の計算方法を変えたくなったら、すべての行を直さなければなりません。

これを関数にすると、次のように書けます。

function calcTaxIncluded(price, taxRate) {
  return price + price * taxRate;
}

const taxRate = 0.1;

const total1 = calcTaxIncluded(1200, taxRate);
const total2 = calcTaxIncluded(800, taxRate);
const total3 = calcTaxIncluded(500, taxRate);
JavaScript

こうしておけば、

  • 計算ロジックは calcTaxIncluded の中だけにまとまる
  • 税率の計算方法を変えたいときは、その関数だけ直せばよい
  • 呼び出し側のコードは「何をしているか」が名前から分かりやすい

というメリットが得られます。

「小さく分けて、組み合わせる」発想

関数を再利用するうえで大事なのは、1つの関数に詰め込みすぎないことです。

  • 「足し算をする関数」
  • 「税込価格を計算する関数」
  • 「偶数かどうかを判定する関数」

のように、1つの関数に1つの役割を持たせておくと、 それらを組み合わせて、より複雑な処理を作りやすくなります。

Reactコンポーネントも同じで、

  • 「ボタンを表示するコンポーネント」
  • 「リストを表示するコンポーネント」
  • 「カードを表示するコンポーネント」

のように、役割ごとに分けておくことで、組み合わせて大きなUIを作れるようになります。

DAY 3（前半）のまとめと後半へのつながり

DAY 3の前半では、

  • 関数とは「名前をつけた処理のかたまり」であること
  • function 関数名(引数) { ... } という基本的な関数定義の形
  • 引数は「関数に渡す入力」であり、再利用性を高める鍵であること
  • 戻り値と return によって、関数の結果を外側に返せること
  • return は「結果を返す」と同時に「そこで関数を終わらせる」役割を持つこと
  • 同じ処理を何度も書いていないかを意識し、関数としてまとめることでコードが整理されること

を確認しました。

後半では、

  • 小さな関数を組み合わせて大きな処理を作る考え方
  • 足し算・税込価格計算・偶数判定・最大値判定といった具体的な関数の設計
  • Reactコンポーネントとのつながり（「UIを返す関数」としてのコンポーネント）

などを、さらに一歩踏み込んだ形で解説していきます。 「関数＝再利用可能な処理のかたまり」というイメージをしっかり持ったまま、DAY 3後半へ進んでいくと、Reactのコンポーネント設計にも自然につながっていきます。

DAY 3：関数（後半）

DAY 3の後半では、前半で学んだ「関数とは」「関数定義」「引数」「戻り値」「return」「関数を再利用する考え方」を、もう一歩“実務寄り”の視点で深掘りしていきます。 ここからは、関数を「どう設計し、どう組み合わせて使うか」という観点を意識しながら読み進めていただければと思います。

関数とは（ロジックを整理するための「単位」として考える）

関数を4つの要素で捉える

後半では、関数を次の4つの要素で捉えてみます。

  • 処理のかたまり：何をするのか（ロジック）
  • 名前：何のための関数なのか（役割）
  • 入力（引数）：何を受け取るのか
  • 結果（戻り値）：何を返すのか

例として、足し算の関数をもう一度見てみます。

function add(x, y) {
  return x + y;
}
JavaScript

この add 関数は、

  • 処理のかたまり：足し算をする
  • 名前：add（足すという意味）
  • 入力：x, y（足し算したい2つの数）
  • 結果：x + y（足し算の結果）

という4つの要素を持っています。 このように整理しておくと、「関数を設計する」という感覚がつかみやすくなります。

関数定義（コードを書く前に「日本語で説明する」）

まずは言葉で「何をどうする関数か」を言ってみる

関数を定義するときに、いきなりコードを書き始めるのではなく、まず日本語で「何をどうする関数か」を説明してみると、設計がスムーズになります。

例：税込価格計算の関数を作りたい場合

  1. 何をする？ → 「税抜価格と税率から、税込価格を計算する」
  2. 何を受け取る？ → 「税抜価格」と「税率」
  3. 何を返す？ → 「税込価格」

これをそのままコードに落とし込むと、次のようになります。

function calcTaxIncluded(price, taxRate) {
  const taxAmount = price * taxRate;
  const total = price + taxAmount;
  return total;
}
JavaScript

ここでは、計算の途中経過も taxAmount や total として変数に分けているので、 「何をしているか」が読みやすくなっています。 関数定義は、「日本語での説明」をそのままコードに翻訳する作業だと意識すると、迷いにくくなります。

引数（「変えたいところ」を外から渡す）

固定部分と可変部分を分けて考える

関数を設計するときは、「毎回同じ処理」と「毎回変わる値」を分けて考えるのがコツです。

例：偶数判定の関数

  • 毎回同じ処理： 「2で割った余りが0かどうかをチェックする」
  • 毎回変わる値： 「判定したい数」

この「毎回変わる値」を引数にします。

function isEven(number) {
  return number % 2 === 0;
}
JavaScript

こうしておくことで、

console.log(isEven(2));  // true
console.log(isEven(3));  // false
console.log(isEven(10)); // true
JavaScript

のように、同じロジックを違う入力で何度も使い回せるようになります。

引数の数を増やしすぎない

引数は便利ですが、増やしすぎると関数が扱いづらくなります。

function createUser(name, age, email, address, isAdmin, isActive) {
  // ...
}
JavaScript

このように引数が多すぎると、「何を渡せばいいのか」「順番を間違えていないか」が不安になります。 その場合は、オブジェクトを引数にするなど、設計を見直すことも大切です。

function createUser(user) {
  // user.name, user.age などを使う
}
JavaScript

Reactでも、props が増えすぎたコンポーネントは扱いづらくなるので、 「引数の数が増えすぎていないか」を意識することは、関数設計・コンポーネント設計の両方で重要になります。

戻り値とreturn（「結果を外に渡すための出口」）

「結果を返す関数」と「処理だけする関数」

関数には、大きく分けて次の2種類があります。

  • 結果を返す関数 → 計算や判定を行い、その結果を戻り値として返す
  • 処理だけする関数 → 画面表示やログ出力など、「副作用」を起こすが、値は返さない

例：結果を返す関数

function add(x, y) {
  return x + y;
}

const result = add(5, 3);
console.log(result); // 8
JavaScript

例：処理だけする関数

function logMessage(message) {
  console.log(message);
}

logMessage('こんにちは'); // こんにちは
JavaScript

どちらも大事ですが、ロジックを整理するときは「結果を返す関数」を意識的に増やすと、 後から再利用しやすくなります。

returnで「早めに抜ける」テクニック

return は「結果を返す」と同時に「そこで関数を終わらせる」役割を持っていました。 これを利用すると、条件分岐をスッキリ書けます。

function getNumberType(num) {
  if (num < 0) {
    return '負の数';
  }

  if (num === 0) {
    return 'ゼロ';
  }

  return '正の数';
}

console.log(getNumberType(-5)); // 負の数
console.log(getNumberType(0));  // ゼロ
console.log(getNumberType(10)); // 正の数
JavaScript

このように、「条件ごとに早めに return する」ことで、 ネストが深い if 文を避けて、読みやすいロジックを書きやすくなります。

関数を再利用する考え方（「小さく分けて、組み合わせる」）

1関数1役割を意識する

関数を再利用しやすくするための基本は、1つの関数に1つの役割だけを持たせることです。

  • 良い例
    • add：足し算だけをする
    • isEven：偶数かどうかだけを判定する
    • calcTaxIncluded：税込価格だけを計算する
  • 良くない例
    • processAll：足し算も税込計算も偶数判定も全部やる

1つの関数にいろいろ詰め込みすぎると、再利用しづらくなり、 「この関数は何をするものなのか？」が分かりにくくなります。

小さな関数を組み合わせる例

足し算・税込価格計算・偶数判定を組み合わせてみます。

function add(a, b) {
  return a + b;
}

function calcTaxIncluded(price, taxRate) {
  return price + price * taxRate;
}

function isEven(number) {
  return number % 2 === 0;
}

const taxRate = 0.1;
const basePrice = add(500, 700); // 500 + 700 = 1200
const total = calcTaxIncluded(basePrice, taxRate);

if (isEven(total)) {
  console.log(`税込価格 ${total} は偶数です`);
} else {
  console.log(`税込価格 ${total} は奇数です`);
}
JavaScript

ここでは、

  • add が「足し算」を担当
  • calcTaxIncluded が「税込価格計算」を担当
  • isEven が「偶数判定」を担当

というように、役割ごとに関数を分けて、それらを組み合わせています。 この「小さく分けて、組み合わせる」発想は、Reactコンポーネントの設計にもそのままつながります。

Reactとのつながり：コンポーネントは「UIを返す関数」

コンポーネントも「関数＋引数＋戻り値」

Reactコンポーネントは、実は「UIを返す関数」です。

function Greeting(props) {
  return <p>こんにちは、{props.name}さん！</p>;
}
JSX

このコンポーネントを、関数の視点で見ると次のようになります。

  • 関数名：Greeting
  • 引数：props（コンポーネントに渡されるデータ）
  • 戻り値：<p>...</p>（画面に表示するUI）

Reactでは、コンポーネントを「UIを返す関数」として捉えることで、 DAY 3で学んだ関数の考え方がそのまま活きてきます。

コンポーネントの中で関数を使う

コンポーネントの中で、ロジックを関数として切り出すこともよくあります。

function calcTaxIncluded(price, taxRate) {
  return price + price * taxRate;
}

function PriceInfo() {
  const price = 1200;
  const taxRate = 0.1;
  const total = calcTaxIncluded(price, taxRate);

  return (
    <div>
      <p>税抜価格: {price}円</p>
      <p>税込価格: {total}円</p>
    </div>
  );
}
JSX

ここでは、

  • ロジック（税込計算）は calcTaxIncluded 関数に切り出し
  • コンポーネント PriceInfo は「UIを返すこと」に集中

という役割分担になっています。 このように、関数をうまく使うことで、コンポーネントの中身をシンプルに保つことができます。

DAY 3（後半）のまとめと次へのつながり

DAY 3の後半では、

  • 関数を「処理のかたまり＋名前＋入力＋結果」という4つの要素で捉えること
  • 関数を作る前に、日本語で「何をどうする関数か」を説明してみること
  • 引数は「毎回変わる値」を外から渡すための仕組みであり、再利用性の鍵であること
  • 戻り値とreturnを使うことで、結果を他の処理に渡せるようになること
  • 1関数1役割を意識し、小さな関数を組み合わせて大きな処理を作る考え方
  • Reactコンポーネントが「UIを返す関数」であり、関数の考え方がそのまま活きること

DAY 3：関数とミニ課題まとめ

DAY 3では、「関数とは何か」という基礎から始めて、実際に小さな関数を自分で作るミニ課題まで一気に体験していく流れになります。 ここでは、学習項目（関数とは／関数定義／引数／戻り値／return／関数を再利用する考え方）を踏まえながら、足し算・税込価格計算・偶数判定・最大値判定を関数として設計・実装するステップを丁寧に追っていきます。

関数とは（ミニ課題に向けたイメージづくり）

処理に名前をつけて「ひとまとまり」にするもの

関数は、特定の仕事をするコードのかたまりに名前をつけたものです。 ミニ課題で作る関数も、すべて「1つの仕事」にフォーカスした小さな関数です。

  • 足し算 → 「2つの数を足す仕事」
  • 税込価格計算 → 「税抜価格と税率から税込価格を計算する仕事」
  • 偶数判定 → 「数が偶数かどうかを判定する仕事」
  • 最大値判定 → 「2つの数のうち大きいほうを返す仕事」

このように、「何の仕事をする関数なのか」を一言で説明できるようにしておくと、設計がぶれにくくなります。

関数定義（ミニ課題のための基本形）

function キーワードを使った基本形

ミニ課題で使う関数は、すべて次の基本形で書けます。

function 関数名(引数1, 引数2, ...) {
  // 実行したい処理
  return 戻り値;
}
JavaScript

この形に、ミニ課題の「仕事」を当てはめていきます。

引数（「毎回変わる値」を外から渡す）

固定部分と可変部分を分けて考える

ミニ課題の4つの関数について、「毎回同じ処理」と「毎回変わる値」を分けてみます。

  • 足し算
    • 毎回同じ処理：2つの数を足す
    • 毎回変わる値：足し算したい2つの数
  • 税込価格計算
    • 毎回同じ処理：税抜価格と税率から税込価格を計算する
    • 毎回変わる値：税抜価格・税率
  • 偶数判定
    • 毎回同じ処理：2で割った余りが0かどうかをチェックする
    • 毎回変わる値：判定したい数
  • 最大値判定
    • 毎回同じ処理：2つの数を比べて大きいほうを返す
    • 毎回変わる値：比較したい2つの数

この「毎回変わる値」が、関数の引数になります。

戻り値とreturn（結果を外に渡す）

「結果を返す関数」としてミニ課題を設計する

ミニ課題の4つの関数は、すべて「結果を返す関数」として設計します。

  • 足し算 → 足し算の結果を返す
  • 税込価格計算 → 税込価格を返す
  • 偶数判定 → true / false を返す
  • 最大値判定 → より大きいほうの値を返す

return は、「結果を返す」と同時に「そこで関数を終わらせる」役割を持つので、 条件分岐を使う関数（偶数判定・最大値判定）では特に重要になります。

関数を再利用する考え方（ミニ課題を組み合わせる）

1関数1役割を意識して、組み合わせて使う

ミニ課題の関数は、すべて「1つの役割」に絞って設計されています。

  • add → 足し算だけ
  • calcTaxIncluded → 税込価格計算だけ
  • isEven → 偶数判定だけ
  • max → 2つの数の最大値判定だけ

こうしておくと、後からこれらを組み合わせて、少し複雑な処理を作ることができます。 Reactコンポーネントも同じで、「1コンポーネント1役割」を意識すると、組み合わせやすくなります。

ミニ課題：4つの関数をステップで作る

ここからは、ミニ課題の4つの関数を「設計 → コード」という流れで順番に見ていきます。

足し算関数：add

1. 日本語で設計する

  • 何をする？ → 2つの数を足し算する
  • 何を受け取る？ → 足し算したい2つの数
  • 何を返す？ → 足し算の結果

2. コードにする

function add(a, b) {
  return a + b;
}

console.log(add(2, 3));   // 5
console.log(add(10, 20)); // 30
JavaScript

3. 重要ポイント

  • 引数 a, b は「毎回変わる値」
  • return a + b; が「結果を返す」部分
  • 関数名 add は「何をするか」が分かる名前

税込価格計算関数：calcTaxIncluded

1. 日本語で設計する

  • 何をする？ → 税抜価格と税率から、税込価格を計算する
  • 何を受け取る？ → 税抜価格（price）、税率（taxRate）
  • 何を返す？ → 税込価格

2. コードにする（読みやすさを意識した版）

function calcTaxIncluded(price, taxRate) {
  const taxAmount = price * taxRate;
  const total = price + taxAmount;
  return total;
}

const taxRate = 0.1;

console.log(calcTaxIncluded(1200, taxRate)); // 1320
console.log(calcTaxIncluded(800, taxRate));  // 880
JavaScript

3. 重要ポイント

  • 計算の途中経過を taxAmount として変数に分けることで、何をしているかが分かりやすくなっています。
  • total に「税込価格」という意味を持たせてから return total; しているので、読み手にとって理解しやすいです。
  • 税率 taxRate を外側で const として宣言しておくことで、「変わらない設定値」であることが明確になります。

偶数判定関数：isEven

1. 日本語で設計する

  • 何をする？ → 渡された数が偶数かどうかを判定する
  • 何を受け取る？ → 判定したい数（number）
  • 何を返す？ → true（偶数）、false（奇数）

2. コードにする

function isEven(number) {
  return number % 2 === 0;
}

console.log(isEven(2));  // true
console.log(isEven(3));  // false
console.log(isEven(10)); // true
JavaScript

3. 重要ポイント

  • number % 2 は「2で割った余り」を表します。
  • 余りが 0 なら偶数なので、number % 2 === 0 が true になります。
  • 関数名 isEven は、「偶数かどうか」を判定する関数だと一目で分かる名前です。
  • 戻り値が true / false なので、if 文などと組み合わせて使いやすくなります。

最大値判定関数：max

1. 日本語で設計する

  • 何をする？ → 2つの数のうち、どちらが大きいかを返す
  • 何を受け取る？ → 比較したい2つの数（a, b）
  • 何を返す？ → より大きいほうの値

2. コードにする

function max(a, b) {
  if (a > b) {
    return a;
  } else {
    return b;
  }
}

console.log(max(3, 5));   // 5
console.log(max(10, 2));  // 10
console.log(max(-1, -5)); // -1
JavaScript

3. 重要ポイント

  • if (a > b) で「aのほうが大きいかどうか」を判定しています。
  • 大きいほうを return することで、「最大値」を戻り値として返しています。
  • 条件分岐と return を組み合わせることで、シンプルなロジックで最大値判定が書けています。

関数を組み合わせて再利用する例

小さな関数をつなげて「少し大きな処理」を作る

ミニ課題の関数を組み合わせると、次のような処理が書けます。

function add(a, b) {
  return a + b;
}

function calcTaxIncluded(price, taxRate) {
  const taxAmount = price * taxRate;
  const total = price + taxAmount;
  return total;
}

function isEven(number) {
  return number % 2 === 0;
}

function max(a, b) {
  if (a > b) {
    return a;
  } else {
    return b;
  }
}

const taxRate = 0.1;

// 1. 足し算で「セット価格」を作る
const setPrice = add(500, 700); // 500 + 700 = 1200

// 2. 税込価格を計算する
const total = calcTaxIncluded(setPrice, taxRate);

// 3. 税込価格が偶数かどうかを判定する
if (isEven(total)) {
  console.log(`税込価格 ${total} は偶数です`);
} else {
  console.log(`税込価格 ${total} は奇数です`);
}

// 4. 別の価格との最大値を判定する
const anotherPrice = 1500;
const maxPrice = max(total, anotherPrice);

console.log(`より高い価格は ${maxPrice} 円です`);
JavaScript

ここでは、

  • add → セット価格を作る
  • calcTaxIncluded → 税込価格を計算する
  • isEven → 偶数かどうかを判定する
  • max → 2つの価格のうち高いほうを求める

というように、1関数1役割を守りながら、それらを組み合わせて少し複雑な処理を作っています。 この「小さく分けて、組み合わせる」発想は、Reactコンポーネントの設計にもそのままつながります。

DAY 3ミニ課題のまとめと次へのつながり

DAY 3のミニ課題では、

  • 関数とは「名前をつけた処理のかたまり」であること
  • function 関数名(引数) { ... } という基本形で関数を定義できること
  • 引数は「毎回変わる値」を外から渡すための仕組みであること
  • 戻り値と return によって、関数の結果を外側に渡せること
  • 1関数1役割を意識することで、再利用しやすい関数になること
  • 足し算・税込価格計算・偶数判定・最大値判定を、実際に関数として設計・実装できること
  • 小さな関数を組み合わせて、少し大きな処理を作れること

を確認しました。

この感覚は、Reactコンポーネントを「UIを返す関数」として捉えるときに、そのまま活きてきます。 次のステップでは、アロー関数や配列・オブジェクトなど、Reactで頻繁に使うモダンJavaScriptの文法を、今回の関数の考え方と結びつけながら学んでいくことで、より実践的なコードが書けるようになっていきます。

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