下記を参考に、Reactを使ったWebアプリの作り方を勉強をしています。
【2025年最新版】0からReactを勉強するならこのロードマップに従え！ #TypeScript - Qiita
プロジェクトを作成するたびに手順が分からなくなるので、よく見るページのリンク集を作ってみました。
どなたかの手助けになれますように。
プロジェクトを作成
Vite
【Vite + React + TypeScript】3分で使えるようになる入門ガイド（2026年版）
プロジェクトを作成
プロジェクトを生成
$ npm create vite@latest
yと答える
Need to install the following packages:
create-vite@9.0.4
Ok to proceed? (y) y
プロジェクト名を入力
◆ Project name: │ {プロジェクト名} └
フレームワーク（React）を選択
◆ Select a framework: │ ○ Vanilla │ ○ Vue │ ● React │ ○ Preact │ ○ Lit │ ○ Svelte │ ○ Solid │ ○ Qwik │ ○ Angular │ ○ Marko │ ○ Others └
言語（TypeScript）を選択
◆ Select a variant: │ ● TypeScript │ ○ TypeScript + React Compiler │ ○ JavaScript │ ○ JavaScript + React Compiler │ ○ RSC │ ○ React Router v7 ↗ https://reactrouter.com │ ○ TanStack Router ↗ https://tanstack.com/router │ ○ RedwoodSDK ↗ https://rwsdk.com │ ○ Vike ↗ https://vike.dev └
いったんNoを選択
◆ Install with npm and start now?
│ ○ Yes / ● No
└
プロジェクトのフォルダにいることを確認して、パッケージをインストール
$ npm install
一応カクニン
$ npm run dev
デフォルトのファイルを削除
srcフォルダ内のassetsフォルダ、index.cssを削除publicフォルダ内のfavicon.svg以外をすべて削除
データを初期化
App.tsx
import './App.css'; function App() { return ( <div> <h1>Hello World!</h1> </div> ); } export default App;
main.tsx
import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import App from './App.tsx' createRoot(document.getElementById('root')!).render( <StrictMode> <App /> </StrictMode> )
もう1度カクニン
# 入力 $ npm run dev # 出力 VITE v8.2.2 ready in 113 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help
サイトのデプロイ先
firebase
React（Vite）で作ったSPAを Firebase Hosting にデプロイする忘備録｜ぎーく・おたつきー
1st デプロイ
CLI（コマンドライン）をプロジェクトにインストール
$ npm install -g firebase-tools
firebaseのサイトでプロジェクトを作成
Webでつくる：
- https://console.firebase.google.com/
- 「プロジェクトを追加」
- 名前つけて次へ
※ Analytics の ON/OFF はどちらでもOK。 *持ってる人は Existing の Projectにつけといてもいいのでは。
あとで認証が必要になるので再ログインする
$ firebase login --reauth
firebaseのプロジェクトを連携
$ firebase init hosting
以下、質問に答える
✔ Are you ready to proceed?: `Yes` ✔ Please select an option: `Use an existing project` ✔ Select a default Firebase project for this directory: `{プロジェクトのディレクトリ}` ✔ What do you want to use as your public directory? `dist` ✔ Configure as a single-page app (rewrite all urls to /index.html)? `Yes` ✔ Set up automatic builds and deploys with GitHub? `No` ✔ Would you like to install agent skills for Firebase? `No`
プロジェクトのビルド
# 入力 $ npm run build # 出力 > {プロジェクト名}@0.0.0 build > tsc -b && vite build vite v8.2.2 building client environment for production... ✓ 16 modules transformed. computing gzip size... dist/index.html 0.46 kB │ gzip: 0.30 kB dist/assets/index-x1XGuNl0.css 0.00 kB │ gzip: 0.02 kB dist/assets/index-C_ADPMUg.js 190.42 kB │ gzip: 59.97 kB ✓ built in 162ms
やっとデプロイ
# 入力 $ firebase deploy # 出力 === Deploying to '{プロジェクト名}'... i deploying hosting i hosting[{プロジェクト名}]: beginning deploy... i hosting[{プロジェクト名}]: found 4 files in dist + hosting[{プロジェクト名}]: file upload complete i hosting[{プロジェクト名}]: finalizing version... + hosting[{プロジェクト名}]: version finalized i hosting[{プロジェクト名}]: releasing new version... + hosting[{プロジェクト名}]: release complete + Deploy complete! Project Console: https://console.firebase.google.com/project/{プロジェクト名}/overview # 最終行のこれ↓がURL Hosting URL: https://{プロジェクト名}.web.app
データの保管場所
GitHub
リポジトリ作成
デプロイ等の自動化の設定
firebaseとGitHub Actionsを連携
ReactプロジェクトをGitHubActionsを使ってFirebaseへ自動デプロイする手順 #cd - Qiita
firebaseとGitHub Actionsを連携
まずはfirebaseにログイン
$ firebase login --reauth
firebaseとGitHubを連携
$ firebase init hosting:github
質問に答える
✔ Are you ready to proceed? `Yes` ✔ Using project `{プロジェクト名} ({プロジェクト名})` . ✔ For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) `{アカウント名}/{プロジェクト名}` ✔ Set up the workflow to run a build script before every deploy? `Yes` ✔ What script should be run before every deploy? `npm ci && npm run build` ✔ GitHub workflow file for PR previews exists. Overwrite? firebase-hosting-pull-request.yml `Yes` ✔ Set up automatic deployment to your site's live channel when a PR is merged? `Yes` ✔ What is the name of the GitHub branch associated with your site's live channel? `y` ✔ The GitHub workflow file for deploying to the live channel already exists. Overwrite? firebase-hosting-merge.yml `Yes` ✔ Would you like to install agent skills for Firebase? `No`
GitHub Actions
【入門】GitHub Actionsとは？概要やメリット、使用例まとめ - カゴヤのサーバー研究室
自動マージ
先ほど作ったfirebase-hosting-merge.ymlを編集
# This file was auto-generated by the Firebase CLI # https://github.com/firebase/firebase-tools name: Deploy to Firebase Hosting on merge on: push: branches: - main jobs: build_and_deploy: runs-on: ubuntu-latest steps: - name: Run build uses: actions/checkout@v4 - run: npm ci && npm run build env: VITE_SUPABASE_URL: ${{ secrets.SUPABASE_URL }} VITE_SUPABASE_PUBLISHABLE_API_KEY: ${{ secrets.SUPABASE_PUBLISHABLE_API_KEY }} - name: Deploy to firebase uses: FirebaseExtended/action-hosting-deploy@v0 with: repoToken: ${{ secrets.GITHUB_TOKEN }} firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_{プロジェクト名} }} channelId: live projectId: {プロジェクト名}
自動デプロイ
同じく作ったfirebase-hosting-pull-request.ymlを編集
# This file was auto-generated by the Firebase CLI # https://github.com/firebase/firebase-tools name: Deploy to Firebase Hosting on PR on: pull_request permissions: checks: write contents: read pull-requests: write jobs: build_and_preview: if: ${{ github.event.pull_request.head.repo.full_name == github.repository }} runs-on: ubuntu-latest steps: - name: Checkout repository uses: actions/checkout@v4 - name: set up Node.js uses: actions/setup-node@v4 with: node-version: '24' cache: 'npm' cache-dependency-path: 'package-lock.json' - name: Run build run: npm ci && npm run build env: VITE_SUPABASE_URL: ${{ secrets.SUPABASE_URL }} VITE_SUPABASE_PUBLISHABLE_API_KEY: ${{ secrets.SUPABASE_PUBLISHABLE_API_KEY }} - name: Deploy to firebase uses: FirebaseExtended/action-hosting-deploy@v0 with: repoToken: ${{ secrets.GITHUB_TOKEN }} firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_{プロジェクト名} }} projectId: {プロジェクト名}
プルリクエストの作成
GitHub
ブランチを切る
【Git勉強中】ブランチの移動を使い分けたい - ゆるおたノート
コミットしてプッシュ
【Git勉強中】自分のコミット履歴を提出する - ゆるおたノート
プルリク作成
マージ
【Git勉強中】自分のコミット履歴を提出する - ゆるおたノート
データベースの作成
Supabase
プロジェクト作成
| 項目 | 値 |
|---|---|
| Organization | アカウントの組織 |
| GitHub (optional) | （任意） |
| Project name | プロジェクト名 |
| Database password | このプロジェクトのパスワード |
| Region | Asia-Pacific |
| Security | [x] Enable Data API |
[x] Automatically expose new tables |
|
[ ] Enable automatic RLS |
環境変数の設定
VITE + Reactプロジェクトでprocess.envを使うには #vite - Qiita
【Vite】process.envを使うためvite-plugin-env-compatibleを利用したがCannot find name 'process'エラー発生 #初心者 - Qiita
プロジェクトで環境変数を使えるようにする
APIキーの取得
URLの取得
https://{プロジェクトID}.supabase.co
プロジェクトのルートディレクトリに.envファイルを作成
VITE_SUPABASE_URL=https://{プロジェクトID}.supabase.co VITE_SUPABASE_PUBLISHABLE_API_KEY={APIキー}
※.envはプロジェクトルートに置く必要があります。
うまく動かなかったら、誤ってsrc等の別ディレクトリに入れてないか確認しましょう。
パッケージをインストール
$ npm i -D vite-plugin-env-compatible
vite.config.tsを編集
import react from "@vitejs/plugin-react"; import { defineConfig } from "vite"; import env from "vite-plugin-env-compatible"; // 追加 import viteTsconfigPaths from "vite-tsconfig-paths"; // https://vite.dev/config/ export default defineConfig({ plugins: [ react(), viteTsconfigPaths(), env({ prefix: "VITE", mountedPath: "process.env" }), // 追加 ], });
Supabaseのテスト
import { createClient } from "@supabase/supabase-js"; export const supabase = createClient( process.env.VITE_SUPABASE_URL!, process.env.VITE_SUPABASE_PUBLISHABLE_KEY! ); Cannot
このままだとCannot find name 'process'というエラーが出るので、tsconfig.app.jsonというファイルを編集してprocessというオブジェクトが使えるようにする
{ "compilerOptions": { "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "target": "ES2022", "useDefineForClassFields": true, "lib": ["ES2022", "DOM", "DOM.Iterable"], "module": "ESNext", "types": ["vite/client", "node"], /* 編集 */ "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "verbatimModuleSyntax": true, "moduleDetection": "force", "noEmit": true, "jsx": "react-jsx", /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "erasableSyntaxOnly": true, "noFallthroughCasesInSwitch": true, "noUncheckedSideEffectImports": true, "paths": { "@/*": ["./src/*"] } }, "include": ["src"] }
プロジェクトでSupabaseを使えるようにする
パッケージをインストール
$ npm install @supabase/supabase-js
Supabaseのクライアント関数を作成
import { createClient } from "@supabase/supabase-js"; const supabaseUrl = process.env.VITE_SUPABASE_URL as string; const supabaseKey = process.env.VITE_SUPABASE_PUBLISHABLE_API_KEY as string; export const supabase = createClient(supabaseUrl, supabaseKey);
テスト
./utils/supabase/supabaseTest
import {supabase} from "./supabaseClient"; export const getAllData = async () => { const { data, error } = await supabase.from("{テーブル名}").select("*"); console.log(data); if (error) { console.error("データ取得エラー:", error.message); return []; } return data; };
App.tsx
import './App.css'; import { getAllData } from './utils/supabase/supabaseTest'; function App() { getAllData(); return ( <div> <h1>Hello World!</h1> </div> ); } export default App;
ローカルホストで実行してみる
$ npm run dev
データが出力できていればOK
GitHubに値を登録
GitHub > Settings > Secrets and variables > Actions > New repository secretの順にアクセス
下記をSecretsに登録
| Name | Secret |
|---|---|
VITE_SUPABASE_URL |
https://{プロジェクトID}.supabase.co |
VITE_SUPABASE_PUBLISHABLE_API_KEY |
sb_publishable_{～} |
プルリク→マージしてみる
テストが通ればOK
自動テスト
vitestとReact Testing Library（通称RTL）
テストの環境構築でつまづきましたが、JestからVitestに変更することでどうにか動くようになりました。*1
VitestでChakra UI v3を使う際の注意点 Vite × Vitest × React Testing Library環境構築 - KENTEM TechBlog
インストール
Vitest、React Testing Library（と、それらのTSパッケージ）をインストールする
$ npm i -D vitest @testing-library/react @testing-library/dom @testing-library/jest-dom @testing-library/user-event @types/react @types/react-dom jsdom
tsconfig.app.jsonを修正
{ "extends": "./tsconfig.json", "compilerOptions": { "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "target": "es2023", "lib": ["ES2023", "DOM"], "module": "esnext", "types": [ "vite/client", "vitest/globals", "node" // 追加 ], "allowArbitraryExtensions": true, "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "verbatimModuleSyntax": true, "moduleDetection": "force", "noEmit": true, "jsx": "react-jsx", /* Linting */ "noUnusedLocals": true, "noUnusedParameters": true, "erasableSyntaxOnly": true, "noFallthroughCasesInSwitch": true }, "include": ["src", "vitest.setup.ts", "test-utils"] // vitest.setup.tsを追加 }
vitest.setup.tsを作成
import '@testing-library/jest-dom/vitest'; import userEvent from "@testing-library/user-event"; import { afterEach } from 'vitest'; import { cleanup } from "@testing-library/react"; import '@testing-library/jest-dom'; export const user = userEvent.setup(); afterEach(() => { cleanup(); }); // Vitest (jsdom) には matchMedia が無いので自前でモックする if (!window.matchMedia) { window.matchMedia = (query: string) => { return { matches: false, media: query, onchange: null, addEventListener: () => {}, removeEventListener: () => {}, addListener: () => {}, // 古い API（Chakra UI が参照する可能性あり） removeListener: () => {}, // 古い API dispatchEvent: () => false, } } }
vite.config.tsを修正
/// <reference types="vitest" /> import { defineConfig } from 'vitest/config'; import react from '@vitejs/plugin-react'; import env from "vite-plugin-env-compatible"; import path from 'path'; export default defineConfig({ define: { 'process.env': process.env }, plugins: [ react(), env({ prefix: "VITE", mountedPath: "process.env" }) ], resolve: { alias: { '@': path.resolve(__dirname, 'src'), }, }, test: { globals: true, environment: "jsdom", setupFiles: "./vitest.setup.ts", alias: { '@': path.resolve(__dirname, 'src'), }, }, });
package.jsonを修正
"scripts": { "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview", "test": "vitest", // 追加 "coverage": "vitest --coverage" // 追加 },
テスト
テストを実行してみる
import "@testing-library/jest-dom"; // テスト describe("テストのテスト", () => { it("1 + 1 は 2", () => { expect(1 + 1).toBe(2); }); });
✓が出ればOK
$ npm run test > business-card-app@0.0.0 test > vitest (!) Your Vite config uses features that are unsupported by `configLoader: 'native'`, which is planned to become the default in a future major version of Vite: - `__dirname` (vite.config.ts:17:25). Use `import.meta.dirname` instead Set `VITE_CONFIG_NATIVE_IGNORE_WARNING=true` to suppress this warning. DEV v5.0.0 {ルートディレクトリ} ✓ src/App.test.tsx (1 test) 2ms ✓ テストのテスト (1) ✓ 1 + 1 は 2 1ms Test Files 1 passed (1) Tests 1 passed (1) Start at 14:32:51 Duration 1.08s (environment 76%, setup 19%, transform 4%, worker 1%) PASS Waiting for file changes... press h to show help, press q to quit
GitHub Actionsに自動テストを追加
【Vitest入門】#16 GitHub Actionsでテストを自動化しよう【実践強化編⑤・最終回】｜始めて買ったのはPC6001
自動テストを追加
プッシュやプルリクの度にテストを実行するために、.github/workflowsにauto-test.ymlを追加
# .github/workflows/auto-test.yml name: Test This Project on: push: branches: - main pull_request: jobs: test: runs-on: ubuntu-latest steps: - name: checkout this repository uses: actions/checkout@v4 - name: set up Node.js uses: actions/setup-node@v4 with: node-version: '24' cache: 'npm' - name: install packages run: npm ci # テストを実行 - name: run vitest run: npm test -- --run # カバレッジを出力 - name: run coverage and test run: npm run coverage -- --run - name: uplaod coverage report uses: actions/upload-artifact@v4 with: name: coverage-report path: coverage/
UI実装の簡略化
Chakra UI
Using Chakra in Vite | Chakra UI
インストール
（ここからはあまりうまく行かないので、合ってないところがあるかもしれない…）
パッケージをインストール
$ npm i @chakra-ui/react @emotion/react
スニペットを追加
$ npx @chakra-ui/cli snippet add
tsconfig.app.jsonのcompilerOptionsを編集
{ "compilerOptions": { "target": "ESNext", "module": "ESNext", "moduleResolution": "Bundler", "skipLibCheck": true, "paths": { "@/*": ["./src/*"] } } }
main.tsxにProviderを追加
import { Provider } from "@/components/ui/provider" import React from "react" import ReactDOM from "react-dom/client" import App from "./App" ReactDOM.createRoot(document.getElementById("root")!).render( <StrictMode> <Provider> <App /> </Provider> </StrictMode> )
vite.config.tsを編集する
import react from "@vitejs/plugin-react" import { defineConfig } from "vite" export default defineConfig({ plugins: [react()], resolve: { tsconfigPaths: true, }, })
ちなみに
現在作っている課題のアプリはこちらです。
【更新停止中】学習記録アプリ
アプリ
GitHub
GitHub - yuricks7/my-study-log-v3: Reactの練習用リポジトリ（その3）です。 · GitHub
名刺管理アプリ
アプリ
GitHub
GitHub - yuricks7/React_Business_Card_App: Reactの勉強用リポジトリです。名刺管理アプリを作っています。 · GitHub
*1:Copilotさんによると、Chakra UIのv3とjestは相性が悪いそうです…
