てくてくプログラミング受講料0円のオンラインスクール

トップ › 公開教材 › 開発環境

開発環境

開発環境の作り方：WSL の導入と、AI に環境構築を任せる方法

PHP や Node.js を動かす「環境構築」は、初心者がいちばん挫折しやすいところです。Windows なら WSL を入れるところまでを手動で行い、あとは Claude Code に任せる。その手順と参考プロンプトをまとめました。

更新日：2026-09-25

この記事で分かること

  • 環境構築が難しい理由と、「AI に任せる」という考え方
  • Windows に WSL（Ubuntu）を入れる手順（ここだけは手動です）
  • Mac の準備（ターミナルと Homebrew）
  • VS Code から WSL の中を開く方法
  • Claude Code に PHP・Composer・Node.js のインストールを任せる参考プロンプト
  • 環境ができたかを確かめるチェックリスト

所要時間は 60〜90 分（ダウンロードと再起動の待ち時間を含む）です。この記事のあとに続く PHP・Laravel の教材は、ここで作った環境を前提にしています。

環境構築は「AI に任せる」が正解

プログラミング学習で最初に心が折れるのは、文法ではなく 環境構築 です。理由ははっきりしています。

  • OS（Windows / Mac）、バージョン、すでに入っているものによって、正しい手順が変わる
  • 検索して出てくる記事は、書かれた時期によって手順が古い
  • エラーが出ても、何が悪いのか初心者には判断できない

ここに時間を使うのは、もったいないです。このスクールでは、環境構築は Claude Code に任せる ことをすすめています。Claude Code は、あなたのパソコンの状態を確かめながら、その環境に合ったコマンドを実行してくれます。あなたがやるのは「何をするコマンドか」の説明を読み、OK を出すことだけです。

ただし、AI が動く土台だけは自分で用意する必要があります。Windows なら WSL、Mac なら ターミナルと Homebrew です。ここからは、その土台の作り方です。

Windows：WSL（Ubuntu）を入れる

WSL とは

WSL（Windows Subsystem for Linux）は、Windows の中で Linux（Ubuntu）を動かすしくみです。Web のサーバーの大半は Linux で動いているので、学習環境を本番と同じ Linux にしておく と、教材どおりに動き、あとで公開するときにも困りません。PHP や Node.js のインストールも、Linux のほうが圧倒的に簡単です。

対応 OS は Windows 10（バージョン 2004 以降）または Windows 11 です。

手順

  1. スタートメニューで「PowerShell」を検索し、右クリック →「管理者として実行」 で開きます。
  2. 次のコマンドを入力して Enter を押します。
wsl --install
  1. 数分待つと「再起動してください」と出るので、パソコンを再起動します。
  2. 再起動後、自動で Ubuntu のウィンドウが開きます（開かなければスタートメニューから「Ubuntu」を起動）。最初に ユーザー名 と パスワード を聞かれます。
    • ユーザー名は半角英小文字（例：taro）
    • パスワードは入力しても画面に何も表示されませんが、打てています。2回入力します。
  3. 「Installation successful!」と出れば完了です。

確認は、PowerShell で次を実行します。VERSION が 2 になっていれば OK です。

wsl -l -v

最初にやっておくこと

Ubuntu のウィンドウで、次を実行してソフトを最新にします（sudo はパスワードを聞かれます）。

sudo apt update && sudo apt upgrade -y
sudo apt install -y git curl unzip build-essential

これで土台は完成です。

ファイルはどこに置く？

WSL の中には、Windows とは別のフォルダがあります。作業フォルダは Linux 側（/home/ユーザー名）に置いてください。Windows 側（/mnt/c/...）に置くと、動作が数倍遅くなります。

Windows のエクスプローラーから Linux 側のフォルダを見たいときは、Ubuntu で次を実行します。

explorer.exe .

Mac：ターミナルと Homebrew

Mac はもともと Linux に近いしくみなので、WSL は不要です。「ターミナル」アプリを開き、Homebrew（ソフトを入れる道具）だけ入れておきます。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

途中でパスワードを聞かれます。終わったら、画面に表示される「Next steps」のコマンド（echo ... >> ~/.zprofile のようなもの）も実行してください。確認は次のとおりです。

brew --version

VS Code から WSL を開く（Windows）

Windows 側の VS Code から、WSL の中のフォルダを直接編集できます。

  1. VS Code の拡張機能で WSL（Microsoft 製）を検索してインストール
  2. Ubuntu のウィンドウで、作業フォルダを作って移動し、code . と入力
