モダンなWeb開発環境の構築

← ホームに戻る

効率的なWeb開発を行うためには、適切な開発環境の構築が不可欠です。今回は、私が実際に使用している開発環境と、その設定方法について詳しく解説します。

エディタ: Visual Studio Code

VSCodeは、Microsoft製の無料のコードエディタで、豊富な拡張機能と高いカスタマイズ性が特徴です。

必須の拡張機能

🎨 Prettier - Code formatter

コードの自動フォーマッター。保存時に自動でコードを整形してくれます。

🔍 ESLint

JavaScriptのリンターツール。コードの品質を保つために必須です。

🌈 GitLens

Gitの履歴や変更者を視覚的に確認できる強力な拡張機能。

🚀 GitHub Copilot

AIによるコード補完。開発速度が大幅に向上します。

VSCode設定ファイル

私のsettings.json設定の一部を共有します：

        JSON
{
  "editor.fontSize": 14,
  "editor.fontFamily": "'Fira Code', 'Monaco', monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.minimap.enabled": false,
  "editor.bracketPairColorization.enabled": true,
  "workbench.colorTheme": "Tokyo Night",
  "terminal.integrated.fontSize": 13,
  "files.autoSave": "onFocusChange",
  "git.autofetch": true,
  "git.confirmSync": false
}
      

バージョン管理: Git & GitHub

Git設定

グローバルなGit設定を最適化します：

        Bash
# ユーザー情報の設定
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

# エディタの設定
git config --global core.editor "code --wait"

# エイリアスの設定
git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.ci commit
git config --global alias.st status
git config --global alias.lg "log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"
      

便利な.gitignore設定

        Text
# Dependencies
node_modules/
.pnp
.pnp.js

# Testing
coverage/
*.test.js.snap

# Production
build/
dist/

# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

# Logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# IDE
.vscode/
.idea/
*.swp
*.swo
      

パッケージマネージャー: pnpm

npmやyarnの代わりにpnpmを使用することで、ディスク容量を節約し、インストール速度を向上させています。

        Bash
# pnpmのインストール
npm install -g pnpm

# プロジェクトの初期化
pnpm init

# パッケージのインストール
pnpm add react react-dom
pnpm add -D @types/react @types/react-dom

# スクリプトの実行
pnpm run dev
      

開発ツールチェーン

必須ツール一覧

ツール	用途	インストール方法
Node.js	JavaScript実行環境	nvm経由でインストール
Docker	コンテナ化	Docker Desktop
Postman	API開発・テスト	公式サイトから
Chrome DevTools	デバッグ	Chrome内蔵

ターミナル環境

iTerm2 + Oh My Zsh（Mac）

Macユーザーの場合、iTerm2とOh My Zshの組み合わせが最強です：

        Bash
# Oh My Zshのインストール
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

# .zshrcの設定
echo 'export PATH="/usr/local/bin:$PATH"' >> ~/.zshrc
echo 'alias gs="git status"' >> ~/.zshrc
echo 'alias gp="git pull"' >> ~/.zshrc
echo 'alias gc="git commit"' >> ~/.zshrc
echo 'alias gco="git checkout"' >> ~/.zshrc

# テーマの設定
ZSH_THEME="powerlevel10k/powerlevel10k"
      

便利なショートカット集

VSCodeショートカット

操作	Mac	Windows/Linux
コマンドパレット	`Cmd` + `Shift` + `P`	`Ctrl` + `Shift` + `P`
ファイル検索	`Cmd` + `P`	`Ctrl` + `P`
定義へジャンプ	`F12`	`F12`
マルチカーソル	`Option` + Click	`Alt` + Click

開発フロー最適化

自動化スクリプト

package.jsonにタスクランナーを設定：

        JSON
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,md}\"",
    "type-check": "tsc --noEmit",
    "test": "vitest",
    "test:ui": "vitest --ui",
    "precommit": "lint-staged"
  }
}
      

Git Hooks with Husky

        Bash
# Huskyのインストール
pnpm add -D husky lint-staged

# Huskyの初期化
pnpm husky install

# pre-commitフックの追加
pnpm husky add .husky/pre-commit "pnpm lint-staged"
      

💡 Pro Tip
開発環境は定期的に見直し、新しいツールや手法を取り入れることで、継続的に生産性を向上させることができます。

パフォーマンス測定ツール

Lighthouse - Webパフォーマンスの総合評価
WebPageTest - 詳細なパフォーマンス分析
Bundle Analyzer - バンドルサイズの可視化
React DevTools Profiler - Reactコンポーネントのパフォーマンス分析

まとめ

効率的な開発環境の構築は、生産性向上の第一歩です。今回紹介したツールや設定は、私が実際に使用しているものですが、プロジェクトやチームの要件に応じてカスタマイズすることが重要です。

開発環境は一度構築したら終わりではなく、継続的に改善していくものです。新しいツールやプラクティスを積極的に試し、自分に合った最適な環境を見つけていきましょう。

📚 関連リソース
• Visual Studio Code公式サイト
• Oh My Zsh
• pnpm公式ドキュメント

← ホームに戻る