有休ってすぐ使い切ってしまいますよね。
あと何日残っているかをいつも忘れてしまうのでスマホからすぐわかるようにGeminiに頼って残日数がすぐにわかるページを作成しました。

プロンプト

欲しいものは頭の中でできているので、要望を端的にマークダウンでまとめて伝えます。

有休の残日数を計算できる簡単なページを作りたい

# 環境、言語
- Windows
- iPhoneからの操作がメイン
- githubのURLから操作したいのでHTML,CSS,JavaSctiptで作成したい

# 必要項目
## 入力値
- YYYYMMでプルダウンから有休付与月を指定してから付与有休数を入力
- YYYYMMでプルダウンから有休使用月を指定してから利用有休数を入力

## 出力値
- 最新月時点での残りの有休数

# その他
- 色は`#a0a0de`、`#dda0dd`、`#dea0a0` のアナロガス配色
- スマホからパッと操作したいのでシンプルに
- スネーク記法でのコーディングで命名も可読性が高い簡単な英単語を使用

配色はWEB色見本から選びました。

配色パターンから好きな色を探して、好きな配色を選びます。
私はplum（#dda0dd）と、アナロガス配色を選びました。

アナロガス配色という言葉は生まれて初めて使いました。直感です。

修正指示

上記のプロンプトからできたのは、HTMLファイル内にすべてがまとまった内容。

VSCodeでindex.html、style.css、sctipt.jsの3ファイルを同ディレクトリ内に用意していたのと、今後の改修も考えると1ファイルは不便なので3ファイルに分けてもらいました。

生成されたコードを貼り付けて実際に動かしながら、気になる箇所をピックアップ。

付与月は頻出するものではなく年1回なのに、前後12カ月分が選択できるようになっていたの邪魔だし不要。
使用月も同じく前後12カ月分なので、邪魔なのですっきりさせます。

ロジック面も指示。

履歴がすべて表示されて邪魔なので見た目も整えます。

完成～！！！

自分でササっと使いたいだけなのでGithubにあげてURLを発行しました。

所要時間は30分ほどで欲しいものができたので満足です。
ありがとうGemini。

自分がやりたいことを端的にまとめることと、修正指示をしっかり行うとAIって最強ですね。
完全にコピペ職人だったので、有休を使って平日休んだ時にでもしっかりとコードを理解してみます。

スマホからも操作してみて問題なかったです。
ホーム画面に追加したときのアイコンがダサいので、またその辺も育てていきたいです。