初心者による「viteを使った開発環境の構築！」

自己紹介

こんにちは。
駆け出したばかりのwebエンジニア(24)です。
暇すぎてお遊び感覚で始めたProgateのHTMLとCSSをやったら面白くなってしまい、一人前のフロントエンドエンジニアを目指し未経験から転職をいたしました。
最近はReactのキャッチアップに勤しんでおります。

今回やること

早速本題ですが、今回は表題の通り開発環境の構築を紹介しようと思います。
なぜこうなったかといいますと、駆け出しエンジニアの自分が
「なにかポートフォリオを作ってみたいな〜」
となり、せっかくなら簡単な開発環境の構築からと思い立ちまして、せっせと調べながらやっていたんですが、せっかくなら自分と同じ状況になっているかもしれない駆け出しの方に共有しようと思った次第です。

では早速見ていきましょう:)

開発環境構築

どのようにやっていくかですが、今回はvoltaでnodeとnpmのバージョンを固定して、webpackではなくviteというフロントエンドツールで環境構築をしていこうと思います。
Macで行っていきます。windowsの方は適宜読み替えていただくか、他の方の記事を御覧ください！すみません。

ステップ① Homebrewのインストール

まずはターミナルを開いてください。エンジニアっぽく見えるあれです。
そこに

brew -v

と打ってください。
ここでhomebrewのバージョンが表示される方はhomebrewのインストールが済んでいますので、次のステップへ進んでください

未インストールの方は次のコマンドを打ってください。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

その後brew -vを再度打ってみて、

Homebrew 3.6.11
Homebrew/homebrew-core (git revision 99466494b34; last commit 2022-11-16)

のように表示されればインストール成功です。

zsh: command not found: brewが表示された場合、追加で設定が必要なので下記コマンドを実行してみてください。
また、ユーザー名には自分のPCのユーザ名をお願いします！

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/ユーザー名/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

実行後、brew -vでバージョンが出てくれば成功です。

ステップ② Voltaのインストール

次に、Node.jsやnpmのバージョン管理をしてくれるVoltaをインストールします。（似たものにはnvmなどがあると思います！）
Macの方はこのVoltaをHomebrewからインストールしてきます。
Windowsの方は直接インストールできます！

volta -vでバージョンが既に出てきたら、インストール出来ているので、次のステップに進んじゃってください！

Macの方

brew install volta

として、

volta -v

でバージョンを確認できたら成功です！

そして、

volta setup

を実行して、エラーが発生しなかったら問題ないはずです！

この後、一応SHELLを再起動します。

exec $SHELL -l

次にNodeをインストールします。

volta install node

この後、

node -v

としてバージョンが表示されれば成功です！

Windowsの方

開発者モードをONにしてください。
Voltaを使うときには必要なようです。

そして、Volta公式サイトのGetting Startedから「download and run the Windows installer」のリンクをクリックし、インストーラーをダウンロードします。
終了後、volta -vすればバージョンが出てくると思います！

nodeのインストールはMacの方と同じ手順なのでインストールをお願いします！

voltaの用意はできましたね！
次はviteを使っていきます。

ステップ③ Viteでプロジェクト作成

早速導入していきます！
下記コマンドを実行すると、カレントディレクトリ配下に生成されますので、適宜ディレクトリを移動しておいてください！

npm create vite

を入力すると対話形式でインストールが進んでいくと思います。
プロジェクトの名前は？
フレームワーク使うの？
それともバニラ？（素のJavaScript）
React使うの？TypeScriptも一緒に使う？

みたいな感じです。自分がやりたい環境に合わせてご選択をお願いします。

インストールが終了したら自分が作り出したディレクトリに移動します。

cd プロジェクト名

VSCodeで自分の手によって生み出されたプロジェクトを御覧ください。
色々ファイルがありますね？
これが雛形です。
自分で作るときはこの中身をいじって作ります。

それでは、package.jsonを開いてください。
下の方に、

"volta": {
	"node": "18.12.1",
	"npm": "8.15.0"
}

と追記してください。
これでnodeとnpmのバージョンを固定できます。

それでは今度はPrettierとESLintをインストールしていきます。
名前ぐらいは聞いたことあるし、なんなら拡張機能でインストールしてる方も多いんじゃないでしょうか？
今回は併用をして、かつルールが競合して永遠ループに至らないようにしていきます。
それでは下記コマンドを入力してください。

npm i -D eslint eslint-config-prettier prettier

これを打つと、ESLintとPrettierがインストールされます。package.jsonの中身を見てみると、prettierやeslintが追加されていると思います。
それともう一つ、eslint-config-prettierという見慣れないものがあると思います。
これがPrettierとESLintが競合しないようにしてくれるやつです。
思考停止でとりあえず入れておきましょう。

