- Day 3：関数で「処理のまとまり」をつくる
- 関数とは：処理をひとまとめにした「小さなプログラム」
- 関数定義：functionキーワードで「処理のまとまり」に名前を付ける
- 引数とは：関数に渡す「入力データ」
- 戻り値とreturn：関数から「結果」を返す
- 関数を再利用する考え方：同じ処理を「名前付きの部品」にする
- ミニテンプレート：自己紹介関数を作ってみる
- Day 3のまとめ
- Day 3：関数で「処理の部品」をつくる
- 関数とは：処理をひとまとめにした「小さなプログラム」
- 関数定義：functionキーワードで「処理」に名前を付ける
- 引数とは：関数に渡す「入力データ」
- 戻り値とreturn：関数から「結果」を返す
- 関数を再利用する考え方：同じ処理を「名前付きの部品」にする
- ミニ課題：4つの関数を作ってみる
- 4つの関数をまとめて使うテンプレート
- Day 3のまとめ
Day 3：関数で「処理のまとまり」をつくる
JavaScriptの世界で、関数はとても重要な存在です。 「同じような処理を何度も書いているな…」と感じたとき、それをスッキリ整理してくれるのが関数です。関数を理解すると、Reactのコンポーネントの考え方もぐっと分かりやすくなっていきます。
ここでは、関数とは何か、どう定義するのか、引数・戻り値・returnの意味、そして「再利用する考え方」まで、初心者向けにやさしくかみ砕いて解説していきます。
関数とは：処理をひとまとめにした「小さなプログラム」
関数のイメージ
関数（function）は、ある目的を持った処理をひとまとめにした「小さなプログラム」です。
- 「挨拶メッセージを表示する処理」
- 「2つの数を足し算する処理」
- 「自己紹介文を組み立てる処理」
こういった“ひとまとまりの仕事”を、名前を付けて保存しておき、必要なときに呼び出して使えるようにしたものが関数です。
関数を使うメリット
- 同じ処理を何度も書かなくてよくなる（再利用できる）
- コードの意味が分かりやすくなる（「この関数は何をするか」が名前で伝わる）
- 修正がしやすくなる（処理を変えたいときは、その関数だけ直せばよい）
関数定義：functionキーワードで「処理のまとまり」に名前を付ける
いちばん基本的な関数定義
JavaScriptの基本的な関数定義は、次のような形をしています。
// greet という名前の関数を定義します
function greet() {
// この中に「関数がやる仕事」を書きます
console.log("こんにちは！JavaScriptの関数の世界へようこそ！");
}
// 関数を「呼び出す」と、上の処理が実行されます
greet(); // コンソールにメッセージが表示されます
構造を分解すると：
function：関数を定義するキーワードgreet：関数の名前（自分で決めてOK）()：引数（後で説明します）を書く場所{ ... }：関数の中身（実行したい処理）を書くブロック
「関数を定義する」と「関数を呼び出す」は別の操作です。 定義しただけでは動かず、greet(); のように呼び出したときに初めて実行されます。
引数とは：関数に渡す「入力データ」
引数の基本イメージ
引数（ひきすう／parameter, argument）は、関数に渡す「入力データ」です。
たとえば「名前を受け取って挨拶する関数」を作るとき、 「誰に挨拶するのか？」という情報を引数として渡します。
// name という引数を受け取る関数を定義します
function greet(name) {
// name を使ってメッセージを作ります
console.log("こんにちは、" + name + "さん！");
}
// 関数を呼び出すときに、実際の値（引数）を渡します
greet("太郎"); // こんにちは、太郎さん！
greet("花子"); // こんにちは、花子さん！
- 関数定義側：
function greet(name) { ... }nameが「引数（パラメータ）」
- 呼び出し側：
greet("太郎");"太郎"が「実際に渡している値（引数）」
引数を複数持つ関数
引数は複数指定することもできます。
// 2つの数値を受け取って、足し算する関数
function add(a, b) {
console.log("結果：" + (a + b));
}
add(3, 5); // 結果：8
add(10, 20); // 結果：30
aとbが引数- 呼び出し時に
add(3, 5)のように値を渡す
「関数にとって必要な情報は、引数として渡す」という考え方は、Reactコンポーネントの「props」にもつながっていきます。
戻り値とreturn：関数から「結果」を返す
戻り値とは何か
戻り値（return value）は、関数が処理した結果として「外に返す値」のことです。 戻り値を使うことで、関数の結果を別の処理に渡したり、変数に保存したりできます。
returnの基本
戻り値を返すときに使うのが return というキーワードです。
// 2つの数値を足し算して、その結果を「戻り値」として返す関数
function add(a, b) {
// a + b の結果を返します
return a + b;
}
// 関数の戻り値を変数に代入して使うことができます
let result = add(3, 5);
console.log(result); // 8
ここでのポイントは、
return a + b;と書いた瞬間、関数はそこで「終了」するadd(3, 5)の結果（戻り値）がresultに代入される
という2つです。
returnがない関数との違い
return を書かない関数は、「何も返さない関数」になります。
function greet(name) {
console.log("こんにちは、" + name + "さん！");
}
let value = greet("太郎");
console.log(value); // undefined（何も返していないので、値は undefined）
greetは「挨拶を表示する」という副作用が目的の関数- 戻り値は特に必要ないので、
returnを書いていない
「画面に表示する」「ログを出す」など、結果を返す必要がない処理では、return を使わないこともよくあります。
関数を再利用する考え方：同じ処理を「名前付きの部品」にする
再利用のイメージ
関数のいちばん大きなメリットは、同じ処理を何度も使い回せることです。
たとえば、「自己紹介文を組み立てて表示する処理」を関数にしておくと、 複数のユーザーに対して同じロジックを使い回すことができます。
// 自己紹介文を作って表示する関数
function introduce(name, age, hobby) {
const message =
"こんにちは、" +
name +
"です。" +
age +
"歳で、趣味は" +
hobby +
"です。";
console.log(message);
}
// いろいろなユーザーに対して同じ関数を再利用できます
introduce("太郎", 28, "ゲーム");
introduce("花子", 25, "読書");
introduce("健", 30, "キャンプ");
- 関数
introduceは「自己紹介文を作って表示する」という“仕事”を担当 - 名前・年齢・趣味だけを引数で変えれば、何度でも再利用できる
「1つの関数は1つの役割」が基本
関数を設計するときのコツは、1つの関数に1つの役割を持たせることです。
- 良い例：
calculateTotalPrice→ 合計金額を計算するformatUserName→ ユーザー名を整形するrenderProfileCard→ プロフィールカードを表示する
- あまり良くない例：
doEverything→ 何でもやる関数（中身がごちゃごちゃしがち）
役割ごとに関数を分けておくと、後からコードを読むときも「この関数は何をするのか」がすぐ分かります。
ミニテンプレート：自己紹介関数を作ってみる
最後に、Day 3の内容を使って「自己紹介関数」のテンプレートを作ってみます。 引数・戻り値・再利用のイメージをまとめて確認できるコードです。
// --- 自己紹介文を作る関数テンプレート ---
// 1. 自己紹介文を「作るだけ」の関数
// → 戻り値として文字列を返します
function buildIntroduction(name, age, hobby) {
// テンプレート的に自己紹介文を組み立てます
const message =
"こんにちは、" +
name +
"です。" +
age +
"歳で、趣味は" +
hobby +
"です。";
// 結果を戻り値として返します
return message;
}
// 2. 自己紹介文を「表示する」関数
// → buildIntroduction を内部で再利用します
function showIntroduction(name, age, hobby) {
// まず自己紹介文を作ります
const intro = buildIntroduction(name, age, hobby);
// その結果をコンソールに表示します
console.log(intro);
}
// 3. 実際に関数を呼び出してみます
showIntroduction("太郎", 28, "ゲーム");
showIntroduction("花子", 25, "読書");
showIntroduction("健", 30, "キャンプ");
このテンプレートのポイントは、
- 「文を作る関数」と「表示する関数」を分けていること
buildIntroductionを別の場所でも再利用できること（たとえばReactコンポーネントの中で使うなど）
関数をこうやって「部品」として意識し始めると、コード全体の整理がぐっと楽になります。
Day 3のまとめ
- 関数とは 特定の処理をひとまとめにした「小さなプログラム」。再利用・整理・可読性アップに役立ちます。
- 関数定義
function 関数名(引数) { 処理 }の形で定義し、関数名()で呼び出します。 - 引数 関数に渡す「入力データ」。複数指定でき、関数の外から値を受け取るために使います。
- 戻り値とreturn
returnで処理結果を返すことで、関数の外側でその結果を変数に保存したり、別の処理に渡したりできます。 - 再利用する考え方 同じ処理を何度も書かず、関数として定義して名前を付けておくことで、必要なときに何度でも呼び出せます。
Day 3：関数で「処理の部品」をつくる
JavaScriptの3日目は、いよいよ「関数」が主役です。 関数は、コードを“部品化”して整理するための、とても大事な仕組みです。Reactのコンポーネントも、広い意味では「関数の仲間」なので、ここをしっかり押さえておくと後がぐっと楽になります。
このDayでは、
- 関数とは何か
- 関数の定義のしかた
- 引数・戻り値・returnの意味
- 関数を再利用する考え方
- ミニ課題（足し算／税込価格計算／偶数判定／最大値判定）
を、ステップバイステップで見ていきます。
関数とは：処理をひとまとめにした「小さなプログラム」
関数のイメージ
関数（function）は、ある目的を持った処理をひとまとめにした「小さなプログラム」です。 たとえば、次のような“仕事”を関数にできます。
- 挨拶メッセージを表示する
- 2つの数を足し算する
- 税込み価格を計算する
- 偶数かどうかを判定する
同じ処理を何度も書く代わりに、1回関数として定義しておいて、必要なときに呼び出すイメージです。
関数を使うメリット
- 繰り返し書かなくてよくなる（再利用できる）
- コードの意味が分かりやすくなる（「何をする関数か」が名前で伝わる）
- 修正がしやすくなる（処理を変えたいときは、その関数だけ直せばよい）
関数は「レシピ」や「家電のボタン」のようなものだと考えるとイメージしやすいです。
関数定義：functionキーワードで「処理」に名前を付ける
いちばん基本的な書き方
JavaScriptの基本的な関数定義は、次の形をしています。
// greet という名前の関数を定義します
function greet() {
// この中に「関数がやる仕事」を書きます
console.log("こんにちは！JavaScriptの関数の世界へようこそ！");
}
// 関数を「呼び出す」と、上の処理が実行されます
greet(); // コンソールにメッセージが表示されます
構造を分解すると：
function：関数を定義するキーワードgreet：関数の名前（自分で決めてOK）()：引数を書く場所（今回は空）{ ... }：関数の中身（実行したい処理）を書くブロック
大事なポイントは、「定義しただけでは動かない」ということです。 greet(); のように“呼び出したとき”に初めて実行されます。
引数とは：関数に渡す「入力データ」
引数の基本イメージ
引数（ひきすう／parameter, argument）は、関数に渡す「入力データ」です。
たとえば「名前を受け取って挨拶する関数」を作るとき、 「誰に挨拶するのか？」という情報を引数として渡します。
// name という引数を受け取る関数を定義します
function greet(name) {
// name を使ってメッセージを作ります
console.log("こんにちは、" + name + "さん！");
}
// 関数を呼び出すときに、実際の値（引数）を渡します
greet("太郎"); // こんにちは、太郎さん！
greet("花子"); // こんにちは、花子さん！
- 関数定義側：
function greet(name) { ... }nameが「パラメータ（引数の受け皿）」
- 呼び出し側：
greet("太郎");"太郎"が「実際に渡している値（引数）」
「パラメータ＝受け皿」「引数＝実際の値」と覚えておくと、エラーメッセージなどを読むときに役立ちます。
戻り値とreturn：関数から「結果」を返す
戻り値とは何か
戻り値（return value）は、関数が処理した結果として「外に返す値」のことです。 戻り値を使うことで、関数の結果を別の処理に渡したり、変数に保存したりできます。
returnの基本
戻り値を返すときに使うのが return というキーワードです。
// 2つの数値を足し算して、その結果を「戻り値」として返す関数
function add(a, b) {
// a + b の結果を返します
return a + b;
}
// 関数の戻り値を変数に代入して使うことができます
let result = add(3, 5);
console.log(result); // 8
ここでのポイントは、
return a + b;と書いた瞬間、関数はそこで「終了」するadd(3, 5)の結果（戻り値）がresultに代入される
という2つです。 return を書き忘れると、関数は undefined を返してしまうので注意が必要です。
関数を再利用する考え方：同じ処理を「名前付きの部品」にする
再利用のイメージ
関数のいちばん大きなメリットは、同じ処理を何度も使い回せることです。
たとえば「税込価格を計算する処理」を関数にしておくと、 いろいろな商品に対して同じロジックを使い回せます。
// 税込み価格を計算する関数
function calcTaxIncluded(price, taxRate) {
// price：税抜価格
// taxRate：税率（例：0.1 で 10%）
const tax = price * taxRate;
const total = price + tax;
// 計算結果を戻り値として返します
return total;
}
// いろいろな商品に対して再利用できます
console.log(calcTaxIncluded(1000, 0.1)); // 1100
console.log(calcTaxIncluded(2500, 0.1)); // 2750
「同じ計算を何度も書く」のではなく、「関数に名前を付けておいて呼び出す」という発想が、 Reactのコンポーネントやイベント処理にもそのままつながっていきます。
ミニ課題：4つの関数を作ってみる
ここからは、Day 3の内容を使って、次の4つの関数を実際に作ってみるミニ課題です。
- 足し算
- 税込価格計算
- 偶数判定
- 最大値判定
それぞれ「関数定義」「引数」「戻り値」「再利用」という観点で見ていきます。
足し算関数：add
まずは一番シンプルな「足し算」の関数です。
// --- 足し算をする関数 ---
// 2つの数値を受け取り、その合計を返します
function add(a, b) {
// a と b を足し算した結果を戻り値として返します
return a + b;
}
// 関数を呼び出して結果を確認します
console.log(add(3, 5)); // 8
console.log(add(10, 20)); // 30
- 引数：
a,b（足し算したい2つの数） - 戻り値：
a + b（合計） - 再利用：どんな場面でも「足し算したい」ときに
addを呼び出せます
税込価格計算関数：calcTaxIncluded
次に、「税抜価格＋税率」から税込価格を計算する関数です。
// --- 税込み価格を計算する関数 ---
// price：税抜価格
// taxRate：税率（例：0.1 で 10%）
function calcTaxIncluded(price, taxRate) {
// 税額を計算します
const tax = price * taxRate;
// 税抜価格 + 税額 = 税込み価格
const total = price + tax;
// 計算結果を戻り値として返します
return total;
}
// 関数を呼び出して結果を確認します
console.log(calcTaxIncluded(1000, 0.1)); // 1100
console.log(calcTaxIncluded(2500, 0.1)); // 2750
ここでは、「計算ロジックを関数に閉じ込める」という考え方がポイントです。 税率が変わったり、計算方法を変えたくなったときも、この関数だけ直せばOKになります。
偶数判定関数：isEven
3つ目は、「偶数かどうか」を判定する関数です。
// --- 偶数かどうかを判定する関数 ---
// num：判定したい数値
function isEven(num) {
// 2で割った余りが0なら偶数です
// num % 2 は「num を 2 で割ったときの余り」を表します
return num % 2 === 0;
}
// 関数を呼び出して結果を確認します
console.log(isEven(4)); // true（偶数）
console.log(isEven(5)); // false（奇数）
console.log(isEven(0)); // true（0も偶数とみなします）
- 引数：
num（判定したい数） - 戻り値：
trueまたはfalse（偶数なら true、そうでなければ false）
このような「判定系」の関数は、条件分岐（if）と組み合わせてよく使われます。
const value = 7;
if (isEven(value)) {
console.log(value + " は偶数です");
} else {
console.log(value + " は奇数です");
}
最大値判定関数：max
最後は、「2つの数のうち大きいほう」を返す関数です。
// --- 2つの数値のうち、最大値を返す関数 ---
// a, b：比較したい2つの数値
function max(a, b) {
// if 文を使って、大きいほうを返します
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
この関数は、「比較ロジック」をひとまとめにしている例です。 もし「3つ以上の数から最大値を求めたい」となったら、別の関数として拡張していくこともできます。
4つの関数をまとめて使うテンプレート
最後に、今作った4つの関数をひとつのファイルでまとめて使うテンプレート例を載せておきます。
// --- Day 3 ミニ課題：関数まとめテンプレート ---
// 1. 足し算関数
function add(a, b) {
return a + b;
}
// 2. 税込み価格計算関数
function calcTaxIncluded(price, taxRate) {
const tax = price * taxRate;
const total = price + tax;
return total;
}
// 3. 偶数判定関数
function isEven(num) {
return num % 2 === 0;
}
// 4. 最大値判定関数
function max(a, b) {
if (a > b) {
return a;
} else {
return b;
}
}
// --- 動作確認用のコード ---
console.log("=== 足し算 ===");
console.log(add(3, 5)); // 8
console.log(add(10, 20)); // 30
console.log("=== 税込み価格計算 ===");
console.log(calcTaxIncluded(1000, 0.1)); // 1100
console.log(calcTaxIncluded(2500, 0.1)); // 2750
console.log("=== 偶数判定 ===");
console.log(isEven(4)); // true
console.log(isEven(5)); // false
console.log("=== 最大値判定 ===");
console.log(max(3, 5)); // 5
console.log(max(10, 2)); // 10
console.log(max(-1, -5)); // -1
このように「関数を部品として並べておき、下のほうでまとめて呼び出す」というスタイルは、 実際のアプリケーションでもよく使われる形です。
Day 3のまとめ
- 関数とは 特定の処理をひとまとめにした「小さなプログラム」で、再利用・整理・可読性アップに役立ちます。
- 関数定義
function 関数名(引数) { 処理 }の形で定義し、関数名()で呼び出します。 - 引数 関数に渡す「入力データ」。パラメータ（受け皿）と引数（実際の値）の区別を意識すると理解が深まります。
- 戻り値とreturn
returnで処理結果を返すことで、関数の外側でその結果を変数に保存したり、別の処理に渡したりできます。 - 再利用する考え方 足し算・税込価格計算・偶数判定・最大値判定のような処理を関数として定義しておくと、必要なときに何度でも呼び出せます。