React vs JavaScript 開発手法の違いメリット・デメリット

しおり

「発表時間 – 計算機」ページを作る場合

大まかな構成は以下です：

タブ UI → shadcn/ui の Tabs を利用
スライダー → shadcn/ui の Slider
テキストエリア → shadcn/ui の Textarea
計算処理
- 入力テキストから文字数・単語数を取得
- 平均話速 (例: 200wpm) を基準に計算
- スライダーで速度係数 (0.6x〜1.4x) を掛ける
出力 → 下部に「発表時間（xx分xx秒）」を表示

React + Vite は静的ビルド物を配るだけなので、Xserver などのレンタルサーバーでも問題なく動きます。必要なのは npm run build → dist/ をアップロード → SPA向け .htaccess リライトだけ。

小規模・単機能なら HTML/CSS/JavaScript(素のJS) が最速・最軽量。
拡張予定（ページ遷移、状態管理、再利用UI、国際化、テスト、長期保守）があるなら React + Vite。

項目	React + Vite	HTML/CSS/JS(素のJS)
初期表示パフォーマンス	ランタイム分だけ重い（数十KB＋UIライブラリ）	最軽量（必要なJSだけ）
実装スピード（小規模）	設定/ビルドが必要	そのまま書いて置くだけ
保守性/再利用性（中〜大規模）	コンポーネント化・状態管理で強い	素のDOM管理は規模増で破綻しやすい
ルーティング	SPA設定(.htaccess/HashRouter)が必要	そもそも不要（PHP側でページ分けも可）
依存/ビルド	Node環境でビルド→静的配信	ビルド不要（Tailwind等使うなら別）
型とテスト	TS/RTL等で整備しやすい	可能だが手動で構成する必要あり
SEO	SPAは工夫が必要（SSG/SSR）	静的HTMLはそのまま強い
学習・チーム標準化	習熟あれば開発効率◎	JS設計力に左右されやすい

現在要件（1ページ、入力→計算→表示）：素のJSで十分。軽く、速く、PHPテンプレにも直挿し可。
将来：「複数画面」「履歴/保存」「ユーザー認証」「i18n」「UIコンポーネント増」「テスト必須」などが来るなら最初から React + Vite が無難。

どちらも静的ファイルをアップロードでOK。
Reactは npm run build → dist/ を public_html 配下へ。SPA直叩き対策に .htaccess が必要。
素のJSは .html/.js/.css をそのまま置くだけ（ルーティング設定不要）。