✅はじめに
こんにちは！このシリーズでは、React + Vite + TypeScript + MUIという現代的な技術スタックを使って、Webアプリを開発する方法をステップバイステップで解説していきます。
第1回となる今回は、開発環境の構築と初期プロジェクトの作成、そしてMUIを使った簡単なUI表示までを行います。
📦使用する技術スタック
| ツール | バージョン | 説明 |
|---|---|---|
| React | 19.1.0 | フロントエンドJavaScriptライブラリ |
| Vite | 6.3.5 | 爆速な開発環境を提供するビルドツール |
| TypeScript | 5.8.3 | 型安全なJavaScriptのスーパーセット |
| MUI | 7.1.0 | Googleのマテリアルデザインに基づいたUIライブラリ |
🛠1.必要なツールの準備
以下がインストールされていることを確認してください。
- Node.js（最新版）
- 任意のエディタ（例：Visual Studio Code）
🚀2.プロジェクトの作成
以下のコマンドをターミナルで実行して、Vite + React + TypeScript のプロジェクトを作成します。
npm create vite@latest my-react-app -- --template react-ts cd my-react-app npm install
🎨3.MUIのインストール
次に、MUIのライブラリとRobotoフォントをインストールします。
npm install @mui/material @emotion/react @emotion/styled npm install @fontsource/roboto
🧹4.index.cssを空にする
Vite のテンプレートには、初期状態でスタイルが含まれています。このスタイルは MUI のレイアウトに干渉するため、src/index.css の中身をすべて削除（もしくはコメントアウト）してください。
🧑💻5.main.tsxの編集
Robotoフォントを適用するために、src/main.tsxを以下のように編集します：
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
// Robotoフォントのインポート
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)
👨💻6.App.tsxの作成
次に、src/App.tsxを以下のように書き換えて、MUIのコンポーネントとRobotoフォントを使用したUIを作成します：
import { useState } from 'react'
import { Button, Container, Typography, ThemeProvider, createTheme, Box } from '@mui/material'
type CounterProps = {
initialCount?: number;
};
// カスタムテーマを作成
const theme = createTheme({
typography: {
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
},
});
function App({ initialCount = 0 }: CounterProps) {
const [count, setCount] = useState(initialCount)
return (
<ThemeProvider theme={theme}>
<Container maxWidth="sm" sx={{ textAlign: 'center', mt: 5 }}>
<Typography variant="h4" gutterBottom>
React + Vite + MUI スターター
</Typography>
<Typography variant="body1" gutterBottom>
カウント: {count}
</Typography>
<Button variant="contained" onClick={() => setCount(count + 1)}>
カウントを増やす
</Button>
{/* フォントの比較表示 */}
<Box sx={{ mt: 4, display: 'flex', flexDirection: 'column', gap: 2 }}>
<Typography variant="h6">
フォントの比較
</Typography>
<Typography sx={{ fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif' }}>
これはRobotoフォントです (The quick brown fox jumps over the lazy dog)
</Typography>
<Typography sx={{ fontFamily: 'system-ui, -apple-system, sans-serif' }}>
これはシステムフォントです (The quick brown fox jumps over the lazy dog)
</Typography>
</Box>
</Container>
</ThemeProvider>
)
}
export default App
✨主な変更点と改善点
- Robotoフォントの追加: MUIのデフォルトフォントであるRobotoを正しく実装
- ThemeProviderの導入: フォントファミリーを明示的に設定し、一貫したデザインを実現
- TypeScriptの活用:
CounterPropsインターフェースを定義し、型安全性を確保 - フォント比較機能: Robotoフォントとシステムフォントの違いを視覚的に確認可能
✅表示確認
以下のコマンドで開発サーバーを起動しましょう。
npm run dev
ブラウザでhttp://localhost:5173を開くと、以下の要素が確認できます：
- Robotoフォントを使用したヘッダーテキスト
- カウンター機能付きのボタン
- フォントの違いを確認できる比較セクション
🔚まとめ
これで、React + Vite + TypeScript + MUI の環境が整い、Robotoフォントも正しく実装されました！
📌次回予告
次回は、この環境を使って複数ページを作成する方法（React Router）を紹介します。お楽しみに！
