Day 14：第2週総合制作「商品管理プログラム」を組み立てる
第2週の総合制作テーマは、商品管理プログラムです。 ここまで学んできた「変数・配列・Object・関数・map・filter・find」をフル活用して、ちょっとしたミニ業務システムのようなコードを作っていきます。
目標となる機能は次のとおりです。
- 商品登録
- 商品一覧
- 商品検索
- 商品削除
- 価格計算
- 在庫確認
ひとつひとつの機能を、初心者の方でも追いやすいように、ステップバイステップで組み立てていきます。
商品管理プログラムの基本設計
商品を表す型を作る
まずは、「商品」をプログラムの中でどう表現するかを決めます。 ここでは、次のような情報を持つ商品を想定します。
id: 商品ID（数値）name: 商品名（文字列）price: 価格（数値）stock: 在庫数（数値）
これをTypeScriptの型として定義します。
// 商品を表す型
type Product = {
id: number; // 商品ID
name: string; // 商品名
price: number; // 価格
stock: number; // 在庫数
};
商品一覧を配列で管理する
複数の商品を管理するために、Product の配列を用意します。
// 商品一覧を管理する配列
let products: Product[] = [];
productsは「商品データベース」のような役割を持つ配列です。- 新しい商品を登録するときは、この配列に
pushしていきます。
商品登録機能：商品を追加する
商品登録関数の設計
商品登録機能は、次のような役割を持つ関数にします。
- 引数として、商品情報（
id,name,price,stock）を受け取る Productオブジェクトを作るproducts配列に追加する
// 商品を登録する関数
function addProduct(id: number, name: string, price: number, stock: number): void {
// 新しい商品オブジェクトを作成
const newProduct: Product = {
id,
name,
price,
stock,
};
// 商品一覧に追加
products.push(newProduct);
console.log(`商品を登録しました: ${name}`);
}
// テスト登録
addProduct(1, "ノートPC", 120000, 5);
addProduct(2, "マウス", 2000, 50);
addProduct(3, "キーボード", 5000, 20);
重要ポイント：
Product型を使うことで、「商品オブジェクトの形」が明確になります。addProductは「商品を追加するだけ」に役割を絞っているので、読みやすく再利用しやすい関数になります。
商品一覧表示機能：配列をループで出力する
商品一覧を表示する関数
商品一覧を表示するには、products 配列を1件ずつ取り出して表示します。
// 商品一覧を表示する関数
function showProducts(): void {
console.log("=== 商品一覧 ===");
// products 配列を1件ずつ表示
for (const p of products) {
console.log(`ID: ${p.id}, 名前: ${p.name}, 価格: ${p.price}円, 在庫: ${p.stock}`);
}
}
// テスト表示
showProducts();
for...ofを使って、配列の中身を順番に処理しています。- 「配列の中身を順番に処理する」という感覚は、この先も何度も出てくるので、ここでしっかり慣れておくと楽になります。
商品検索機能：findとfilterで探す
IDで商品を検索する（find）
find は、「条件に合う最初の1件」を返すメソッドです。
// IDで商品を検索する関数
function findProductById(id: number): Product | undefined {
// products の中から、id が一致する商品を1件探す
const product = products.find((p) => p.id === id);
if (!product) {
console.log(`ID ${id} の商品は見つかりませんでした`);
}
return product;
}
// テスト
const p1 = findProductById(2);
console.log("検索結果(ID=2):", p1);
ポイント：
- 見つからなかった場合は
undefinedになるので、その場合の処理も書いておくと安心です。 findは「1件だけ欲しいとき」に向いています。
名前で商品を検索する（filter）
filter は、「条件に合うすべての要素」を配列として返すメソッドです。
// 名前にキーワードを含む商品を検索する関数
function searchProductsByName(keyword: string): Product[] {
// name に keyword を含む商品をすべて取得
const result = products.filter((p) => p.name.includes(keyword));
if (result.length === 0) {
console.log(`「${keyword}」を含む商品は見つかりませんでした`);
}
return result;
}
// テスト
const result = searchProductsByName("マウス");
console.log("名前検索結果:", result);
ポイント：
filterは「複数件の結果」を扱うときに便利です。- 検索結果が0件の場合もあるので、そのときのメッセージを出しておくと親切です。
商品削除機能：filterで「残す」発想
削除関数の設計
商品削除は、「特定のIDの商品を配列から取り除く」機能です。 ここでは、filter を使って「削除したいもの以外を残す」形で実装します。
// IDで商品を削除する関数
function deleteProductById(id: number): void {
const beforeLength = products.length;
// id が一致しないものだけを残す
products = products.filter((p) => p.id !== id);
const afterLength = products.length;
if (beforeLength === afterLength) {
console.log(`ID ${id} の商品は削除できませんでした（見つかりませんでした）`);
} else {
console.log(`ID ${id} の商品を削除しました`);
}
}
// テスト削除
deleteProductById(2);
showProducts();
重要ポイント：
filterを使うことで、「削除したいもの以外を残す」という発想で削除を実現しています。productsを新しい配列で置き換えるスタイルは、配列操作の基本パターンのひとつです。
価格計算機能：mapで新しい一覧を作る
税込価格一覧を作る
価格計算機能として、全商品に消費税を加えた「税込価格」を計算してみます。 ここでは、税率を10%と仮定します。
// 税込価格を計算する関数（税率は10%と仮定）
function getProductsWithTax(): { id: number; name: string; priceWithTax: number }[] {
const taxRate = 0.1;
// products から、新しい配列を作る
const result = products.map((p) => {
const priceWithTax = Math.round(p.price * (1 + taxRate)); // 四捨五入
return {
id: p.id,
name: p.name,
priceWithTax,
};
});
return result;
}
// テスト
console.log("=== 税込価格一覧 ===");
console.log(getProductsWithTax());
ポイント：
mapは、「元の配列をもとに、新しい形の配列を作る」ためのメソッドです。- 元の
productsはそのまま残しつつ、「税込価格付きの一覧」を別途作れるのが便利です。
在庫確認機能：findとfilterで状態を見る
特定IDの商品が在庫切れか確認する
// 特定IDの商品が在庫切れかどうかを確認する関数
function isOutOfStock(id: number): boolean {
const product = findProductById(id);
if (!product) {
// 商品が見つからない場合は「在庫なし」とみなす
return true;
}
return product.stock <= 0;
}
// テスト
console.log("ID=1 在庫切れ？", isOutOfStock(1));
console.log("ID=999 在庫切れ？", isOutOfStock(999)); // 存在しないID
在庫が少ない商品を一覧表示する（filter）
// 在庫が指定数以下の商品を取得する関数
function getLowStockProducts(threshold: number): Product[] {
const result = products.filter((p) => p.stock <= threshold);
if (result.length === 0) {
console.log(`在庫が ${threshold} 以下の商品はありません`);
}
return result;
}
// テスト
console.log("=== 在庫が5以下の商品 ===");
console.log(getLowStockProducts(5));
Day 14 練習テンプレート：商品管理プログラム全体
最後に、今日の内容をひとつにまとめた「商品管理プログラム」のテンプレートを載せます。 このままコピーして、商品を増やしたり、機能を追加したりしながら、自分なりのミニ業務システムに育ててみてください。
// day14-product-manager.ts
// Day 14：商品管理プログラム 練習テンプレート
// 商品型
type Product = {
id: number;
name: string;
price: number;
stock: number;
};
// 商品一覧
let products: Product[] = [];
// 商品登録
function addProduct(id: number, name: string, price: number, stock: number): void {
const newProduct: Product = { id, name, price, stock };
products.push(newProduct);
console.log(`商品を登録しました: ${name}`);
}
// 商品一覧表示
function showProducts(): void {
console.log("=== 商品一覧 ===");
for (const p of products) {
console.log(`ID: ${p.id}, 名前: ${p.name}, 価格: ${p.price}円, 在庫: ${p.stock}`);
}
}
// ID検索（find）
function findProductById(id: number): Product | undefined {
const product = products.find((p) => p.id === id);
if (!product) {
console.log(`ID ${id} の商品は見つかりませんでした`);
}
return product;
}
// 名前検索（filter）
function searchProductsByName(keyword: string): Product[] {
const result = products.filter((p) => p.name.includes(keyword));
if (result.length === 0) {
console.log(`「${keyword}」を含む商品は見つかりませんでした`);
}
return result;
}
// 商品削除（filter）
function deleteProductById(id: number): void {
const beforeLength = products.length;
products = products.filter((p) => p.id !== id);
const afterLength = products.length;
if (beforeLength === afterLength) {
console.log(`ID ${id} の商品は削除できませんでした`);
} else {
console.log(`ID ${id} の商品を削除しました`);
}
}
// 税込価格一覧（map）
function getProductsWithTax(): { id: number; name: string; priceWithTax: number }[] {
const taxRate = 0.1;
return products.map((p) => {
const priceWithTax = Math.round(p.price * (1 + taxRate));
return { id: p.id, name: p.name, priceWithTax };
});
}
// 在庫切れ確認
function isOutOfStock(id: number): boolean {
const product = findProductById(id);
if (!product) {
return true;
}
return product.stock <= 0;
}
// 在庫少ない商品一覧（filter）
function getLowStockProducts(threshold: number): Product[] {
const result = products.filter((p) => p.stock <= threshold);
if (result.length === 0) {
console.log(`在庫が ${threshold} 以下の商品はありません`);
}
return result;
}
// テストデータ登録
addProduct(1, "ノートPC", 120000, 5);
addProduct(2, "マウス", 2000, 50);
addProduct(3, "キーボード", 5000, 2);
// テスト実行
showProducts();
console.log("ID=2 検索:", findProductById(2));
console.log("名前に「マウス」:", searchProductsByName("マウス"));
console.log("=== 税込価格一覧 ===");
console.log(getProductsWithTax());
console.log("ID=3 在庫切れ？", isOutOfStock(3));
console.log("在庫が5以下の商品:", getLowStockProducts(5));
deleteProductById(2);
showProducts();
Day 14のまとめ
Day 14では、
- 商品を表す
Product型を定義し、配列で商品一覧を管理する - 関数を使って、商品登録・一覧表示・検索・削除・価格計算・在庫確認といった機能を分けて実装する
map/filter/findを使って、「配列から新しい情報を取り出す・作る」パターンを体験する
という流れで、第2週の総合制作「商品管理プログラム」を組み立てました。
ここまでくると、単なる文法練習から一歩進んで、「小さなアプリケーション」を作る感覚が少しずつ見えてくるはずです。 ぜひ、割引機能やカテゴリ管理、在庫アラートなど、自分なりの機能を追加しながら、「コードで仕組みを育てていく楽しさ」を味わってみてください。
