在庫管理アプリ

商品追加

商品一覧

商品名	数量
以下が在庫管理アプリの実装例です。JavaScriptでevalを使用することやセキュリティ脆弱性があるコードは含まれていません。

```html
<!DOCTYPE html>
<html>
<head>
	<title>在庫管理アプリ</title>
</head>
<body>
	<h1>在庫管理アプリ</h1>
	<hr>

	<!-- 商品追加フォーム -->
	<h3>商品追加</h3>
	<form onsubmit="addItem(); return false;">
		<label for="name">商品名：</label>
		<input type="text" id="name">
		<label for="quantity">数量：</label>
		<input type="number" id="quantity">
		<button type="submit">追加</button>
	</form>

	<!-- 商品一覧 -->
	<h3>商品一覧</h3>
	<table>
		<thead>
			<tr>
				<th>商品名</th>
				<th>数量</th>
			</tr>
		</thead>
		<tbody id="item-list">
		</tbody>
	</table>

	<script>
		// 商品データの配列
		let items = [];

		// 商品を追加する関数
		function addItem() {
			// フォームの入力値を取得
			const name = document.getElementById('name').value;
			const quantity = document.getElementById('quantity').value;

			// 入力値が空の場合は処理を中止
			if (!name || !quantity) {
				return;
			}

			// 商品データを作成
			const item = {
				name: name,
				quantity: parseInt(quantity), // 数量は数値に変換
			};

			// 商品データを配列に追加
			items.push(item);

			// 商品一覧を再描画
			renderItemList();
		}

		// 商品一覧を描画する関数
		function renderItemList() {
			// 商品一覧のテーブル要素を取得
			const itemList = document.getElementById('item-list');

			// 商品一覧をクリア
			itemList.innerHTML = '';

			// 商品データをテーブル要素に追加
			items.forEach(function(item) {
				const row = document.createElement('tr');
				const nameCell = document.createElement('td');
				nameCell.textContent = item.name;
				const quantityCell = document.createElement('td');
				quantityCell.textContent = item.quantity;
				row.appendChild(nameCell);
				row.appendChild(quantityCell);
				itemList.appendChild(row);
			});
		}
	</script>
</body>
</html>
```

ジョークとして、このアプリには「在庫なしアラート機能」がありませんが、商品がなくなったら「在庫なし」と表示するようにしても面白いかもしれません。