<h1 id="%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%97%E3%81%9Fweb%E3%82%A2%E3%83%97%E3%83%AA" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%97%E3%81%9Fweb%E3%82%A2%E3%83%97%E3%83%AA" aria-hidden="true"></a> デプロイしたWebアプリ</h1>
<ul data-line="1" class="code-line">
<li data-line="1" class="code-line">
<a href="https://chibakun-doko.vercel.app/" target="_blank" rel="nofollow noopener noreferrer">chibakun-doko</a>（開発中）</li>
</ul>
<ol data-line="3" class="code-line">
<li data-line="3" class="code-line">検索欄に千葉県の市町村を入力します</li>
<li data-line="4" class="code-line">市町村をリストから選択します</li>
<li data-line="5" class="code-line">チーバくんのどのあたりにあるかわかります</li>
</ol>
<p data-line="7" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/d0914ee3e6f3-20250604.png" loading="lazy" class="md-img"></p>
<p data-line="9" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/525fa131d90e-20250604.png" loading="lazy" class="md-img"></p>
<p data-line="11" class="code-line"><strong>工夫点</strong></p>
<ul data-line="12" class="code-line">
<li data-line="12" class="code-line">テキスト入力中（ひらがな）に自動的に市町村が絞り込まれます</li>
<li data-line="13" class="code-line">「チーバくん」や「市町村名」はリンク（太字部分）になっており、クリックすると飛べます</li>
<li data-line="14" class="code-line">レスポンシブデザインを意識しました（最低限、スマホだと見にくい）</li>
</ul>
<h2 id="%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E5%B1%A5%E6%AD%B4" data-line="16" class="code-line">
<a class="header-anchor-link" href="#%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E5%B1%A5%E6%AD%B4" aria-hidden="true"></a> バージョン履歴</h2>
<p data-line="17" class="code-line"><strong>ver 0.1</strong></p>
<ul data-line="18" class="code-line">
<li data-line="18" class="code-line">プロトタイプをデプロイしました</li>
</ul>
<h2 id="todo" data-line="20" class="code-line">
<a class="header-anchor-link" href="#todo" aria-hidden="true"></a> TODO</h2>
<ul data-line="21" class="code-line">
<li data-line="21" class="code-line">選択した市町村に色をつけて表示する
<ul data-line="22" class="code-line">
<li data-line="22" class="code-line">現在は画像表示しているだけ</li>
</ul>
</li>
<li data-line="23" class="code-line">若干UIずれてるのが気になるので直したい</li>
<li data-line="24" class="code-line">スマホでも画像を見やすくデザインしたい</li>
<li data-line="25" class="code-line">「チーバくんのどのあたり？」の情報は完全な独断なので、調査して内容を更新したい</li>
</ul>
<h1 id="%E5%8B%95%E6%A9%9F" data-line="27" class="code-line">
<a class="header-anchor-link" href="#%E5%8B%95%E6%A9%9F" aria-hidden="true"></a> 動機</h1>
<ul data-line="28" class="code-line">
<li data-line="28" class="code-line">千葉県を紹介する時に使うため</li>
<li data-line="29" class="code-line">千葉県民の間で「チーバくんのどのあたり？」がたびたび話題になるため</li>
<li data-line="30" class="code-line">Cursorを使って、AI駆動のプロト開発をしたかったから</li>
</ul>
<h1 id="%E6%8A%80%E8%A1%93%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF" data-line="32" class="code-line">
<a class="header-anchor-link" href="#%E6%8A%80%E8%A1%93%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF" aria-hidden="true"></a> 技術スタック</h1>
<ul data-line="33" class="code-line">
<li data-line="33" class="code-line">Cursor 0.49.6（Free）</li>
<li data-line="34" class="code-line">Vite 6.3.5</li>
<li data-line="35" class="code-line">React 19.1.0</li>
<li data-line="36" class="code-line">TypeScript 5.8.3</li>
<li data-line="37" class="code-line">Tailwind CSS 4.1.8</li>
</ul>
<h1 id="%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89" data-line="39" class="code-line">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89" aria-hidden="true"></a> 環境構築</h1>
<p data-line="40" class="code-line">以下の記事同様</p>
<ul data-line="41" class="code-line">
<li data-line="41" class="code-line"><a href="https://zenn.dev/btforest/articles/769754f18af714" target="_blank">Viteを使ってMy日記帳アプリを作り、Vercelでデプロイしました（React+TypeScript+Tailwind CSS）</a></li>
</ul>
<h1 id="cursor%E3%81%AE%E4%BD%BF%E7%94%A8%E7%8A%B6%E6%B3%81" data-line="43" class="code-line">
<a class="header-anchor-link" href="#cursor%E3%81%AE%E4%BD%BF%E7%94%A8%E7%8A%B6%E6%B3%81" aria-hidden="true"></a> Cursorの使用状況</h1>
<p data-line="44" class="code-line">144 events</p>
<ul data-line="45" class="code-line">
<li data-line="45" class="code-line">144回プロンプトを打ち込んだ</li>
<li data-line="46" class="code-line">コードは全部AIに書かせて、自分ではほぼ手を加えていない</li>
<li data-line="47" class="code-line">最初から全部機能詰め込もうとしたら全然動かなくて、時間（回数）がかかってしまった
<ul data-line="48" class="code-line">
<li data-line="48" class="code-line">最低限の骨組みだけで動くもの作ってから、機能追加していった方が効率良い？<br>
<img src="https://storage.googleapis.com/zenn-user-upload/ad65ab374d01-20250604.png" loading="lazy" class="md-img">
</li>
</ul>
</li>
</ul>
<h1 id="%E6%84%9F%E6%83%B3" data-line="51" class="code-line">
<a class="header-anchor-link" href="#%E6%84%9F%E6%83%B3" aria-hidden="true"></a> 感想</h1>
<ul data-line="52" class="code-line">
<li data-line="52" class="code-line">どう考えても便利すぎる</li>
<li data-line="53" class="code-line">対象ファイル「＠」から簡単に選べて、編集してくれる</li>
<li data-line="54" class="code-line">赤線が出てるところを「Fix in Chat」すればエラーもすぐに直せる</li>
<li data-line="55" class="code-line">画像も入力できて使い勝手良し</li>
<li data-line="56" class="code-line">Freeプランでもプロト開発程度ならアプリ1つ作ることができた</li>
<li data-line="57" class="code-line">千葉県の市町村全然知らなかったけど、これ作ったおかげで少し覚えられた</li>
</ul>


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

react

Discussion