蚊に刺され記録

TypeScript

React

CSS

Node.js

VSCode

蚊に刺されを記録してミッションやミニゲームをクリアしよう!

小林亜美

高村優姫

推しアイデア

蚊に刺された記録を続けると累計献血量が増えていきます。刺されたストレスをミニゲームで発散できます。

作った背景

蚊に刺されはストレスになるため、蚊に刺された思い出を楽しみながら記録するユニークなアプリを目指しました。

推し技術

雑学開放と蚊に刺されが治ったときに紙吹雪が舞うようにしました。

プロジェクト詳細

1.アプリケーションの概要

・新しい記録を追加蚊から刺された場所を選択、大きさを記入、かゆみレベルを選択

・総刺され数、治った回数、献血量を表示

・初回を除き、3回記録するごとに雑学が解放される

・刺され履歴では治ったことも記録することができる

2.動作内容

ユーザーは、蚊に刺された部位・大きさ(mm)・かゆみレベルをフォームに入力し、「記録する」ボタンを押すことで、日々の「刺され記録」を簡単に追加できます。

記録されたデータはホーム画面の「刺され履歴」に一覧で表示されます。各履歴には、刺された部位や日付などの詳細がカード形式で表示され、まだ治っていないものには「治った!」ボタンが表示されます。このボタンを押すことで、その記録を「治癒済み」として更新でき、ホーム画面上部の「治った刺され」カウントにも反映されます。

また、記録を重ねることで、ユーザーは様々な体験を得られます。

雑学の解放: 記録が3回に達するごとに、蚊に関する新しい豆知識(トリビア)が自動で解放され、ユーザーの知的好奇心を満たします。

ミッション達成: 「ミッション」ページでは、「合計10回刺される」や「腕に5回刺される」といった目標が設定されています。記録データと連動して達成度が自動で更新され、ゲーム感覚で楽しめます。

ミニゲーム: 「ミニゲーム」ページでは、腕を守りながら飛んでくる蚊をカーソルで撃退するシンプルなゲームをプレイできます。

3.技術構成

フロントエンド: React プログラミング言語: TypeScript / JavaScript スタイリング: CSS データ保存: localStorage

4.AI活用箇所

・Geminiでの案出し ・Cursorでコード記載

小林亜美

@20650de6081e0899