Reactのファースト・ステップ２のバックアップ(No.18)

「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

戻る
- React -> Redux
- ...Reactの5thステップ
- Reactのファースト・ステップ２
- Reactのセカンド・ステップ２
- Reactのサード・ステップ２

目次 †

概要 †

2026年、リブート（Vite + React + TypeScript + Tailwind）。

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

※ 生成AIのサポートを受けつつ実施

↑

詳細 †

↑

新規 †

最初の一行だけで実行まで行ける。
「press h + enter to show help」も実行

PS > npm create vite@latest my-app -- --template react-ts
Need to install the following packages:
create-vite@9.0.3
Ok to proceed? (y) y


> npx
> create-vite my-app --template react-ts

│
◇  Install with npm and start now?
│  Yes
│
◇  Scaffolding project in D:\temp\my-app...
│
◇  Installing dependencies with npm...

added 172 packages, and audited 173 packages in 25s

49 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
│
◇  Starting dev server...

> my-app@0.0.0 dev
> vite


  VITE v8.0.2  ready in 940 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
h

  Shortcuts
  press r + enter to restart the server
  press u + enter to show server url
  press o + enter to open in browser
  press c + enter to clear console
  press q + enter to quit

↑

以降 †

↑

編集を開始 †

コマンドで
```
cd my-app
```

VSCで
my-appフォルダを開き編集できる

↑

パッケージをインストール †

新規のインストール
```
 npm install xxxx
```

package.jsonから。
```
npm install
```

↑

サーバーを起動 †

npm run dev

↑

もしくは... †

外部からのアクセスを可能にする。

npm run dev -- --host

↑

デバッグ †

VSCでデバッグ設定を行ってRuntimeに接続する。

VSCodeで Run and Debug (Ctrl+Shift+D / Cmd+Shift+D) を開く

上部のドロップダウンで Debug Vite App (Chrome) を選択

.vscode/launch.json が生成されるので、URL（ポート番号）を修正する。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "localhost に対して Chrome を起動する",
            "url": "http://localhost:5173/",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

VSCode上の .tsx / .ts ファイルにブレークポイントを設定

「▶」再生ボタンまたは F5 でChromeを起動し、デバッグ接続

↑

Vite †

フロントエンドの開発を面倒な設定なしでTypeScript, JSX, CSSなどをすぐに使い始められるツール

↑

プラグインシステム †

ほとんどの追加機能（フレームワーク対応、カスタム変換、開発サーバーの拡張など）をプラグインで実現

Webpack?時代に比べてプラグインの作成・共有が簡単で、開発者体験（DX）が非常に良い。
フレームワーク（Vue、React、Svelte、Solidなど）もViteプラグインとして統合される。
プロジェクト作成時にスキャフォールディングで vite.config.js が生成・編集される。
以降は、ほとんどの場合、自分で vite.config.js を直接編集する。

↑

開発サーバー †

esbuildを活用した高速トランスパイルで起動が速い

本番ビルドはRollup（現在はRolldownに移行傾向）で最適化
- Rollup：2015年頃にリリースされたバンドラ
- Rolldown：Rust製の次世代バンドラ

「開発は速く、本番も高品質」というバランスが取れる。

↑

HMR †

HMR (Hot Module Replacement)
ファイルを編集した時に効率よくブラウザに反映

↑

最適化 †

Rollup/Rolldownに、バンドル、コード分割、minifyなどが同梱される（一部プラグイン）。

↑

Tailwind †

↑

インストール †

npm install tailwindcss
npm install @tailwindcss/forms

↑

設定 †

index.css や globals.css などに追記

css@import "tailwindcss";
@plugin "@tailwindcss/forms";

↑

導入 †

AI活用（https://claude.ai/chat）で、殆どWebを参照せず、作業を進めることが出来た（Sonnet4.6）。

↑

ツール類の導入手順 †

ココまでの導入手順もAIに生成させている。

↑

レイアウト変更 †

以下はプロンプト

以下で生成したコードを修正して3分割のヘッダ、左メニュー、メインエリアの画面を作成したい。
なお、左メニューのリンクを押下するとメインエリアが画面遷移するものとする。

npm create vite@latest my-app -- --template react-ts

修正内容を教えてください。

以下は、出力から修正ポイントを抜粋したもの。

↑

npm install †

npm install react-router-dom

↑

App.tsx、App.css †

src/App.tsx、App.css

App.tsx

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Header from './components/Header'
import Sidebar from './components/Sidebar'
import Home from './pages/Home'
import About from './pages/About'
import Settings from './pages/Settings'
import './App.css'

