Zenn
⚡

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

2022/11/22に公開
初心者
ESLint
Prettier
Vite
Volta
idea

自己紹介

こんにちは。
駆け出したばかりの 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 .eslintrc

としてください。
そうするとファイルが生成されたと思います。
では、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に下記を追記してください。
なかったら、

touch vite.config.js

で生成してください。

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

export default defineConfig({
  server: {
    port: 8080,
    open: '/src/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: true,
  },
  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は開発に必要なパッケージを記載することが良いみたいですね！
この辺は自分も勉強不足なので調べてみます！
ぜひ皆さんも調べてみてください！

以上です :)

GitHubで編集を提案

Discussion