【⑤環境構築】Vite+React+TypeScript+GitHubPagesで爆速サイト公開

## はじめに
業務ではVue.js+JavaScriptを使用しています。
が、もう少しモダンなフレームワークと言語に挑戦したい...ということでReactとTypeScriptをチョイスし、簡単なWEBアプリをつくることに:v:

...と思い立ったのが10月末。
「そういえば12月はQiitaアドベントカレンダーがあるな...そこまでに公開できたらいいな:sunglasses:」と思い、1ヶ月半程度で設計~公開まで行けると踏んで開発開始。

折角なので、制作の過程も含めて記事化してみました。

ということで、本記事は下記連載の第5弾となります。
他記事も併せてご覧ください。
[【①アイデア選定】](https://qiita.com/YutaManaka/items/f5db1d86239203db8ade)
[【②技術選定】](https://qiita.com/YutaManaka/items/b1397c0624010b693a12)
[【③設計(ロジック)】](https://qiita.com/YutaManaka/items/6d412971574c4ca9fb1b)
[【④設計(デザイン)】](https://qiita.com/YutaManaka/items/5bb6b193149e68c9b742)
[【⑤環境構築】](https://qiita.com/YutaManaka/items/60bed57196386ccce931)←イマココ
[【⑥進捗管理】](https://qiita.com/YutaManaka/items/beeba2bcba64d1d1c6bd)

ちなみに、公開サイトはこちら↓
https://yutamanaka.github.io/FragranceFinder/

リポジトリはこちら↓
https://github.com/YutaManaka/FragranceFinder

本記事では、環境構築+サイト公開方法についてまとめました:writing_hand:

## 対象者
この記事は下記のような人を対象にしています。

- 駆け出しエンジニア
- プログラミング初学者
- React勉強中の方
- TypeScript勉強中の方
- フロントエンドのポートフォリオを無料で公開したい方

## 結論
Vite+React+TypeScript+GitHubPagesなら、初見でも1時間以内に環境構築とサイト公開できます:laughing:

## 使用技術
- 言語/フレームワーク
    - JavaScript
    - typescript@5.2.2
    - react@18.2.0
- ライブラリ
    - gh-pages@6.0.0
    - husky@8.0.3
    - lint-staged@15.0.2
    - eslint@8.53.0
    - prettier@3.0.3
- 開発環境
    - vite@4.5.0
- 本番環境
    - GitHub Pages
- バージョン管理
    - GitHub

## 1. Vite+React+TypeScriptでプロジェクト作成【10分】
Node.jsはインストール済みだと仮定。
まだの人は[こちら](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)
まずはviteでプロジェクトを作成しましょう。
`sample-project`というプロジェクトを作成するには、下記のコマンドを実行しましょう。
```shell
npm create vite@latest sample-project -- --template react-ts
```
はい完成。早！！！
早速開発サーバーを起動しましょう。
```shell
cd sample-project
npm i
npm run dev
```
上記3点のコマンドで完了。早！！！
これで無事、[http://localhost:5173]()でデフォルト画面が表示できます。
簡単すぎる...!
![スクリーンショット 2023-11-06 23.40.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2157342/b4901afa-23a9-e30a-616f-1869e1cc4f15.png)

## 2. eslint導入【5分】
リンター入れましょう。
```shell
npm add -D eslint
npm eslint --init
```
.eslintrc.jsonを下記の通り作成。

```.eslintrc.json
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "standard-with-typescript",
        "plugin:react/recommended",
        "plugin:react-hooks/recommended",
        "plugin:jsx-a11y/recommended",
        "plugin:react/jsx-runtime"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "jsx-a11y",
        "react",
        "react-hooks"
    ],
    "rules": {
    },
    "settings": {
        "react": {
             "version": "detect"
        }
    }
}
```
次に、package.jsonに下記を追記
```package.json
"scripts": {
    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix && git add -u"
  }
```

## 3. prittier導入【5分】
整形ツール入れましょう。
```shell
npm add -D prettier eslint-config-prettier
```
続けて、.prettierrc.jsonを作成。
```.prettierrc.json
{
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": false,
    "singleQuote": true
}
```
次に、package.jsonに下記を追記
```package.json
"scripts": {
    "format": "prettier --write src"
  }
```

## 4. husky導入【10分】
コミット時にLint+整形するツール入れましょう。
```shell
npm add -D lint-staged husky
npm husky install
npx husky add .husky/pre-commit "npx lint-staged && git add -u"
```
これで、コミットした際にlintと整形を行った上でコミットしてくれるようになります。
ここまでで環境構築は終了！
初見で調べながらでも30分で完成しました。

## 5. GitHub Pagesでサイト公開【30分】
さて、せっかく構築したのですから、無料で世界に向けて公開しましょう！
今回はGithubPagesを使用します。
```shell
npm install gh-pages --save-dev
```
次に、package.jsonに"predeploy"と"deploy"を追記
```package.json
"scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist",
    "build": "tsc && vite build",
  }
```
次に、vite.config.tsに下記を追記
```vite.config.ts
export default defineConfig({
  base: '/リポジトリ名',
  plugins: [react()]
})
```

最後に、下記コマンドを実行！
```shell
npm run deploy
```
Githubリポジトリの`Settings -> Pages`にて、下記のように`gh-pages`を選択することでデプロイできます。
![スクリーンショット 2023-11-07 0.05.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2157342/25da2830-4121-e92b-0731-8beb7dc62416.png)

以降、デプロイしたい時には上記コマンドを実行するだけでデプロイが完了します。
GitHubPagesのURLは
```
https://アカウント名.github.io/リポジトリ名/
```
となります。

ちなみに、私の公開サイトはこちら↓
https://github.com/YutaManaka/FragranceFinder

リポジトリはこちら↓
https://yutamanaka.github.io/FragranceFinder/

## おわりに
Vite+React+TypeScript+GitHubPagesで環境構築+サイト公開の方法についてまとめました。

## 参考記事
- [ViteでTypeScript×Reactの開発環境を構築してみた](https://note.com/shift_tech/n/n9c5fcd207680)
- [Vite, React, TS, ESLint, Prettier, Husky, lint-staged... etc Setup
](https://zenn.dev/kapureka/articles/18830a7b98892e)
- [Deploying Vite / React App to GitHub Pages](https://dev.to/rashidshamloo/deploying-vite-react-app-to-github-pages-35hf)
- [静的サイトのデプロイ](https://ja.vitejs.dev/guide/static-deploy.html)