- Day 10：関数の基本で「処理に名前をつける」感覚をつかむ
- 関数とは何か：ひとまとまりの処理に名前をつける
- 引数と戻り値：関数の「入口」と「出口」
- 引数の型・戻り値の型：TypeScriptらしい関数の書き方
- void：戻り値を返さない関数
- 実践：計算関数を作る（足し算・引き算・掛け算・割り算・平均）
- 足し算関数：add
- 引き算関数：subtract
- 掛け算関数：multiply
- 割り算関数：divide（割り算の注意点も少し）
- 平均関数：average（配列＋ループ＋関数の総合練習）
- 計算関数をまとめて使ってみる
- void を使った「表示専用」の関数も作ってみる
- Day 10 練習テンプレート
- Day 10のまとめ
- Day 10：関数を量産して「処理に名前をつける」感覚を鍛える
- 関数の基本をもう一度整理する
- 数値を扱う関数たち（1〜4）
- 文字列を扱う関数たち（5〜7）
- 配列を扱う関数たち（8〜9）
- voidを使う「表示専用」の関数たち（10〜11）
- Day 10 練習用テンプレート（10個以上の関数まとめ）
- Day 10のまとめ
Day 10：関数の基本で「処理に名前をつける」感覚をつかむ
Day 10では、いよいよ 関数（function） に入っていきます。 関数は、プログラムの世界で「ひとまとまりの処理に名前をつける」ための仕組みです。 今日は、足し算・引き算・掛け算・割り算・平均を題材にしながら、引数・戻り値・型・void といった基本を、ステップバイステップでかみ砕いていきます。
関数とは何か：ひとまとまりの処理に名前をつける
関数のイメージ
関数は、ざっくり言うと 「入力を受け取って、処理をして、結果を返す箱」 です。
function add(a: number, b: number): number {
return a + b;
}
addという名前の関数aとbが 引数（入力）a + bが 処理return a + b;で 戻り値（結果） を返す
この関数を使うときは、こう書きます。
const result = add(2, 3); // 2 と 3 を渡して、結果を受け取る
console.log(result); // 5
引数と戻り値：関数の「入口」と「出口」
引数（ひきすう）
引数は、関数に渡す「入力」です。
function greet(name: string): void {
console.log(`こんにちは、${name}さん`);
}
name: stringが引数- 関数を呼び出すときに、
greet("Taro")のように値を渡します。
戻り値（もどりち）
戻り値は、関数が処理した結果として「返す値」です。
function double(x: number): number {
return x * 2;
}
const d = double(10); // 20 が返ってくる
console.log(d);
: numberが「戻り値の型」return x * 2;が「戻り値を返す処理」です。
引数の型・戻り値の型：TypeScriptらしい関数の書き方
TypeScriptでは、関数にも 型 をしっかり付けることができます。
引数の型
function add(a: number, b: number): number {
return a + b;
}
a: numberとb: numberが「引数の型」です。- これによって、
add("1", "2")のような間違った呼び出しを防げます。
戻り値の型
function add(a: number, b: number): number {
return a + b; // number 型の値を返す
}
): numberが「戻り値の型」です。- 関数が必ず
numberを返すことが保証されます。
void：戻り値を返さない関数
void は、「戻り値を返さない関数」の戻り値の型として使います。
例：ログを表示するだけの関数
function logMessage(message: string): void {
console.log("ログ:", message);
}
logMessage("処理が完了しました");
// 戻り値はないので、何も受け取らない
ポイント：
voidは「何も返さない」という意味です。- 「画面に表示するだけ」「ファイルに書き込むだけ」など、結果を返さずに副作用だけを持つ関数でよく使われます。
実践：計算関数を作る（足し算・引き算・掛け算・割り算・平均）
ここからは、実際に計算用の関数を作っていきます。 すべて 引数と戻り値に型を付けて、TypeScriptらしい書き方で進めます。
共通のイメージ
- 足し算：
add(a, b) - 引き算：
subtract(a, b) - 掛け算：
multiply(a, b) - 割り算：
divide(a, b) - 平均：
average(numbers)
足し算関数：add
// 足し算をする関数
function add(a: number, b: number): number {
// a と b を足した結果を返す
return a + b;
}
const sum = add(10, 5); // 10 + 5 = 15
console.log("足し算の結果:", sum);
深掘りポイント：
- 関数名
addは「何をするか」が一目でわかる名前にしています。 - 引数
aとbにnumber型を付けることで、「数値同士の足し算」であることが明確になります。 - 戻り値の型
numberによって、「この関数は数値を返す」ということが保証されます。
引き算関数：subtract
// 引き算をする関数
function subtract(a: number, b: number): number {
// a から b を引いた結果を返す
return a - b;
}
const diff = subtract(10, 5); // 10 - 5 = 5
console.log("引き算の結果:", diff);
ポイント：
subtractは「引く」という意味の英単語です。- 足し算とほぼ同じ形で、演算子だけ
+から-に変えています。 - 「同じパターンで関数を増やしていく」感覚を持っておくと、関数設計が楽になります。
掛け算関数：multiply
// 掛け算をする関数
function multiply(a: number, b: number): number {
// a と b を掛けた結果を返す
return a * b;
}
const product = multiply(10, 5); // 10 * 5 = 50
console.log("掛け算の結果:", product);
ポイント：
multiplyは「掛ける」という意味の英単語です。- 足し算・引き算と同じ形で、演算子だけ
*に変えています。 - こうした「似た形の関数」をまとめて作るとき、名前と演算子の対応が頭の中で整理されていきます。
割り算関数：divide（割り算の注意点も少し）
// 割り算をする関数
function divide(a: number, b: number): number {
// 割る数 b が 0 の場合は注意が必要
if (b === 0) {
console.log("エラー: 0 で割ることはできません");
return NaN; // 計算不能を表す値
}
return a / b;
}
const quotient = divide(10, 2); // 10 / 2 = 5
console.log("割り算の結果:", quotient);
const invalid = divide(10, 0); // 0 で割ろうとする
console.log("0 で割った結果:", invalid); // NaN
深掘りポイント：
- 割り算では、「0で割る」というケースに注意が必要です。
- ここでは、
b === 0のときにメッセージを出してNaNを返すようにしています。 - 実務では、エラーを投げたり、
nullを返したり、別の方法で扱うこともありますが、「危ないケースを事前にチェックする」という発想が大事です。
平均関数：average（配列＋ループ＋関数の総合練習）
平均は、配列の合計 ÷ 要素数 で求めます。 ここでは、number[] を引数に取り、number を返す関数を作ります。
// 平均を計算する関数
function average(numbers: number[]): number {
// 要素が 0 個の場合は平均を計算できないので注意
if (numbers.length === 0) {
console.log("エラー: 要素が 0 個の配列の平均は計算できません");
return NaN;
}
let sum = 0;
// 配列の合計を計算
for (const n of numbers) {
sum += n;
}
// 合計 ÷ 要素数 で平均を求める
const avg = sum / numbers.length;
return avg;
}
const nums = [10, 20, 30, 40];
const avgResult = average(nums);
console.log("平均の結果:", avgResult); // (10 + 20 + 30 + 40) / 4 = 25
const empty: number[] = [];
const avgEmpty = average(empty);
console.log("空配列の平均:", avgEmpty); // NaN
重要ポイント：
- 引数
numbers: number[]が「数値の配列」を受け取ることを表しています。 - 関数の中で、Day 5で学んだ「合計を計算するループ」のパターンを再利用しています。
- 要素数が 0 の場合（空配列）は平均を計算できないので、事前にチェックしています。
- こうした「危ないケースを先に弾く」書き方は、セキュリティや安全性の観点からもとても大切です。
計算関数をまとめて使ってみる
ここまで作った関数を、ひとつのファイルにまとめて使ってみます。
// day10-calculations.ts
// Day 10：関数の基本 練習用コード
// 足し算
function add(a: number, b: number): number {
return a + b;
}
// 引き算
function subtract(a: number, b: number): number {
return a - b;
}
// 掛け算
function multiply(a: number, b: number): number {
return a * b;
}
// 割り算
function divide(a: number, b: number): number {
if (b === 0) {
console.log("エラー: 0 で割ることはできません");
return NaN;
}
return a / b;
}
// 平均
function average(numbers: number[]): number {
if (numbers.length === 0) {
console.log("エラー: 要素が 0 個の配列の平均は計算できません");
return NaN;
}
let sum = 0;
for (const n of numbers) {
sum += n;
}
return sum / numbers.length;
}
// 実際に使ってみる
const a = 10;
const b = 5;
console.log("=== 計算関数の実行結果 ===");
console.log("a:", a, "b:", b);
console.log("足し算:", add(a, b)); // 15
console.log("引き算:", subtract(a, b)); // 5
console.log("掛け算:", multiply(a, b)); // 50
console.log("割り算:", divide(a, b)); // 2
const nums = [10, 20, 30, 40];
console.log("配列:", nums);
console.log("平均:", average(nums)); // 25
void を使った「表示専用」の関数も作ってみる
計算結果を表示するだけの関数を作ると、void の使いどころが見えてきます。
// 計算結果を表示する関数（戻り値は返さない）
function printResult(label: string, value: number): void {
console.log(`${label}: ${value}`);
}
const x = 8;
const y = 4;
printResult("足し算", add(x, y)); // 足し算: 12
printResult("引き算", subtract(x, y)); // 引き算: 4
printResult("掛け算", multiply(x, y)); // 掛け算: 32
printResult("割り算", divide(x, y)); // 割り算: 2
ポイント：
printResultは「表示するだけ」で、何も返さないので戻り値の型はvoidです。- 「計算する関数」と「表示する関数」を分けることで、役割がはっきりします。
- こうした「役割ごとに関数を分ける」考え方は、コードを読みやすく、保守しやすくするうえでとても重要です。
Day 10 練習テンプレート
最後に、今日の内容をまとめたテンプレートを載せておきます。 このままコピーして、引数や計算内容を変えながら、自分なりの関数を増やしてみてください。
// day10-template.ts
// Day 10：関数の基本 テンプレート
// 足し算
function add(a: number, b: number): number {
return a + b;
}
// 引き算
function subtract(a: number, b: number): number {
return a - b;
}
// 掛け算
function multiply(a: number, b: number): number {
return a * b;
}
// 割り算
function divide(a: number, b: number): number {
if (b === 0) {
console.log("エラー: 0 で割ることはできません");
return NaN;
}
return a / b;
}
// 平均
function average(numbers: number[]): number {
if (numbers.length === 0) {
console.log("エラー: 要素が 0 個の配列の平均は計算できません");
return NaN;
}
let sum = 0;
for (const n of numbers) {
sum += n;
}
return sum / numbers.length;
}
// 表示専用関数（void）
function printResult(label: string, value: number): void {
console.log(`${label}: ${value}`);
}
// テスト用の値
const a = 12;
const b = 3;
const nums = [5, 10, 15, 20];
console.log("=== 計算関数テスト ===");
printResult("足し算", add(a, b));
printResult("引き算", subtract(a, b));
printResult("掛け算", multiply(a, b));
printResult("割り算", divide(a, b));
printResult("平均", average(nums));
Day 10のまとめ
Day 10では、
- 関数とは「ひとまとまりの処理に名前をつける箱」であること
- 引数が「入口」、戻り値が「出口」であること
- 引数の型・戻り値の型を付けることで、TypeScriptらしく安全な関数を書けること
voidが「戻り値を返さない関数」のための型であること- 足し算・引き算・掛け算・割り算・平均という、身近な計算を関数として表現する練習
を一通り体験しました。
関数は、これから先の30日コースの中で何度も登場する「主役級」の存在です。 今日作った計算関数は、ぜひ自分で引数を増やしたり、別の計算を追加したりしながら、「関数に名前をつけて、処理をまとめる」感覚を体に馴染ませていってください。
Day 10：関数を量産して「処理に名前をつける」感覚を鍛える
Day 10の課題は、最低10個の関数を作成することです。 関数は、プログラムの世界で「ひとまとまりの処理に名前をつける」ための道具です。 ここでは、計算・文字列・配列・オブジェクト・ログ出力など、いろいろなジャンルの関数を作りながら、引数・戻り値・型・void の感覚をじっくり育てていきます。
関数の基本をもう一度整理する
関数の形
TypeScriptの基本的な関数の形は、次のようになります。
function 関数名(引数1: 型, 引数2: 型, ...): 戻り値の型 {
// ここに処理を書く
return 戻り値;
}
- 関数名：何をする関数なのかがわかる名前にします。
- 引数：関数に渡す「入力」です。型を付けておくと安全です。
- 戻り値：関数が返す「結果」です。型を付けておくと、何が返ってくるかが明確になります。
- void：戻り値を返さない関数の戻り値の型として使います。
ここからは、実際に10個以上の関数を作りながら、これらのポイントを体で覚えていきます。
数値を扱う関数たち（1〜4）
まずは、わかりやすい「数値」を扱う関数からスタートします。
1. 足し算をする関数
// 1. 足し算をする関数
function add(a: number, b: number): number {
// a と b を足した結果を返す
return a + b;
}
const sum = add(10, 5);
console.log("足し算:", sum); // 15
- 引数
a: number, b: number - 戻り値
number - 「2つの数値を足す」というシンプルな処理に名前をつけています。
2. 引き算をする関数
// 2. 引き算をする関数
function subtract(a: number, b: number): number {
// a から b を引いた結果を返す
return a - b;
}
const diff = subtract(10, 5);
console.log("引き算:", diff); // 5
- 足し算と同じ形で、演算子だけ
-に変えています。 - 「同じパターンで関数を増やす」感覚が少しずつ身についていきます。
3. 偶数かどうか判定する関数
// 3. 偶数かどうかを判定する関数
function isEven(n: number): boolean {
// 2 で割った余りが 0 なら偶数
return n % 2 === 0;
}
console.log("4 は偶数？", isEven(4)); // true
console.log("5 は偶数？", isEven(5)); // false
- 戻り値の型が
booleanになっています。 - 「はい／いいえ」を返す関数は、条件分岐と相性がよく、実務でもよく使われます。
4. 最大値を返す関数
// 4. 2つの数値のうち大きい方を返す関数
function max(a: number, b: number): number {
// 条件分岐で大きい方を返す
if (a >= b) {
return a;
} else {
return b;
}
}
console.log("max(10, 5):", max(10, 5)); // 10
console.log("max(3, 7):", max(3, 7)); // 7
- 条件分岐
ifと組み合わせることで、「比較して結果を返す」関数になっています。 - 「ロジックを関数に閉じ込める」感覚が少し見えてきます。
文字列を扱う関数たち（5〜7）
次に、文字列を扱う関数を作ってみます。
5. 挨拶文を作る関数
// 5. 名前を受け取って挨拶文を返す関数
function createGreeting(name: string): string {
// テンプレート文字列で挨拶文を作る
return `こんにちは、${name}さん`;
}
const greeting = createGreeting("Taro");
console.log(greeting); // こんにちは、Taroさん
- 引数
name: string - 戻り値
string - 「表示したい文章を関数で組み立てる」というパターンは、UIやログ出力でよく使われます。
6. 文字列の長さを返す関数
// 6. 文字列の長さを返す関数
function getLength(text: string): number {
// length プロパティで文字数を取得
return text.length;
}
console.log("『TypeScript』の長さ:", getLength("TypeScript")); // 10
- 文字列を受け取り、数値を返す関数です。
- 「入力と出力の型が違う」パターンの良い例になっています。
7. 大文字に変換する関数
// 7. 文字列を大文字に変換する関数
function toUpper(text: string): string {
// toUpperCase メソッドで大文字に変換
return text.toUpperCase();
}
console.log(toUpper("hello")); // "HELLO"
- 文字列を受け取り、文字列を返す「変換系」の関数です。
- 「元の値を壊さずに、新しい値を返す」というスタイルは、バグを減らすうえでも大切です。
配列を扱う関数たち（8〜9）
Day 5・Day 6で学んだ配列と、関数を組み合わせてみます。
8. 数値配列の合計を返す関数
// 8. 数値配列の合計を計算する関数
function sumArray(numbers: number[]): number {
let sum = 0;
// for...of で配列をループして合計を計算
for (const n of numbers) {
sum += n;
}
return sum;
}
const nums = [10, 20, 30];
console.log("配列の合計:", sumArray(nums)); // 60
- 引数
numbers: number[] - 戻り値
number - 「配列＋ループ＋関数」という、これまで学んだ要素が自然につながっています。
9. 20歳以上のユーザーだけを抽出する関数
// 9. ユーザー配列から 20 歳以上だけを抽出する関数
type User = {
id: number;
name: string;
age: number;
};
function filterAdults(users: User[]): User[] {
// filter で 20 歳以上のユーザーだけを残す
return users.filter((user) => user.age >= 20);
}
const users: User[] = [
{ id: 1, name: "Taro", age: 20 },
{ id: 2, name: "Hanako", age: 25 },
{ id: 3, name: "Jiro", age: 18 },
];
const adults = filterAdults(users);
console.log("20歳以上のユーザー:", adults);
- 引数
users: User[] - 戻り値
User[] - 「Objectの配列を受け取って、条件に合うものだけ返す」関数です。
- 実務でもよく登場するパターンで、「関数に意味のある名前をつける」練習にもなります。
voidを使う「表示専用」の関数たち（10〜11）
最後に、戻り値を返さない void の関数を作ってみます。
10. ログメッセージを表示する関数
// 10. ログメッセージを表示する関数（戻り値なし）
function logMessage(message: string): void {
console.log("[LOG]", message);
}
logMessage("処理が開始されました");
logMessage("処理が完了しました");
- 戻り値の型が
voidになっています。 - 「何かを返す」のではなく、「副作用（表示）」だけを行う関数です。
11. ユーザー情報をきれいに表示する関数
// 11. ユーザー情報を整形して表示する関数（戻り値なし）
function printUser(user: User): void {
console.log("=== ユーザー情報 ===");
console.log("ID:", user.id);
console.log("名前:", user.name);
console.log("年齢:", user.age);
}
const user1: User = { id: 1, name: "Taro", age: 20 };
printUser(user1);
- 引数に
User型を取り、戻り値はvoidです。 - 「表示の仕方」を関数に閉じ込めることで、コードの見通しがよくなります。
- 実務では、ログ出力や画面表示のロジックを関数にまとめることがよくあります。
Day 10 練習用テンプレート（10個以上の関数まとめ）
最後に、ここまでの関数をひとつのファイルにまとめたテンプレートを載せておきます。 このままコピーして、引数や処理内容を変えながら、自分なりの関数を増やしてみてください。
// day10-many-functions.ts
// Day 10：関数の基本 練習用（10個以上の関数）
type User = {
id: number;
name: string;
age: number;
};
// 1. 足し算
function add(a: number, b: number): number {
return a + b;
}
// 2. 引き算
function subtract(a: number, b: number): number {
return a - b;
}
// 3. 偶数判定
function isEven(n: number): boolean {
return n % 2 === 0;
}
// 4. 最大値
function max(a: number, b: number): number {
if (a >= b) {
return a;
} else {
return b;
}
}
// 5. 挨拶文作成
function createGreeting(name: string): string {
return `こんにちは、${name}さん`;
}
// 6. 文字列の長さ
function getLength(text: string): number {
return text.length;
}
// 7. 大文字変換
function toUpper(text: string): string {
return text.toUpperCase();
}
// 8. 数値配列の合計
function sumArray(numbers: number[]): number {
let sum = 0;
for (const n of numbers) {
sum += n;
}
return sum;
}
// 9. 20歳以上のユーザーを抽出
function filterAdults(users: User[]): User[] {
return users.filter((user) => user.age >= 20);
}
// 10. ログメッセージ表示（void）
function logMessage(message: string): void {
console.log("[LOG]", message);
}
// 11. ユーザー情報表示（void）
function printUser(user: User): void {
console.log("=== ユーザー情報 ===");
console.log("ID:", user.id);
console.log("名前:", user.name);
console.log("年齢:", user.age);
}
// テスト実行
const a = 10;
const b = 5;
console.log("足し算:", add(a, b));
console.log("引き算:", subtract(a, b));
console.log("偶数判定（4）:", isEven(4));
console.log("max(10, 5):", max(10, 5));
console.log(createGreeting("Hanako"));
console.log("『TypeScript』の長さ:", getLength("TypeScript"));
console.log("大文字:", toUpper("hello"));
const nums = [10, 20, 30];
console.log("配列の合計:", sumArray(nums));
const users: User[] = [
{ id: 1, name: "Taro", age: 20 },
{ id: 2, name: "Hanako", age: 25 },
{ id: 3, name: "Jiro", age: 18 },
];
console.log("20歳以上のユーザー:", filterAdults(users));
logMessage("関数のテストを開始します");
printUser(users[0]);
logMessage("関数のテストが完了しました");
Day 10のまとめ
Day 10では、
- 関数の基本形（関数名・引数・戻り値）
- 引数の型・戻り値の型を付けることで、TypeScriptらしく安全な関数を書けること
booleanやstring、配列、オブジェクトなど、さまざまな型を扱う関数を作る練習voidを使った「表示専用」の関数で、副作用だけを持つ処理を表現する方法- 最低10個の関数を通して、「処理に名前をつけてまとめる」感覚を育てること
を一通り体験しました。
今日作った関数たちは、ぜひ引数を増やしたり、別の型を扱うようにしたりしながら、自分なりの「関数コレクション」に育ててみてください。 関数が自然に書けるようになると、プログラム全体の構造がぐっと見通しよくなっていきます。