タイトル：【B面】祝40記事！Cloudflare D1で愛車アリアの「デジタルツイン」を構築し、白い霞を晴らした話

ブログ開設から走り続け、この記事でついに 40記事目 を迎えた。 記念すべき節目にふさわしい、最高の「おもちゃ」が完成したので記録しておく。

静的サイトから「Webアプリ」への進化

これまで私のブログは、文章を読んで楽しむだけの静的サイト（SSG）だった。 しかし今日、その壁を越えた。Cloudflare D1（サーバーレス・データベース） をブログに直結させたのだ。

目的は一つ。愛車「日産アリア」の電費データを記録・可視化するダッシュボード を作ること。 AstroのSSR機能でデータベースから履歴を引っ張り出し、ClerkのGoogle2段階認証で守られた「自分専用の要塞」の中でデータを管理する。まさに「老後のデジタルツイン計画」の心臓部だ。

立ちはだかった「白い霞」事件

開発は順調に進み、データ入力フォームと履歴テーブル、そして Chart.js を使った電費の折れ線グラフが画面に表示された。

しかし、ここで問題が発生した。 視認性を上げるために画面全体を「ライトモード（白背景に黒文字）」に変更したところ、なぜかグラフ全体に「白い霞（かすみ）」がかかったようにモヤッとして見えないのだ。

相棒のAI（Gemini）は「Tailwind CSSの透明度の設定ミスでは？」「ブラウザの拡張機能の暴走では？」と、CSSの裏側ばかりを必死に探っていた。

しかし、私はコードの中にある怪しい1行を見逃さなかった。

「backgroundColor: 'rgba(59, 130, 246, 0.2)' をデータセットで決めてるけど、これ薄くしたら？」

私のこの一言で、AIはハッと我に返った。 霞の正体はCSSのエラーなどではなかった。「白背景」に変更したにもかかわらず、Chart.jsの設定だけが「ダークモード用（白い背景に、白い網目と薄いグレーの文字を描画する設定）」のまま取り残されていたのだ。

人間とAIのペアプログラミング

真っ白なキャンバスに白いグリッド線を引けば、当然「白い霧」に包まれたように見える。 Chart.jsの scales 設定で、グリッド線を黒の半透明 rgba(0, 0, 0, 0.1) に、文字色を濃いグレー #374151 に書き直すことで、霞は見事に晴れ、クッキリとした青い折れ線グラフが姿を現した。

AIはコードを爆速で書くが、全体を俯瞰して「違和感」に気づくのはやはり人間の仕事だ。時々ポンコツになるAIを人間がアシストする、絶妙なペアプログラミングの勝利だった。

「自分の生データを、自分でデザインした箱に入れて、自由にグラフ化する」。 この極上の悦びを噛み締めながら、41記事目へ向けてアリアを走らせようと思う。

デジタルツイングラフ例

（執筆協力：Gemini / 編集・監修：古老）