shadcn/uiを導入して最初のボタンを表示する

この回では、あなたのNext.jsアプリに「shadcn/ui（＝見た目がきれいなボタンやフォーム部品の詰め合わせ）」を入れて、最初のボタンを画面に出すところまでを15分でやります。料理でいうと、野菜を一から刻むのではなく、下ごしらえ済みの素材パックを買ってきて盛り付けるイメージです。

• 前のレッスン（atom.web-builder.create-next-app）でNext.jsのプロジェクトが立ち上がっていて、ブラウザで http://localhost:3000 のページが表示できる状態
• ターミナル（＝黒い画面でコマンドを打つ道具）が開けて、プロジェクトのフォルダに移動できていること
• AIツール（Claude Code / Codex CLI / Cursor / ChatGPT）のどれか1つが手元で使えること

このレッスンはコピペで進められますが、後で自分のプロジェクトで応用できるよう、AIに依頼する流れも体験します。使うAIは何でも構いません。次のプロンプト例をそのまま貼ってください。

「Next.js 15のApp Routerプロジェクトにshadcn/uiを導入して、トップページに <Button>Hello</Button> を表示してください。非エンジニア向けに各手順の意味を1行ずつ添えてください。」

良い例: ゴール（ボタンを表示）と制約（Next.js 15・App Router・初心者向け説明）を両方書く。 悪い例: 「shadcnを入れて」だけ送る → AIは古いバージョンの手順を返すことがあります。

プロジェクトのフォルダで、次の1行をターミナルに貼り付けて実行します。これは「shadcn/uiのセットアップウィザードを起動する」コマンドです。

pnpm dlx shadcn@latest init

途中でいくつか質問されます。迷ったら次の通りに答えればOKです。

• スタイル: Default（標準の見た目）
• ベースカラー: Neutral（無難な灰色系）
• CSS変数を使うか: Yes

次の1行で、「ボタン」という部品1つだけをプロジェクトに取り込みます。

pnpm dlx shadcn@latest add button

実行後、components/ui/button.tsx というファイルが増えていれば成功です。AIに「このファイルは何をするものですか？」と聞いて、中身を日本語で説明してもらうと理解が深まります。

app/page.tsx を開いて、最上部に取り込み文を1行足し、画面表示部分にボタンを1つ置きます。Cursor や Claude Code を使っているなら「app/page.tsx を開いて、shadcnのButtonをインポートし、中央に『こんにちは』と書かれたボタンを1つ表示してください」と頼めば自動で書き換えてくれます。

1. ターミナルで pnpm dev が動いていることを確認する（止まっていたら再度実行）
2. ブラウザで http://localhost:3000 を開き直す
3. 画面に角丸のボタンが1つ表示されている
4. ボタンの上にマウスを乗せると、色が少し変わる（＝部品がちゃんと効いている証拠）

確認できたら、スクリーンショットを1枚撮って保存しておきましょう。後で「自分はここまでできた」と見返す材料になります。

• init を飛ばして add button を先に実行してしまう → 必ず init が先です。順番を間違えたら、一度AIに「shadcnのinitをやり直す方法」と聞いてください。
• Tailwind CSSが入っていない状態で始めてしまう → 前のレッスンのNext.js作成時に「Tailwindを使う: Yes」を選んでいれば問題ありません。違うなら、AIに「このプロジェクトにTailwindを追加してください」と頼んでやり直します。
• ボタンの色が真っ白で見えない → ダークモードの影響です。ページを一度リロードするか、AIに「背景色を薄いグレーにして」と依頼すれば直せます。
• pnpm が無いと言われる → npm install -g pnpm を1回実行するだけで入ります。意味は「pnpmという配送トラックを自分のパソコンに入れる」です。

• ブラウザにshadcn/uiのボタンが1つ表示されている
• components/ui/button.tsx が存在する
• スクリーンショットを1枚撮って保存した

ここまでできたら、この回は完了です。次は同じ方法でフォームやカードなど他の部品を追加していけます。