コンテンツにスキップ

01 開発環境の基本セットアップ

このドキュメントでは、DevBlueprint プロジェクトの開発に必要な基本的なツールのインストールと初期設定を行います。

前提条件

  • インターネット接続が利用可能であること
  • 管理者権限でのソフトウェアインストールが可能であること
  • Windows、macOS、または Linux 環境であること

1. Node.js のインストール

1.1 Node.js とは

Node.js は JavaScript の実行環境で、このプロジェクトでは以下の目的で使用します：

  • パッケージ管理（npm）
  • 開発ツール（ESLint、Prettier等）の実行
  • ビルドスクリプトの実行

1.2 推奨バージョン

  • Node.js: 18.x 以上（LTS版を推奨）
  • npm: 9.x 以上

1.3 インストール手順

Windows の場合（nvm-windows 推奨）

複数の Node.js バージョンを管理できる nvm-windows の利用を強く推奨します。

  1. nvm-windows のインストール:

    nvm-windows のリリースページから nvm-setup.zip をダウンロードし、インストールします。

  2. Node.js LTS版のインストール:

    PowerShell を管理者として開き、以下のコマンドを実行します：

    # 最新の LTS バージョンをインストール
nvm install lts

# インストールされたバージョンを確認
nvm list

# 特定のバージョンを使用
nvm use [インストールされたバージョン番号]  # 例: nvm use 20.15.0

  3. デフォルトバージョンの設定（推奨）:

    新しいターミナルを開くたびに自動で特定の Node.js が使われるように設定：

    nvm alias default [バージョン番号]  # 例: nvm alias default 20.15.0

従来の方法（非推奨）:

バージョン管理が不要な場合のみ、以下の方法も可能です：

  1. Node.js 公式サイト にアクセス
  2. "LTS" バージョンをダウンロード
  3. ダウンロードした .msi ファイルを実行

macOS の場合

nvm を使用する場合（推奨）:

# nvm をインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# ターミナルを再起動または以下を実行
source ~/.bashrc

# 最新の LTS バージョンをインストール
nvm install --lts
nvm use --lts
nvm alias default node

Homebrew を使用する場合:

# Homebrew がインストール済みの場合
brew install node

# 特定のバージョンを指定する場合
brew install node@18

Linux の場合

nvm を使用する場合（推奨）:

# nvm をインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# ターミナルを再起動または以下を実行
source ~/.bashrc

# 最新の LTS バージョンをインストール
nvm install --lts
nvm use --lts
nvm alias default node

従来の方法:

Ubuntu/Debian:

# NodeSource リポジトリを追加
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -

# Node.js をインストール
sudo apt-get install -y nodejs

CentOS/RHEL/Fedora:

# NodeSource リポジトリを追加
curl -fsSL https://rpm.nodesource.com/setup_lts.x | sudo bash -

# Node.js をインストール
sudo yum install -y nodejs

1.4 インストール確認

ターミナル（コマンドプロンプト）で以下のコマンドを実行し、バージョンが表示されることを確認してください：

node --version
npm --version

期待される出力例:

$ node --version
v18.17.0

$ npm --version
9.6.7

2. Git のインストールと設定

2.1 Git とは

Git は分散型バージョン管理システムで、ソースコードの変更履歴を管理します。

2.2 インストール手順

Windows の場合

  1. Git for Windows にアクセス
  2. 最新版をダウンロード
  3. インストーラーを実行し、デフォルト設定でインストール

macOS の場合

Homebrew を使用する場合:

brew install git

Xcode Command Line Tools を使用する場合:

xcode-select --install

Linux の場合

Ubuntu/Debian:

sudo apt-get update
sudo apt-get install git

CentOS/RHEL/Fedora:

sudo yum install git
# または
sudo dnf install git

2.3 Git の初期設定

Git をインストールしたら、ユーザー情報を設定します：

# ユーザー名を設定
git config --global user.name "Your Name"

# メールアドレスを設定
git config --global user.email "your.email@example.com"

# デフォルトブランチ名を設定
git config --global init.defaultBranch main

