家計簿アプリを作る #49：年間サマリーにグラフを追加
家計簿アプリ作成シリーズの第49回です。年間サマリーページはこれまでテーブルだけでしたが、月別収支の推移を視覚的にも掴めるよう、既存の月次推移グラフと同じ要領で棒グラフを追加します。
実装方針
収支一覧ページの「月次推移」グラフとほぼ同じ構造で、データソースを data.monthlyData(全期間)から data.monthlyTransactions(選択した年のみ)に変えるだけで作れました。
const yearlyData = $derived({
labels: data.monthlyTransactions.map((d) => d.month),
datasets: [
{
label: "収入",
data: data.monthlyTransactions.map((d) => d.totalMonthlyIncome),
backgroundColor: ["rgba(34, 197, 94, 0.5)"],
borderColor: ["rgb(34, 197, 94)"],
borderWidth: 1,
},
{
label: "支出",
data: data.monthlyTransactions.map((d) => d.totalMonthlyExpense),
backgroundColor: ["rgba(239, 68, 68, 0.5)"],
borderColor: ["rgb(239, 68, 68)"],
borderWidth: 1,
},
],
});
ハマりポイント:テンプレート内でJSコメントは使えない
グラフ部分にコメントを残そうとして、<script> の外(HTMLテンプレート部分)に // グラフ のようにJS風のコメントを書いてしまい、コンパイルエラーになりました。
<!-- ❌ テンプレート内でJSコメント構文は使えない -->
// グラフ
<div>
// 月次推移
<Bar ... />
</div>
Svelteのテンプレート部分はHTMLの一種なので、コメントはHTMLコメント(<!-- -->)で書く必要があります。
<!-- ✅ HTMLコメントを使う -->
<!-- グラフ -->
<div>
<!-- 月次推移 -->
<Bar ... />
</div>
<script> の中とテンプレートの中とでコメント構文が違う、という基本的なところですが、既存のグラフ実装をコピーする際にうっかり混同してしまいました。
まとめ
| ポイント | 内容 |
|---|---|
| グラフの再利用 | 既存の月次推移グラフとほぼ同じ構造で、データソースだけ差し替えれば作れる |
| テンプレート内のコメント | <script> 外では // ではなく <!-- --> を使う |