Reactいいねボタンチュートリアルを最新のVite環境に対応しました。

[suin]

対象者

• 📖 読者

Problem

「Reactでいいねボタンを作ろう」チュートリアルが最新のVite環境で正しく動作しなくなっていました。

• create-vite@9.0.4 で react-swc-ts テンプレートが廃止され、コマンドがサイレントに vanilla-ts にフォールバックしていました
• 生成されるディレクトリ構成がチュートリアルの記載と一致しなくなっていました
• Viteのメジャーバージョンが v7 → v8 に更新され、バージョン表記が古くなっていました
• 新テンプレートのデフォルトCSS（ダークモード対応・複雑なレイアウト）の影響で、チュートリアル通りに進めるとレイアウトが崩れていました
• スクリーンショットが旧デザインのままでした

Solution

• テンプレート名を react-swc-ts → react-ts に変更しました
• ディレクトリ構成図を新テンプレートの出力に合わせて更新しました
• Viteバージョン表記を v8.0.8 に更新しました
• デフォルトCSSの影響を受けないよう、main.tsx から index.css のimportを削除し、App.css を最小限の中央配置スタイルに書き換える手順を追加しました
• スクリーンショット（screen1〜4）を新環境の表示に差し替えました
• regression testコメント内のバージョン情報を更新しました

Value

読者が最新のVite 8 / React 19 環境でチュートリアルを最初から最後まで問題なく進められるようになります。

---

Close #1098

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
book	Ready	Preview, Comment	Apr 10, 2026 0:40am