mkdir -p ~/projects/mysite
cd ~/projects/mysite
code .

VS Code が開き、左下に「WSL: Ubuntu」と表示されていれば成功です。以後、この VS Code で作ったファイルは Linux 側に保存されます。ターミナル（Ctrl+@）も Ubuntu のものが開きます。

Claude Code を WSL の中に入れる

前の記事では Windows 側（PowerShell）に Claude Code を入れましたが、環境構築を任せるなら Ubuntu の中にも 入れておきます。Ubuntu のウィンドウ（または VS Code の WSL ターミナル）で次を実行します。

curl -fsSL https://claude.ai/install.sh | bash

一度ターミナルを閉じて開き直し、claude と入力してログインします（ログインの流れは前の記事と同じです）。Mac の方は、すでに入れてあるもので構いません。

ここからは AI に任せる：参考プロンプト

土台ができたら、あとは Claude Code に頼みます。ポイントは、「実行前に説明して、OK を待って」と頼む ことです。何をされるかわからないまま進めないための、大事な一言です。

PHP と Composer（Laravel の教材で使います）

この環境（Ubuntu 24.04 on WSL2）に、PHP 8.3 と Composer をインストールしたい。
Laravel を動かすのに必要な PHP の拡張（mbstring, xml, curl, zip, sqlite3 など）も一緒に。
実行する前に、何をするコマンドかを一覧で説明して、私が OK と言ってから進めて。
最後に php --version と composer --version の結果を見せて。

Mac の方は「この環境（macOS、Homebrew あり）」に置き換えてください。

Node.js（JavaScript の実行環境）

Node.js の LTS 版を、nvm を使ってインストールして。
インストール後に node --version と npm --version の結果を見せて。
実行前に手順を説明して、OK を待ってから進めて。

Git の初期設定

Git の初期設定（ユーザー名とメールアドレス）をしたい。
名前は「Taro Yamada」、メールは「taro@example.com」。設定コマンドと確認方法を教えて。

うまくいかなかったとき

さっきのコマンドで次のエラーが出た。原因と直し方を教えて。
（エラー文をそのまま貼る）

AI に任せるときのルール

  • 1つずつ進める。「PHP と Node と Git を全部入れて」ではなく、1つ終わって確認してから次へ。
  • sudo のコマンドは内容を読む。sudo は管理者権限で、システムを変更します。AI の説明を読んで、納得してから OK を出してください。
  • パスワードや API キーは AI に貼らない。パスワードの入力はターミナルで自分で行います。
  • わからないコマンドは聞く。「この apt install は何をするの？」と聞けば、教えてくれます。これが学習になります。

環境ができたかのチェックリスト

Ubuntu（または Mac のターミナル）で次を実行し、すべてバージョンが表示されれば完了です。

git --version
node --version
npm --version
php --version
composer --version
claude --version
  • git、node、npm が表示される
  • php が 8.2 以上
  • composer が表示される
  • claude が表示される
  • VS Code の左下に「WSL: Ubuntu」（Windows の場合）

つまずきやすいところ

症状 対処
wsl --install でエラー（仮想化が無効） パソコンの BIOS/UEFI で「Virtualization」（Intel VT-x / AMD-V）を有効にする。メーカーごとに入り方が違うので「機種名 BIOS 仮想化」で検索
Ubuntu が起動しない、古い PowerShell（管理者）で wsl --update を実行してから再起動
sudo でパスワードを入れても反応がない 表示されないだけで入力できています。打ち終わったら Enter
code . が動かない Windows 側に VS Code が入っているか、WSL 拡張機能が入っているかを確認。ターミナルを開き直す
動作が異常に遅い 作業フォルダが /mnt/c/ 以下にある。/home/ユーザー名/ 以下に移す
claude が見つからない インストール後にターミナルを開き直す

まとめ

  • 環境構築は AI に任せる。ただし、AI が動く土台（WSL / Homebrew）だけは自分で入れる。
  • Windows は wsl --install → 再起動 → ユーザー作成。Mac は Homebrew。
  • VS Code の WSL 拡張機能で、Linux 側のフォルダを直接編集。
  • Claude Code には「実行前に説明して、OK を待って」と頼む。1つずつ進める。

次は「PHP のきほん」です。作った環境で、サーバー側のプログラムを動かします。

公開教材の一覧へ