Zenn
🍋

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

2024/09/02に公開
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

2. Node.jsのバージョン管理

cd my-counter-vite
nvm install --lts # 一度のみ必要
nvm use --lts # LTS (Long Term Support) バージョンをこのプロジェクトで使用する

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の環境型定義ファイル
├── 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にはチェックを入れない（すでにローカルにファイルがあるため）
  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 push -u origin main

Discussion