function App() {
  return (
    <BrowserRouter>
      <div className="app-container">
        <Header />
        <div className="body-container">
          <Sidebar />
          <main className="main-area">
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/about" element={<About />} />
              <Route path="/settings" element={<Settings />} />
            </Routes>
          </main>
        </div>
      </div>
    </BrowserRouter>
  )
}

export default App

App.css

/* src/App.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ヘッダー */
header {
  height: 60px;
  background-color: #1e293b;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 24px;
  font-size: 1.2rem;
  font-weight: bold;
  flex-shrink: 0;
}

/* ヘッダー下の横並びエリア */
.body-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 左メニュー */
nav.sidebar {
  width: 220px;
  background-color: #f1f5f9;
  border-right: 1px solid #e2e8f0;
  padding: 16px 0;
  flex-shrink: 0;
  overflow-y: auto;
}

nav.sidebar a {
  display: block;
  padding: 12px 24px;
  text-decoration: none;
  color: #334155;
  font-size: 0.95rem;
  transition: background 0.2s;
}

nav.sidebar a:hover,
nav.sidebar a.active {
  background-color: #e0e7ef;
  color: #1e40af;
  font-weight: 600;
}

/* メインエリア */
.main-area {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
  background-color: #ffffff;
}

↑

Header、Sidebar.tsx †

src/components/Header、Sidebar.tsx

Header.tsx

export default function Header() {
  return <header>My App</header>
}

Sidebar.tsx

import { NavLink } from 'react-router-dom'

export default function Sidebar() {
  return (
    <nav className="sidebar">
      <NavLink to="/" end className={({ isActive }) => isActive ? 'active' : ''}>
        Home
      </NavLink>
      <NavLink to="/about" className={({ isActive }) => isActive ? 'active' : ''}>
        About
      </NavLink>
      <NavLink to="/settings" className={({ isActive }) => isActive ? 'active' : ''}>
        Settings
      </NavLink>
    </nav>
  )
}

↑

Home、About、Settings.tsx †

src/pages/Home、About、Settings.tsx

Home.tsx

export default function Home() {
  return <div><h1>ホーム</h1><p>ホームページです。</p></div>
}

About.tsx

export default function About() {
  return <div><h1>アバウト</h1><p>アバウトページです。</p></div>
}

Settings.tsx

export default function Settings() {
  return <div><h1>設定</h1><p>設定ページです。</p></div>
}

↑

既存の載替 †

↑

ライブラリ系JS †

移行元（react_template）

移行先（vite-react-ts）

↑

Counter画面 †

Counter.jsコンポーネントをTSXに変換
App.tsx、Sidebar.tsxに組み込む。

↑

FetchData?画面 †

FetchData?.jsコンポーネントをTSXに変換
App.tsx、Sidebar.tsxに組み込む。
WebAPI呼び出しを行って実行をテスト。

修正
- WebAPI（SampleDataController?.cs‎）をRST上に復元
- FetchData?の処理をページング対応させた。

↑

CrudSample?画面 †

CrudSample?.jsコンポーネントをTSXに変換
App.tsx、Sidebar.tsxに組み込む。
WebAPI呼び出しを行って実行をテスト。

↑

認証コード実装 †

SignIn?、RedirectOfAuth?.jsコンポーネントをTSXに変換
Header.tsxにSignIn?を組み込む。
App.tsxにRedirectOfAuth?を組み込む。
認証テストを実行し、デバッガでデバッグ、修正して完了。

↑

CrudSample2画面 †

CrudSample?画面をコンポーネント分割した版。
Input、DDL、Button、Output.tsxをコンポーネント化

↑

リファクタリング †

↑

fetch †

fetchとはWebAPI呼び出し処理のこと。

AIに共通関数を提案させ、
ソレを使用するように書き直した。
拡張はコールバックにて行う。

↑

CSS †

デザインをTailwind 拡張にするように修正。

全体的に編集中のコードの提示では上手く行かなことが多かった。
ChromeのF12で「Application」の「Element」や「*.css」の情報をプロンプトに入れると良い。

↑

参考 †

Vite ってよく聞くけど何なんですか？あれは
https://zenn.dev/comm_vue_nuxt/articles/what-is-vite

FrontendTemplates?/UI/SPA/React at develop · OpenTouryoProject?/FrontendTemplates?
https://github.com/OpenTouryoProject/FrontendTemplates/tree/develop/UI/SPA/React

Reactのファースト・ステップ２ のバックアップ(No.18)