快適な開発環境の作り方

開発環境は、プログラマーにとって毎日使う「仕事道具」です。快適な環境を整えることで、コーディングの効率が大幅に向上します。この記事では、私が実際に使っている開発環境のセットアップ方法を紹介します。

エディタ：VS Code

VS Code（Visual Studio Code）は、軽量で拡張性の高い無料のコードエディタです。Web開発からバックエンド開発まで幅広く対応しており、世界中の開発者に最も使われているエディタの一つです。

基本設定のポイント

VS Codeをインストールしたら、まず以下の基本設定を整えましょう。

// settings.json の推奨設定
{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.minimap.enabled": false,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}

ターミナル環境

コマンドライン操作はWeb開発において避けて通れません。快適なターミナル環境を整えることで、作業効率がグッと上がります。

必要なツール

Node.js — JavaScriptの実行環境。npm（パッケージマネージャー）が付属
Git — コードのバージョン管理。チーム開発の必須ツール
npm / yarn / pnpm — パッケージマネージャー。ライブラリのインストールに使用

Gitの初期設定

# ユーザー情報の設定
git config --global user.name "あなたの名前"
git config --global user.email "[email protected]"

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

# エイリアス（ショートカット）の設定
git config --global alias.st "status"
git config --global alias.co "checkout"
git config --global alias.br "branch"

プロジェクト構成のベストプラクティス

整理されたプロジェクト構成は、開発効率と保守性に直結します。以下は静的サイト開発における基本的なフォルダ構成の例です。

my-project/
├── public/
│   ├── index.html
│   ├── styles.css
│   ├── script.js
│   └── assets/
│       ├── images/
│       └── fonts/
├── .gitignore
├── package.json
└── README.md

💡 Karouのコツ：このポートフォリオサイトもこの構成をベースにしています。Firebase Hostingで公開しているので、public/ フォルダ内のファイルがそのままWeb上に公開されます。シンプルな構成から始めて、必要に応じて拡張していくのがおすすめです。

開発環境チェックリスト

環境構築が完了したら、以下のチェックリストで確認してみましょう。

✓ VS Code がインストールされている
✓ 基本設定（フォントサイズ、自動保存等）が完了
✓ Prettier / ESLint がインストールされている
✓ Live Server でプレビューできる
✓ Node.js がインストールされている（node -v で確認）
✓ Git がインストールされ、ユーザー情報が設定されている
✓ GitHub アカウントを持っている
✓ ターミナルからgit操作ができる

→ おすすめツール一覧を見る

⚙️ 快適な開発環境の作り方