Vue.jsに触れよう5
公開日: 2025/1/15
お疲れ様です。
今回は、Vue.jsで簡易的な家計簿アプリのようなものを作りました。
本記事では、家計簿アプリの詳細と、コードの説明をしていきます。
1. 作成したアプリの動作
以下が作成した家計簿アプリです。
収入の状態で金額、内訳を入力し、追加ボタンを押すと以下の履歴に表示され、合計欄に反映されます。
支出に変更して追加ボタンを押しても同じように反映されます。
削除ボタンを押すと履歴を削除することができます。
OSはWindows、エディタはメモ帳（htmlファイルで保存）、使用言語はJavaScript、フレームワークはVue.jsです。
以上が作成したアプリの概要です。
収入の状態で金額、内訳を入力し、追加ボタンを押すと以下の履歴に表示され、合計欄に反映されます。
支出に変更して追加ボタンを押しても同じように反映されます。
削除ボタンを押すと履歴を削除することができます。
OSはWindows、エディタはメモ帳（htmlファイルで保存）、使用言語はJavaScript、フレームワークはVue.jsです。
以上が作成したアプリの概要です。
2. 記述したコード
実際に記述したコードは以下の通りになります。
kakeibo.html
kakeibo.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>家計簿支出アプリ</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<h1>家計簿アプリ</h1>
<!-- 収入と支出の入力フォーム -->
<div>
<label for="type">収支：</label>
<select v-model="type">
<option value="収入">収入：</option>
<option value="支出">支出：</option>
</select>
<label for="amount">金額：</label>
<input type="number" v-model="amount">
<label for="description">内訳：</label>
<input type="text" v-model="description">
<button @click="addTransaction">追加</button>
</div>
<!-- 収支のリスト -->
<div>
<h2>履歴</h2>
<ul>
<li v-for="(transaction, index) in transactions" :key="index">
{{ transaction.type }} - {{ transaction.amount }} - {{ transaction.description }}
<button @click="removeTransaction(index)">削除</button>
</li>
</ul>
</div>
<!-- 合計金額の表示 -->
<div>
<h2>合計</h2>
<p>合計収入：{{ totalIncome }}</p>
<p>合計支出：{{ totalExpense }}</p>
&n3. まとめ
いかがでしたでしょうか。
本記事では、メモ帳を用いて簡単なアプリを作りました。
このように、特別に何かを用意しなくてもVue.jsを使用することができました。
しかし、家計簿アプリですが、このままだとファイルを開いているだけで、入力したデータを保存しておくことができません。
今後家計簿アプリを作る際は、データを保管できたらいいなと思っています。
また、おいおいUIをきれいなものにしていきたいと思います。
読んでくださり、ありがとうございました。