開発環境は、プログラマーにとって毎日使う「仕事道具」です。快適な環境を整えることで、コーディングの効率が大幅に向上します。この記事では、私が実際に使っている開発環境のセットアップ方法を紹介します。
エディタ：VS Code
VS Code（Visual Studio Code）は、軽量で拡張性の高い無料のコードエディタです。Web開発からバックエンド開発まで幅広く対応しており、世界中の開発者に最も使われているエディタの一つです。
基本設定のポイント
VS Codeをインストールしたら、まず以下の基本設定を整えましょう。
{
"editor.fontSize": 14,
"editor.tabSize": 2,
"editor.wordWrap": "on",
"editor.formatOnSave": true,
"editor.minimap.enabled": false,
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000
}
おすすめ拡張機能
VS Codeの真の力は拡張機能にあります。以下は私が実際にインストールしている拡張機能です。
Prettier
コードの自動整形。チーム開発でのコードスタイル統一に必須。
ESLint
JavaScriptのコード品質チェック。バグの早期発見に役立つ。
Live Server
HTMLファイルをリアルタイムプレビュー。変更が即座に反映される。
One Dark Pro
目に優しいダークテーマ。長時間のコーディングに最適。
Material Icon Theme
ファイルアイコンを見やすくカスタマイズ。直感的なファイル判別。
GitHub Copilot
AIによるコード補完。コーディング速度が大幅に向上。
ターミナル環境
コマンドライン操作は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"
プロジェクト構成のベストプラクティス
整理されたプロジェクト構成は、開発効率と保守性に直結します。以下は静的サイト開発における基本的なフォルダ構成の例です。
├── 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操作ができる