🍋
Viteを利用したReact/TypeScriptプロジェクトの作成とGitHubへの公開手順
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 # 一度のみ必要
echo "lts/*" > .nvmrc # プロジェクトのNode.jsバージョンを記録
nvm use # ターミナルを新しく開くときにはいつも必要
echo "registry=https://registry.npmjs.org/" > .npmrc
複数のプロジェクトを使用している場合、意図しない設定が適用されるリスクを防ぐため、.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で新しいリポジトリを作成
- GitHubにログインして、トップページに移動する。
- 右上の「+」ボタンをクリックし、ドロップダウンメニューから「New repository」を選択する。
- 新しいリポジトリの設定ページが表示される。
- Repository name: my-counter-viteと入力
- Description: 任意で説明を入力(省略可)
-
Initialize this repository with の項目では、
README
や.gitignore
にはチェックを入れない(すでにローカルにファイルがあるため) -
Choose a licenseでは、
MIT License
を選択(MIT Licenseは他の人がソースコードを自由に利用・変更・再配布できるようにするライセンスで、広く採用されているため、特に問題がなければ最初に入れておくのが無難。ただし、公開目的がない場合はチェックを入れないこと)
- 「 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
Discussion