はじめに
業務ではVue.js+JavaScriptを使用しています。
が、もう少しモダンなフレームワークと言語に挑戦したい...ということでReactとTypeScriptをチョイスし、簡単なWEBアプリをつくることに
...と思い立ったのが10月末。
「そういえば12月はQiitaアドベントカレンダーがあるな...そこまでに公開できたらいいな
」と思い、1ヶ月半程度で設計~公開まで行けると踏んで開発開始。
折角なので、制作の過程も含めて記事化してみました。
ということで、本記事は下記連載の第5弾となります。
他記事も併せてご覧ください。
【①アイデア選定】
【②技術選定】
【③設計(ロジック)】
【④設計(デザイン)】
【⑤環境構築】←イマココ
【⑥進捗管理】
ちなみに、公開サイトはこちら↓
https://yutamanaka.github.io/FragranceFinder/
リポジトリはこちら↓
https://github.com/YutaManaka/FragranceFinder
本記事では、環境構築+サイト公開方法についてまとめました
対象者
この記事は下記のような人を対象にしています。
- 駆け出しエンジニア
- プログラミング初学者
- React勉強中の方
- TypeScript勉強中の方
- フロントエンドのポートフォリオを無料で公開したい方
結論
Vite+React+TypeScript+GitHubPagesなら、初見でも1時間以内に環境構築とサイト公開できます
使用技術
- 言語/フレームワーク
- 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はインストール済みだと仮定。
まだの人はこちら
まずはviteでプロジェクトを作成しましょう。
sample-projectというプロジェクトを作成するには、下記のコマンドを実行しましょう。
npm create vite@latest sample-project -- --template react-ts
はい完成。早！！！
早速開発サーバーを起動しましょう。
cd sample-project
npm i
npm run dev
上記3点のコマンドで完了。早！！！
これで無事、http://localhost:5173でデフォルト画面が表示できます。
簡単すぎる...!
2. eslint導入【5分】
リンター入れましょう。
npm add -D eslint
npm eslint --init
.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に下記を追記
"scripts": {
"lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix && git add -u"
}
3. prittier導入【5分】
整形ツール入れましょう。
npm add -D prettier eslint-config-prettier
続けて、.prettierrc.jsonを作成。
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": false,
"singleQuote": true
}
次に、package.jsonに下記を追記
"scripts": {
"format": "prettier --write src"
}
4. husky導入【10分】
コミット時にLint+整形するツール入れましょう。
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を使用します。
npm install gh-pages --save-dev
次に、package.jsonに"predeploy"と"deploy"を追記
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d dist",
"build": "tsc && vite build",
}
次に、vite.config.tsに下記を追記
export default defineConfig({
base: '/リポジトリ名',
plugins: [react()]
})
最後に、下記コマンドを実行！
npm run deploy
GithubリポジトリのSettings -> Pagesにて、下記のようにgh-pagesを選択することでデプロイできます。
以降、デプロイしたい時には上記コマンドを実行するだけでデプロイが完了します。
GitHubPagesのURLは
https://アカウント名.github.io/リポジトリ名/
となります。
ちなみに、私の公開サイトはこちら↓
https://github.com/YutaManaka/FragranceFinder
リポジトリはこちら↓
https://yutamanaka.github.io/FragranceFinder/
おわりに
Vite+React+TypeScript+GitHubPagesで環境構築+サイト公開の方法についてまとめました。