このアプリで作っているもの
ブラウザ上で見積書・請求書を作成できるWebアプリ。
できること：
- 見積書／請求書の切り替え
- 宛名入力
- 商品行追加
- 数量・単価入力
- 自動金額計算
- 消費税計算（外税）
- 保存機能
- 読み込み機能
- 印刷・PDF保存
ファイル構成
invoice-app
├ index.html
├ style.css
└ script.js
① HTML の役割
HTMLは「画面の骨組み」。
例：
<input>
→ 入力欄
<button>
→ ボタン
<table>
→ 表
このアプリで使った重要タグ
見出し
<h1>
<h2>
入力欄
<input type="text">
文字入力。
数値入力
<input type="number">
数量・単価で使用。
日付入力
<input type="date">
発行日。
選択メニュー
<select>
見積書／請求書の切り替え。
表
<table>
商品一覧。
- thead → タイトル行
- tbody → データ行
- tr → 行
- td → セル
② CSS の役割
CSSは「見た目」。
例：
background: white;
→ 背景色
padding: 40px;
→ 内側余白
border: 1px solid #ddd;
→ 枠線
このアプリで重要だったCSS
Flexbox
display: flex;
横並びにする。
使った場所：
- 上部情報
- ボタンエリア
印刷専用CSS
@media print
印刷時だけデザイン変更。
例：
.no-print {
display: none;
}
→ ボタンを印刷しない。
③ JavaScript の役割
JavaScriptは「動き」。
このアプリでは：
- 計算
- 行追加
- 保存
- 読み込み
- 印刷
を担当。
④ DOM操作
HTMLをJavaScriptから操作すること。
例：
const title = document.getElementById("title");
→ HTML要素を取得。
テキスト変更
title.textContent = "請求書";
→ 表示文字を変更。
⑤ イベント処理
「何かした時に動く」。
例：
button.addEventListener("click", () => {
});
→ ボタンクリック時。
inputイベント
input.addEventListener("input", calculateTotal);
→ 入力されるたびに再計算。
リアルタイム更新。
⑥ 金額計算
重要ポイント。
const amount = quantity * price;
数量 × 単価。
合計計算
subtotal += amount;
1行ずつ足していく。
⑦ 外税処理
今回のアプリは外税。
const tax = Math.floor(subtotal * 0.1);
const total = subtotal + tax;
意味：
小計 10,000円
↓
消費税 1,000円
↓
合計 11,000円
⑧ 行追加
JavaScriptでHTMLを増やしている。
const row = document.createElement("tr");
→ 新しい行を作成。
HTMLを流し込む
row.innerHTML = `...`;
→ 行の中身を作る。
表へ追加
itemTable.appendChild(row);
→ 画面へ追加。
⑨ 削除処理
button.closest("tr").remove();
意味：
- closest(“tr”)
→ 一番近い行を探す - remove()
→ 消す
⑩ 保存機能
localStorage を使用。
ブラウザ内保存。
保存
localStorage.setItem("invoiceData", data);
→ 保存。
読み込み
localStorage.getItem("invoiceData");
→ 取り出し。
⑪ JSON
保存時はJSON化している。
JSON.stringify(data)
→ 文字列化。
復元
JSON.parse(data)
→ 元のデータに戻す。
⑫ 配列 map
Array.from(rows).map(...)
意味：
表の行を1件ずつデータ化。
⑬ このアプリのポイント
Webアプリ基礎
学べるもの：
- HTML
- CSS
- JavaScript
- DOM操作
- イベント処理
- 状態管理
- 配列
- オブジェクト
- JSON
- localStorage
- 動的UI
- 自動計算
- 印刷対応
⑭ 今後追加できる機能
初級
- ロゴ表示
- 振込先欄
- PDF出力
- 明細複数保存
- ダークモード
中級
- 顧客管理
- 商品マスタ
- 保存一覧
- 検索機能
- 並び替え
上級
- PHP保存
- JSONファイル保存
- データベース(MySQL)
- ログイン機能
- ユーザー管理
- クラウド化
⑮ このアプリで理解すると強い概念
状態管理
現在の入力状態を保持する。
例：
- 商品
- 数量
- 合計
- 顧客情報
CRUD
業務アプリの基本。
- Create → 作成
- Read → 読み込み
- Update → 更新
- Delete → 削除
⑯ まとめ
JavaScriptを使って、見積書・請求書を作成できるWebアプリを作成。
商品行の追加・削除、リアルタイム計算、外税処理、localStorage保存、印刷対応を実装。
DOM操作・イベント処理・状態管理・JSON保存など、Webアプリ基礎を学習した。
コメント