🍋

Viteを利用したReact/TypeScriptプロジェクトの作成とGitHubへの公開手順

に公開
GitHub
React
TypeScript
開発環境
Vite
tech

create-react-app同様に、Viteを使ってReactとTypeScriptの開発環境を構築する手順メモ。

複数のプロジェクトを使用している場合、プロジェクトごとに異なるnpmのバージョンが指定されていることがあるため、ここでは必要なnpmのバージョンをローカル（プロジェクトのフォルダ）でのみ使用する。

Vite とは

Viteは、次世代のフロントエンド開発ツールであり、高速な開発環境を提供することを目的としている。Viteは従来のWebpackとは異なり、Rollupという別のバンドラを使用してコードの最適化とバンドルを行う。Rollupは軽量で効率的なバンドルを実現するため、特に本番環境向けのビルドにおいて優れたパフォーマンスを発揮する。また、Viteは開発中に必要なモジュールだけをオンデマンドで読み込む仕組みを持ち、ビルド速度と開発体験の向上に寄与している。

1. Viteプロジェクトのセットアップ

my-counter-viteという名前のプロジェクトを作成するために、以下のコマンドを実行する。

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

複数のプロジェクトを使用していて、グローバルで特別なレジストリを指定している場合は、以下にすると早い:

npm --registry=https://registry.npmjs.org/ create vite@latest my-counter-vite -- --template react-ts

2. Node.jsのバージョン管理と公式レジストリ設定

cd my-counter-vite
echo "registry=https://registry.npmjs.org/" > .npmrc
nvm install --lts # 一度のみ必要
node -v  # 例: v22.14.0 と出たとする
echo "v22.14.0" > .nvmrc # プロジェクトのNode.jsバージョンを記録
nvm use # ターミナルを新しく開くときにはいつも必要

複数のプロジェクトを使用している場合、意図しない設定が適用されるリスクを防ぐため、.npmrc に記載して公式レジストリを常に利用できる状態にする。

3. 依存関係のインストールと開発サーバーの起動

npm install
npm run dev

Local: http://localhost:5173/などと、ローカルホストのポート番号が表示されるので、それをブラウザで開き、作成したアプリケーションを起動する。

4. Viteの基本構成

my-counter-vite/
├── public/
├── src/
│   ├── assets/
│   ├── App.tsx          # メインのアプリケーションコンポーネント
│   ├── Counter.tsx      # カウンターなど自作のコンポーネントを追加する
│   ├── main.tsx         # アプリケーションのエントリーポイント
│   ├── index.css        # グローバルなスタイルシート
│   └── vite-env.d.ts    # Viteの環境型定義ファイル（自動生成）
├── .nvmrc               # プロジェクトのNode.jsバージョンを記録(先ほど作成)
├── .npmrc               # プロジェクト用のNPMレジストリを設定(先ほど作成)
├── index.html           # HTMLテンプレート
├── package.json
├── tsconfig.json        # TypeScriptの設定ファイル
└── vite.config.ts       # Viteの設定ファイル

新しく作成したリポジトリをGitHubに載せる手順

1. GitHubで新しいリポジトリを作成

  1. GitHubにログインして、トップページに移動する。
  2. 右上の「+」ボタンをクリックし、ドロップダウンメニューから「New repository」を選択する。
  3. 新しいリポジトリの設定ページが表示される。
    • Repository name: my-counter-viteと入力
    • Description: 任意で説明を入力（省略可）
    • Initialize this repository with の項目では、READMEや.gitignoreにはチェックを入れない（すでにローカルにファイルがあるため）
    • Choose a licenseでは、MIT License を選択（MIT Licenseは他の人がソースコードを自由に利用・変更・再配布できるようにするライセンスで、広く採用されているため、特に問題がなければ最初に入れておくのが無難。ただし、公開目的がない場合はチェックを入れないこと）
  4. 「 Create repository」ボタンをクリックしてリポジトリを作成する。

2. ローカルリポジトリをGitHubリポジトリに接続

cd my-counter-vite
git init
echo "node_modules/" >> .gitignore # .gitignoreにnode_modulesを追加
git add . 
git commit -m "initial commit"
git remote add origin git@github.com:<username>/my-counter-vite.git
git branch -M main # 現在のブランチ名をmainに強制的に変更するコマンド
git pull --rebase origin main # Licenseを選んだ場合は履歴を整理
git push -u origin main

ESLint & Prettier の設定（Vite + React + TypeScript）

プロジェクトのコード品質を保ち、スタイルを統一するために ESLint と Prettier は便利。ESLint は Vite のテンプレートに含まれているため、追加インストールは不要。Prettier の導入手順は以下の通り。

Prettier の導入

Prettier を使うと、改行・インデント・クォートなどのコード整形を自動で統一できる。チーム開発や将来の自分の保守を楽にするため、最初に入れておくと便利。

npm install --save-dev prettier

整形対象から除外したいディレクトリを指定：

.prettierignore
node_modules
build

整形ルールの基本設定：

.prettierrc.json
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2
}

VS Code の設定

VS Codeで保存時に自動で整形・Lint修正されるように設定する。コードスタイルを手作業で気にせず書けるようになるため、開発がスムーズになる。整形が勝手に走るのが気になる人は入れないなくていいかも。

.vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.alwaysShowStatus": true,
  "json.format.enable": false,
  "gitlens.integrations.enabled": true
}

.gitignore の調整

.vscode/ フォルダが .gitignore に含まれている場合は、必要に応じて除外ルールを変更する。他のマシンでも同じ VS Code の設定（保存時の自動整形など）を使えるようにするには、 .vscode/settings.json` を Git に含めて共有できるようにしておくと便利。

その場合、.gitignore にある以下の行を削除またはコメントアウトする：

.vscode/*
!.vscode/extensions.json

ただし、マシンが1つだけで、設定を共有する必要がない場合は変更しなくてよい。開発スタイルに合わせて選択する。

Discussion