今回作ったのは、
「時間が経つとお腹が空く猫」を育てるシンプルなWebアプリです。
ボタンを押してごはんをあげると回復し、
空腹度によって猫の表情が変わります。
このアプリでできること
- 時間経過で猫のおなかゲージが減る
- ボタンを押すと餌をあげられる
- ゲージ量によって猫の表情が変化する
- リアルタイムで画面が更新される
技術的に学べること
① ボタン操作（イベント処理）
feedButton.addEventListener(...)「クリックしたら動く」という
Webアプリの基本を学べます。
例：
- ボタン操作
- フォーム送信
- メニュー切り替え
など、ほとんどのUI操作の基礎になります。
② 状態管理
let hunger = 100;アプリの現在状態を管理しています。
今回なら：
- 空腹度
- 猫の状態
- 表情
などを数字で管理。
実はこれは、
- ゲーム
- Todoアプリ
- 家計簿
- 在庫管理
など、ほぼ全てのアプリの基礎です。
③ 時間処理
setInterval(...)一定時間ごとに処理を実行します。
今回は：
- 時間経過でお腹が減る
を実装。
この仕組みは、
- タイマー
- ゲーム
- 通知
- リアルタイム更新
などにも使われます。
④ 画面の動的更新
textContent
style.widthJavaScriptでHTMLを書き換えています。
これによって、
ただの「表示だけのWebページ」から、
“動くWebアプリ”
になります。
⑤ 条件分岐
if (hunger > 70)状態によって表示を変えています。
例えば：
- 元気
- 普通
- 空腹
で猫の表情を変更。
この考え方はゲームでも重要で、
- HPゲージ
- スタミナ
- 経験値
- ライフ
なども基本的に同じ構造です。
一言で説明すると？
少し技術っぽく言うなら
JavaScriptで、「時間経過による状態変化」と「ボタン操作による回復処理」を実装した、シンプルな猫育成Webアプリです。
初心者向けに言うなら
時間が経つとお腹が空く猫を育てる、初心者向けのゲージ管理アプリを作りました。
まとめ
見た目はシンプルでも、
- 状態管理
- 時間処理
- 画面更新
- 条件分岐
など、Webアプリ開発の基礎がかなり詰まっていました。
コメント