背景

Excalidrawは非常に優れたホワイトボードツールです。私はデータプライバシーの確保やオフラインでの利用を考慮して、ローカル環境で実行する習慣があります。

しかし、ローカル版を起動するたびに「ターミナルを開く → ディレクトリに移動（cd） → 依存関係のチェック → npm startを入力...」というフローを毎日数回繰り返すのは非常に煩わしい作業です。

この「数秒のストレス」を解消するために、アイコンをダブルクリックするだけで環境をセットアップし、ブラウザを自動で開いてくれるシェルスクリプトを作成しました。

スクリプトの機能

このスクリプトには以下の機能が含まれています。

環境の自動修復: NVMとNodeのパスを手動でロードし、ダブルクリック実行時に「Nodeが見つからない」という問題を解決します。
自動デプロイ: ローカルにプロジェクトが存在しない場合、スクリプトが確認を求め、GitHubから自動的にリポジトリをCloneします。
依存関係管理: node_modules を自動検出し、必要に応じてインストールします。
ワンクリック起動: ダブルクリックするだけで実行され、ブラウザが自動的に立ち上がります。

コードの実装 (The Script)

以下のコードを start_excalidraw.command (macOS用) または start_excalidraw.sh (Linux用) として保存してください。

Bash

#!/bin/bash

# ==========================================
# Excalidraw ローカル高速起動スクリプト
# ==========================================

# --- 環境設定 ---
# NVMの設定を読み込む（存在する場合）
export NVM_DIR="$HOME/.nvm"
if [ -s "$NVM_DIR/nvm.sh" ]; then
    source "$NVM_DIR/nvm.sh"
fi

# 一般的な Node.js のインストールパスを手動で追加
# (環境に合わせてバージョン部分を変更してください)
export PATH="$HOME/.nvm/versions/node/v22.16.0/bin:/usr/local/bin:/opt/homebrew/bin:$PATH"

# プロジェクト設定
PROJECT_DIR="$HOME/Desktop/github_local/excalidraw"
REPO_URL="https://github.com/excalidraw/excalidraw.git"

echo "🎨 Excalidraw を起動します..."
echo "📁 プロジェクトディレクトリ: $PROJECT_DIR"
echo ""

# --- プロジェクトの存在確認 ---
if [ ! -d "$PROJECT_DIR" ]; then
    echo "❌ プロジェクトディレクトリが見つかりません"
    echo ""
    read -p "GitHub からプロジェクトをクローンしますか? (y/n): " clone_choice

    if [[ "$clone_choice" =~ ^[Yy]$ ]]; then
        echo "📦 Excalidraw リポジトリをクローン中..."
        echo "📍 リポジトリURL: $REPO_URL"
        echo "📁 保存先: $PROJECT_DIR"
        echo ""

        # 親ディレクトリを作成
        mkdir -p "$(dirname "$PROJECT_DIR")"

        # リポジトリをクローン
        git clone "$REPO_URL" "$PROJECT_DIR"

        if [ $? -ne 0 ]; then
            echo "❌ クローンに失敗しました。ネットワーク接続などを確認してください。"
            read -p "Enterキーを押して終了..."
            exit 1
        fi

        echo "✅ クローン成功！"
        echo ""
    else
        echo "⚠️ キャンセルされました。処理を中止します。"
        read -p "Enterキーを押して終了..."
        exit 1
    fi
fi

# プロジェクトディレクトリに移動
cd "$PROJECT_DIR"

# --- 環境チェック ---
# Node.js
if ! command -v node &> /dev/null; then
    echo "❌ エラー: Node.js が見つかりません"
    echo "ヒント: Node.jsがインストールされていないか、スクリプト内のPATH設定が環境と異なっています。"
    read -p "Enterキーを押して終了..."
    exit 1
fi

# npm
if ! command -v npm &> /dev/null; then
    echo "❌ エラー: npm が見つかりません"
    read -p "Enterキーを押して終了..."
    exit 1
fi

# --- 依存関係の確認 ---
if [ ! -d "node_modules" ]; then
    echo "📦 初回起動のため、依存関係をインストールしています..."
    npm install
    if [ $? -ne 0 ]; then
        echo "❌ 依存関係のインストールに失敗しました"
        read -p "Enterキーを押して終了..."
        exit 1
    fi
fi

# --- サーバー起動 ---
echo "🚀 Excalidraw 開発サーバーを起動中..."
echo "🌐 URL: http://localhost:3001"
echo "⚠️  このウィンドウを閉じるとサーバーは停止します"
echo ""

# サーバーを起動
npm start

コード解説 (Code Analysis)

1. `Command not found: node` の解決策

Bash

export NVM_DIR="$HOME/.nvm"
if [ -s "$NVM_DIR/nvm.sh" ]; then
    source "$NVM_DIR/nvm.sh"
fi
export PATH="$HOME/.nvm/versions/node/v22.16.0/bin:..."

macOSのFinderから .command ファイルをダブルクリックして実行する場合、ターミナル起動時のように .zshrc などが自動的に読み込まれません。そのため、このコードブロックで明示的にNVMをロードし、Nodeのパスを PATH に追加することで、スクリプトが node や npm コマンドを見つけられるようにしています。

2. インタラクティブなCloneロジック

Bash

read -p "GitHubからプロジェクトをクローンしますか? (y/n): " clone_choice

これにより、スクリプトにポータビリティ（移植性）を持たせています。このスクリプトを同僚に渡したり、新しいPCに移行したりした場合でも、スクリプトをダブルクリックするだけでダウンロードからインストールまでガイドしてくれるため、手動で git clone する必要がありません。

使い方

スクリプトの保存: 上記のコードを start_excalidraw.command という名前で保存します。
設定の変更:

PROJECT_DIR が希望のパスになっているか確認してください。
重要: export PATH 内の Nodeバージョン番号（例: v22.16.0）が、ローカルにインストールされているバージョンと一致しているか確認し、必要に応じて修正してください。

権限の付与: ターミナルで以下のコマンドを一度だけ実行し、実行権限を与えます。

Bash

chmod +x start_excalidraw.command

実行: ファイルをダブルクリックするだけで起動します。

使用例スクリーンショット

ローカルにプロジェクトがない場合（Cloneの確認）

ローカルに既にプロジェクトがある場合

起動後の様子

まとめ

このスクリプトのおかげで、日々の起動時間を節約できただけでなく、Shell環境設定にまつわるいくつかの落とし穴も解消できました。頻繁にローカルでオープンソースプロジェクトを実行する必要がある開発者にとって、このような自分専用の「起動スクリプト集」を作っておくことは非常に価値があると思います。

背景

スクリプトの機能

コードの実装 (The Script)

コード解説 (Code Analysis)

1. Command not found: node の解決策

2. インタラクティブなCloneロジック

使い方

使用例スクリーンショット

まとめ

1. `Command not found: node` の解決策