# 改行コードの自動変換設定（Windows の場合）
git config --global core.autocrlf true

# 改行コードの自動変換設定（macOS/Linux の場合）
git config --global core.autocrlf input

2.4 インストール確認

git --version
git config --list

3. Visual Studio Code のインストール

3.1 VS Code とは

Visual Studio Code（VS Code）は、このプロジェクトで標準的に使用する軽量で高機能なコードエディタです。

3.2 インストール手順

Windows の場合

  1. VS Code 公式サイト にアクセス
  2. "Download for Windows" をクリック
  3. ダウンロードした .exe ファイルを実行
  4. インストーラーの指示に従ってインストール

macOS の場合

  1. VS Code 公式サイト にアクセス
  2. "Download for macOS" をクリック
  3. ダウンロードした .zip ファイルを展開
  4. Visual Studio Code.app をアプリケーションフォルダに移動

Linux の場合

Ubuntu/Debian:

# Microsoft GPG キーをインストール
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] \
https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'

# パッケージキャッシュを更新してインストール
sudo apt update
sudo apt install code

3.3 VS Code の基本設定

VS Code を起動したら、以下の基本設定を行います：

  1. コマンドパレットの確認

    • Ctrl+Shift+P（Windows/Linux）または Cmd+Shift+P（macOS）でコマンドパレットが開くことを確認

  2. 統合ターミナルの確認

    • Ctrl+Shift+`` （バッククォート）で統合ターミナルが開くことを確認

  3. Settings Sync の有効化（オプション）

    • 複数の環境で設定を同期したい場合は、GitHub アカウントでログインして Settings Sync を有効化

4. プロジェクトのクローン

開発環境が整ったら、プロジェクトをローカルにクローンします：

# プロジェクトをクローン
git clone https://github.com/BitzLabs/DevBlueprint.git

# プロジェクトディレクトリに移動
cd DevBlueprint

# 依存関係をインストール
npm install

5. セットアップ確認

以下のコマンドを実行して、基本環境が正しく構築されていることを確認してください：

# Node.js とnpm のバージョン確認
node --version
npm --version

# Git の設定確認
git --version
git config user.name
git config user.email

# プロジェクトの依存関係確認
npm list --depth=0

6. トラブルシューティング

よくある問題と解決方法

Node.js のバージョンが古い場合

Windows（nvm-windows を使用）:

# 現在のバージョンを確認
node --version

# 利用可能なバージョンを確認
nvm list available

# 新しいバージョンをインストール
nvm install lts

# 新しいバージョンを使用
nvm use [バージョン番号]

macOS/Linux（nvm を使用）:

# 現在のバージョンを確認
node --version

# 新しい LTS バージョンをインストール
nvm install --lts
nvm use --lts

npm のパーミッションエラー（Linux/macOS）

# npm のグローバルディレクトリを変更
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

# .bashrc または .zshrc に以下を追加
export PATH=~/.npm-global/bin:$PATH

VS Code がコマンドラインから起動できない

macOS の場合:

  1. VS Code を起動
  2. コマンドパレット（Cmd+Shift+P）を開く
  3. "Shell Command: Install 'code' command in PATH" を実行

Windows の場合:

インストール時に "Add to PATH" オプションが選択されていることを確認してください。

nvm-windows のトラブルシューティング

node コマンドが見つからない場合:

# nvm が正しくインストールされているか確認
nvm version

# Node.js がインストールされているか確認
nvm list

# 特定のバージョンを使用
nvm use [バージョン番号]

PowerShell で npm スクリプトが実行できない場合:

PowerShell の実行ポリシーが原因の可能性があります：

# 実行ポリシーを変更
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

# 確認ダイアログで Y を入力

nvm コマンドが認識されない場合:

  1. PowerShell を管理者として再起動
  2. 環境変数が正しく設定されているか確認
  3. 必要に応じて nvm-windows を再インストール

次のステップ

基本環境のセットアップが完了したら、次は VS Code の拡張機能とワークスペース設定を行います：

→ 02_VSCode拡張機能とワークスペース設定.md