では、prettierとeslintの設定ファイルを生成していきます。
もし開発者間で共有したとき、開発環境の差異が起きないからです。

そうしましたら、まずはプロジェクトの配下に.eslintrcを生成しましょう。

touch .eslitrc

としてください。
そうするとファイルが生成されたと思います。
では、finderでも見てみてください。多分見当たらないと思います。これはファイル名の先頭に.が付いてるからです。
これを付けると不可視ファイルとなって見えないんですよ。
面白いですよね。
少し話が脱線してしまいました。
VSCodeに戻ってください。
ではこの.eslintrcに下記を記述してください。

{
  "root": true,
  "env": {
    "browser": true,
    "es2021": true,
	"node": true
  },
  "extends": [
	"eslint:recommended",
    "prettier"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
	"ignorePatterns": ["/node_modules/", "/dist/"]
}

細かいところは説明を省きます。自分で調べてください。笑
ちなみに、ESLintの設定項目は一個一個設定できますが、果てしなく大変な作業になると予想されるので、"eslint:recommended"とすることで、おすすめの設定を適用できます。
修羅の道を歩みたい方はご自身で調べてやってみてください。
そうでない方はここも思考停止でこのように設定しておきましょう。

続いてPrettierの設定ファイルも生成しちゃいましょう！

touch .prettierrc

生成されたファイルの中身に、

{
  "printWidth": 100,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "endOfLine": "lf",
  "arrowParens": "avoid",
  "bracketSpacing": true
}

を記述してください。
一応Prettierから除外するファイルも指定しましょう。

touch .prettierignore

生成されたファイルの中に、

package.json
package-lock.json

と記載しておきましょう。こうすればこの2ファイルにはPrettierは効かないはずです。

そしてこれはGit等で共有する && VSCodeを使っているに限定される設定事項なのですが、VSCodeの共通設定を作っていきます。
これはなくてもいいです。

mkdir .vscode && touch .vscode/setting.json

出来上がったファイルに

{
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
  "prettier.eslintIntegration": true
}

としてください。

再度package.jsonを開きます。
npm-scriptsに

"format": "eslint src --fix && prettier --write src"

と追記してください。
"dev"とか"build"とか書いてあるところです。
これでnpm run formatというコマンドを打つと、srcディレクトリ配下がフォーマットされるという意味になります！
この辺は適宜書き換えてください。

そうそう、IE１１にも一応対応できるように、

npm i -D @vitejs/plugin-legacy

しておきましょう！

そして、vite.config.jsに下記を追記してください。

import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  server: {
	port: 8080,
    open: '/index.html'
  },
	plugins: [
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ]
})

といった感じです。
分かりにくいかもしれませんので、
vite.config.jsの完成形の一例です。
import react from '@vitejs/plugin-react'があったり、pluginにreact()があるのはvite導入の際にreactを選んだからです。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import legacy from '@vitejs/plugin-legacy'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
	port: 8080,
    open: '/index.html'
  },
  plugins: [
    react(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    }),
  ]
})

最後に

npm i

としておきましょう

さて、それでは開発サーバーを立ち上げてみましょう！

npm run dev

とコマンドを実行してみましょう！
そうするとlocalhostのport番号8080で開発画面が開いたと思います！
そこで雛形で生成されたページが見えてるんじゃないかなと思います！
コードを更新したらページも更新されるます。Lintエラーもページに出ます！！
ここから自分なりのwebAppなり作ってみてください！

おわりに

お疲れさまでした。
ここまで駆け抜けてきてしまいました。
ここで一旦、環境構築については以上です。
これで開発の下地が出来たんじゃないかなと思います。

皆さまのなにかに役立てたら幸いです。。

また、執筆者自身が初心者です。勉強中のしがない身です。でもどうしても経験として投稿してみたかったのです。笑
間違っている部分、ここはこうした方がいいよ、ということがございましたら、優しく教えていただけますと幸いです。

ここまで読んでいただきありがとうございました！
皆さま、よきカタカタライフを :)

おまけ

もしjQueryを導入したい場合

npm i jQuery

もしSassを導入したい場合

npm i -D sass

このあとmain.jsのimportの拡張子をscssにしておいてください。

Reactを導入する場合のESLint

npm i -D eslint-plugin-react eslint-plugin-react-hooks

CSS in JSを使いたい場合、(styled-componentsを使う場合)

npm i styled-components

Vueを使う場合のESLint

npm i -D eslint-plugin-vue

上記コマンドを使用すると便利かもしれないです！

ちなみにプチ情報です。npm i -Dありとなしの違いですが、
-Dありはpackage.jsonのdevDependenciesに追加されて、ナシはdependenciesに追加されるみたいです！
devDependenciesは開発に必要なパッケージを記載することが良いみたいですね！
この辺は自分も勉強不足なので調べてみます！
ぜひ皆さんも調べてみてください！

以上です :)