※ご注意 本記事は、Zennで公開している記事『【React】Vite + React + Bootstrap 5で構築する！モダンなスマホ向けWebアプリの土台作り』の転載・要約コンテンツです。
こんにちは！今回は、JavaScriptやReactの基本を学んだエンジニアが、次に直面する「スマホで手軽に使える実用的なWebプロダクト」をゼロから作り上げるための第一歩として、超高速な開発環境の構築とレスポンシブ対応のポイントを解説します。
個人開発で「サクッと動くモダンなアプリを作りたい！」という方にぴったりの技術スタック（Vite + React + Bootstrap 5）を使った土台作りの手順を見ていきましょう。
1. 今回構築するアプリの全体像とゴール
スマホでの操作性を第一に考えた、以下のようなマルチページ構成のWebアプリの土台を作ります。
-
ログイン画面 (
/login) -
ダッシュボード・履歴一覧画面 (
/) -
新規作成画面 (
/divination/new) -
詳細・チャット画面 (
/divination/:id) -
設定画面 (
/settings/prompts)
2. 開発に必要なツールのインストール
まずは、パソコン上でアプリを動かしコードを書くための必須ツールを準備します。
-
Node.js (LTS推奨版): JavaScriptを動かすための基本ソフト。公式サイトからLTS版をダウンロードしてインストールします。
-
VS Code (Visual Studio Code): 高機能な無料コードエディタ。
3. Vite を使った超高速 React プロジェクトの作成
プロジェクトの作成には、動作が非常に高速なビルドツール Vite（ヴィート） を使用します。
VS Codeのターミナルを開き、以下のコマンドを実行します。
Bash
npm create vite@latest ai-fortune-app -- --template react
作成されたフォルダに移動し、必要なパッケージをインストールします。
Bash
cd ai-fortune-app
npm install
4. Bootstrap 5 の導入とスマホ対応設定
アプリの見た目を手軽におしゃれにし、スマホ画面にも自動で対応させるために Bootstrap 5を導入します。
① Bootstrap のインストール
ターミナルで以下のコマンドを実行します。
Bash
npm install bootstrap react-bootstrap
② アプリ全体への適用
src/main.jsx を開き、Bootstrapのスタイルを読み込みます。
JavaScript
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import 'bootstrap/dist/css/bootstrap.min.css' // Bootstrapのスタイルを読み込み
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
③ スマホ対応のための Viewport 設定（重要）
スマホの画面サイズで拡大・縮小が崩れないよう、index.html の <head> 内にある <meta> タグを確認・設定します。
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
この設定により、モバイル端末で閲覧した際にレイアウトが意図せずズレるのを防ぐことができます。
5. 動作確認
初期コード（src/App.jsx）を以下のように書き換えて、開発サーバーを起動してみましょう。
JavaScript
import React from 'react'
export default function App() {
return (
<div className="container py-4 text-center">
<h1 className="h3 mb-3 text-primary">Webアプリ</h1>
<p className="text-muted">開発環境の立ち上げに成功しました！</p>
<button className="btn btn-primary" onClick={() => alert('動作確認OK!')}>
タップして動作テスト
</button>
</div>
)
}
開発サーバーを起動します。
Bash
npm run dev
表示されたURL（http://localhost:5173/ 等）にアクセスし、画面が無事に表示されれば土台作りは完了です。
まとめ
今回は、Viteによる高速なプロジェクト立ち上げから、Bootstrap 5の導入、スマホ表示に欠かせないViewportの設定までを解説しました。
💡 さらに詳しく学びたい方へ
この記事は、KindleおよびZennにて販売中の電子書籍『ゼロから作る！React×Firebase AI占いアプリ開発講座』の第1章から一部抜粋して再編集したものです。
全体の設計や実践的なコード一式は、各書籍ページよりご覧いただけます。
-
Zenn本 『ゼロから作る！React×Firebase AI占いアプリ開発講座』
- Zenn上でブラウザからサクサク読み進めたい方はこちら
-
Kindle版 『ゼロから作る！React×Firebase AI占いアプリ開発講座』（Amazon）
- Kindleアプリや端末でオフライン読書・ハイライト管理したい方はこちら
書籍版の限定コンテンツ:
- アプリ全体の完全ソースコード（GitHubリポジトリ）
- エラーハンドリングと環境構築の徹底解説