はじめに

まず、私はエンジニアではありません。
最近話題のAIについて興味があり、雰囲気コーディングにちょっと触れている人です。

そして、何かと Hotっぽい Claude Code というものを知り、Proプランに課金して、ポートフォリオサイトを作成してみました。
サイトを作成していたときに、環境構築まわりでちょっとつまずいたので、自分用メモも兼ねてまとめます。

結論から言うと「Git Bashでローカルサーバーを立ち上げるなら、WSL だけではなく Git Bash に npm をインストールしておかないと npm run dev が動作しなかった」という話です。
エンジニアの方はそらそうやろって話だと思いますが、なーんにも知らない初心者が陥った話として読んでもらえると嬉しいです。

環境

Windows 11 
npm 8.12.1

背景

Claude Codeに課金するより前、 Git Bash 環境でローカルサーバーを動かしつつ、Chat GPT などを使って、サイトづくりをしていました。

そこで得た知見：npm run dev って打つと、ローカルサーバーができる・・・！
これが勘違いのもとだった。

その後、Claude Code に課金し、Windows用に WSL をインストールしてサイトを作り始める。
↓
Git Bashで Claude Code を動かしているのと同じフォルダへ移動する。
↓
npm run dev コマンドを打つ
↓
↓

ずっとこの画面・・・

Claude Codeでnpmをインストールしてて、フォルダの中に node_modules も入ってるし、なんでできないの・・・？ってなってました。

ハマったポイント

WSL に npm を導入したが、Git Bash には npm をインストールしてなかった

最初に気づいたのはこれです。

Claude Code から作ったサイトを Git Bash環境で npm run dev を叩いて起動しようとしましたが、Git Bash 環境には npm をインストールしていなかったため、単純に npm コマンドが使えませんでした。

対策

Git Bash に npm を導入します。

npm i   # サイト作成に必要なツールをまとめてインストール
npm -v  # 動作確認（8.12.1　などのバージョン名が表示されればOK）

# 実行結果
8.12.1

なんで別々で開くの？

WSL で動かすと遅く Git Bash で動かしたほうが早かったから。

個人的に WSL 上でローカルサーバーを起動すると重かったので、

プロジェクト生成・編集 → WSL
npm run dev 実行 → Git Bash

という使い分けに落ち着きました。

起動した。。。

まとめ

Claude Code を使った環境で何らかのサイトを作成する場合、
Git Bashにもnpmをインストールしないとローカルサーバーが表示されない 事がわかりました。

WSLで npm をインストールしてるから Git Bash にはインストールしなくていいだろうと思っていましたが、Git Bash にもちゃんと npm をインストールしないとローカルサーバーは立ち上がりません。

基礎中の基礎なことかもしれませんが、こういったことも学びつつちょっとずつ詳しくなっていこうと思います。

最後まで読んでいただき、ありがとうございました。