🔍

「チーバくんのどこ？」がすぐわかるアプリを作りました

に公開
React
TypeScript
Tailwind CSS
Vite
Cursor
idea

デプロイしたWebアプリ

  1. 検索欄に千葉県の市町村を入力します
  2. 市町村をリストから選択します
  3. チーバくんのどのあたりにあるかわかります

工夫点

  • テキスト入力中（ひらがな）に自動的に市町村が絞り込まれます
  • 「チーバくん」や「市町村名」はリンク（太字部分）になっており、クリックすると飛べます
  • レスポンシブデザインを意識しました（最低限、スマホだと見にくい）

バージョン履歴

ver 0.1

  • プロトタイプをデプロイしました

TODO

  • 選択した市町村に色をつけて表示する
    • 現在は画像表示しているだけ
  • 若干UIずれてるのが気になるので直したい
  • スマホでも画像を見やすくデザインしたい
  • 「チーバくんのどのあたり？」の情報は完全な独断なので、調査して内容を更新したい

動機

  • 千葉県を紹介する時に使うため
  • 千葉県民の間で「チーバくんのどのあたり？」がたびたび話題になるため
  • Cursorを使って、AI駆動のプロト開発をしたかったから

技術スタック

  • Cursor 0.49.6（Free）
  • Vite 6.3.5
  • React 19.1.0
  • TypeScript 5.8.3
  • Tailwind CSS 4.1.8

環境構築

以下の記事同様

Cursorの使用状況

144 events

  • 144回プロンプトを打ち込んだ
  • コードは全部AIに書かせて、自分ではほぼ手を加えていない
  • 最初から全部機能詰め込もうとしたら全然動かなくて、時間（回数）がかかってしまった
    • 最低限の骨組みだけで動くもの作ってから、機能追加していった方が効率良い？

感想

  • どう考えても便利すぎる
  • 対象ファイル「＠」から簡単に選べて、編集してくれる
  • 赤線が出てるところを「Fix in Chat」すればエラーもすぐに直せる
  • 画像も入力できて使い勝手良し
  • Freeプランでもプロト開発程度ならアプリ1つ作ることができた
  • 千葉県の市町村全然知らなかったけど、これ作ったおかげで少し覚えられた

Discussion