アプリを作る

サイトが「見せるもの」なら、アプリは「動くもの」です。ユーザーが入力し、それが保存され、再び開いても残っていて初めて本物のアプリです。

Web 技術でアプリを作ります。インストーラ不要で、作ったものをスマホのホームに追加すれば普通のアプリのように使えます(PWA)。アプリストアの審査も不要です。

nodejs.org で「LTS」版を入れ、VS Code のターミナルで下を確認します。

$node -v
$npm -v

v20.18.0
10.8.2

VS Code を入れた後、拡張機能で「Claude Code」を入れ、Sign in でサブスクを連携します。

下で土台を作ります。TypeScript・Tailwind・App Router は全部 Yes 推奨。

$npx create-next-app@latest my-app

✔ TypeScript … Yes
✔ Tailwind CSS … Yes
✔ App Router … Yes
Success! Created my-app

フォルダに入り開発サーバを起動。「http://localhost:3000」をブラウザで開きます。この画面は開いておきます。

$cd my-app
$npm run dev

▲ Next.js 15
- Local: http://localhost:3000
✓ Ready in 1.4s

Claude に動作を具体的に説明します。例:「app/page.tsx を『ToDo アプリ』にして。上に入力欄と追加ボタン、追加すると下の一覧に出て、各項目に完了チェックと削除ボタン。完了したものはグレーの取り消し線で。」

ブラウザで実際に押して「完了は一番下へ移動」「件数表示を追加」と直します。アプリは『押して直す』反復が特に大事です。

今は更新すると内容が消えることがあります。Claude に「入力した ToDo をブラウザに保存(localStorage)して、再び開いても残るように」と頼むと本物のアプリらしくなります。

続けて「このアプリをスマホのホームに入れられる PWA にして。アプリのアイコンと名前も設定して」と頼めば、スマホのブラウザで『ホーム画面に追加』からアプリのように入ります。

ウェブサイトのトラックと同じです。下で Vercel に上げると実アドレスができ、それをスマホで開いてインストールできます。

$npm i -g vercel
$vercel

Vercel CLI
✅ Production: https://my-app.vercel.app

おめでとうございます。入力・保存・インストールできる本物のアプリを作りました。

次はログイン、通知、ダークモード、複数端末同期まで同じ方法で広げられます。キャリアアーケードでチームを組み、より大きなアプリに挑戦しましょう。