プログラミング未経験者向け：Windowsで開発環境を作る

プログラミングを始めようとして、ソフトの名前や黒い画面に並ぶ文字で手が止まってしまう。 この記事ではターミナルという言葉を初めて聞く人に向けて、Windowsに開発環境を用意する手順を説明します。

WSLのUbuntuでLinuxのコマンドを使い、VS CodeでHTMLを書き、PHPの開発用サーバーで表示します。 作成したページと変更履歴をGitHubへ公開し、作業を終了してから開き直すところまで進めます。

本文は一人で読み進める学習者向けの手順です。 プログラミングを教える人に向けて、用語の説明方法と理解を確かめる問いを後半にまとめています。

この記事でできるようになること

環境を準備しながら、次の操作を確かめます。

1. WindowsでUbuntuを起動する。
2. コマンドでフォルダーを作り、その場所をVS Codeで開く。
3. HTMLを書いて保存し、自分のブラウザーで表示する。
4. Gitで変更を記録し、GitHubに送る。
5. いったん終了して、同じ作業場所を開き直す。

題材は備品の購入申請管理アプリの案内ページです。 この記事で作るのは、見出しと文章を表示するHTMLページです。購入申請を入力・保存する機能は含めません。

手順の前提はWindows 11とWSL上のUbuntu 26.04です。 インターネット接続と、Windowsでアプリのインストールや管理者操作ができる環境を用意します。 会社や学校が管理するPCで操作を制限されている場合は、管理者にWSLを利用できるか確認してください。

エクスプローラーの「PC」で、Cドライブの空き容量も確認します。 空き容量が少なく、Dドライブを利用したい場合は、インストール前に保存先についての補足 を読んでください。

Windowsに操作するための道具を入れる

Windows Terminalを用意する

普段はアイコンやメニューをクリックしてPCを操作します。 開発では文字で指示を入力する場面もあります。その指示をコマンド、入力と結果の表示に使うアプリをターミナルと呼びます。

まず、スタートメニューで「ターミナル」を検索します。すでにWindows Terminalが入っていれば、そのまま使えます。 見つからなければ、Microsoft StoreのWindows Terminal をインストールしてください。

Windows Terminalには複数のタブを開く機能があります。 タブの中で動くPowerShellやUbuntuが、入力した指示を受け取って処理します。 この記事では、Windows側の設定はPowerShell、開発のコマンドはUbuntuで実行します。

ターミナルでも、タブの切り替えや文字のコピーにはマウスを使えます。 コマンドを入力したら、最後に Enter キーを押して実行します。 以降のコード欄は、特に断りがなければ1行ずつ実行してください。

コマンドは半角の英数字と記号で入力し、途中のスペースも省略しません。 最初はコード欄をコピーして構いません。Windows Terminalでは Ctrl+Shift+V で貼り付けられます。 実行後に何も表示せず、次の入力待ちへ戻るコマンドもあります。成功したかは手順に沿って結果を確かめて判断します。

VS Codeをインストールする

プログラムを書くには、文字を編集するアプリであるテキストエディタを使います。 紙とペンに例えるなら、書くための道具にあたります。 Windowsのメモ帳でも書けますが、開発用のエディタには入力候補の表示や間違いの発見を助ける機能があります。

今回はVisual Studio Codeのダウンロードページ からWindows版をインストールします。 以降は「VS Code」と呼びます。

Windowsの「設定 → システム → バージョン情報」でシステムの種類を確認し、Intel・AMDのPCならx64、ArmのPCならArm64のUser Installerを選びます。 インストーラーの「PATHへの追加」は有効にしてください。 これはあとでUbuntuから code という名前でVS Codeを呼び出すための設定です。

VS CodeはWindows側に入れます。Ubuntuの中に別のVS Codeを入れる必要はありません。 セットアップの種類はVS Code公式のWindows向け手順 でも確認できます。

WSLでUbuntuを使えるようにする

Linuxは、Windowsと同じく、PCを動かす基本ソフトであるOSの一種です。 UbuntuはLinuxを利用しやすい形にまとめたものです。 今回はLinuxのコマンドも学ぶため、Windowsの中でUbuntuを使えるWSLという仕組みを利用します。

PowerShellからインストールする

作業中のファイルを保存してから、スタートメニューで「ターミナル」を右クリックし、「管理者として実行」を選びます。 Windowsの確認画面で許可し、PowerShellのタブを開いてください。

入力する場所：Windows TerminalのPowerShell（管理者）

wsl --install -d Ubuntu

--install はインストール、-d Ubuntu は導入するLinuxとしてUbuntuを選ぶ指定です。 処理が終わったら、Windowsを再起動します。再起動を求める表示が出た場合も、その案内に従ってください。 これはMicrosoftのWSL導入手順 に沿った操作です。

再起動後にUbuntuの初期設定が始まらなければ、スタートメニューから通常の権限でターミナルを開き、PowerShellで次を実行します。

wsl -d Ubuntu

Ubuntuのインストールが未完了と表示された場合は、管理者のPowerShellで先ほどのインストールコマンドを再実行します。 エラーコードが出た場合はその表示を控え、WSLのトラブルシューティング の該当項目を確認します。 たとえば仮想化の有効化を求められた場合は、PCメーカーの案内に沿って設定を変更します。

Ubuntu用のユーザー名とパスワードを作る

最初の起動時に、Ubuntu用のユーザー名とパスワードを設定します。 WindowsやGitHubのアカウントとは別のものです。

ユーザー名は英小文字で始め、英小文字と数字で作ると入力しやすくなります。 この記事では説明用に learner を使いますが、自分の名前を決めて構いません。 入力が拒否されたら、表示された条件に合わせて修正してください。

入力したパスワードは画面に表示されず、● などの記号も出ません。 入力できていないように見えても、そのまま入力して Enter を押します。 確認のため、もう一度同じパスワードを入力します。 このパスワードはあとでUbuntuにソフトを追加するときにも使います。

設定が終わると、次のような表示が出ます。名前やPC名は人によって変わります。

learner@DESKTOP-XXXX:~$

これは次の入力を待っていることを示すプロンプトです。 learner はユーザー名、DESKTOP-XXXX はPCの名前です。末尾の $ までを自分で入力する必要はありません。 これから使うコマンド欄には入力する部分だけを載せます。

Ubuntuの種類とバージョンを確かめる

入力する場所：Ubuntu

cat /etc/os-release

cat は指定したファイルの内容を表示するコマンドです。 ここではOSの情報を読み、VERSION_ID="26.04" を確認します。

Ubuntu という名前で導入されるバージョンは、配布時期によって変わります。 26.04以外だった場合は、PowerShellで wsl --list --online を実行し、一覧の NAME 列に Ubuntu-26.04 があるか確認してください。

同じバージョンを用意する場合は、管理者のPowerShellで wsl --install -d Ubuntu-26.04 を実行し、以降のWindows側のコマンドでは Ubuntu を Ubuntu-26.04 に読み替えます。 元のUbuntuを削除する必要はありません。Microsoftが公開している配布一覧 でも名前を確認できます。

PowerShellのタブで、WSLの状態も確認します。

wsl --list --verbose

使うUbuntuの行で、VERSION が 2 なら、この先の手順に進めます。 この数字はUbuntuの26.04とは別で、WSLの方式を示します。 1 だった場合は、作業中のUbuntuを閉じてからPowerShellで wsl --set-version Ubuntu 2 を実行し、完了後に再確認してください。

ここまで終わったら、管理者として開いたターミナルは閉じます。 以降は通常のターミナルを開き、上部のタブ横にある下向きのメニューからUbuntuを選びます。 メニューに見つからなければ、PowerShellから wsl -d Ubuntu で開けます。

Ubuntuで今いる場所を確かめる

ディレクトリと現在地

開発ではフォルダーをディレクトリと呼ぶことがあります。 ファイルを入れる箱と考えると、最初は理解しやすいと思います。 箱の中に別の箱を入れられるように、ディレクトリの中にもディレクトリを作れます。

ターミナルにも「今いるディレクトリ」があり、カレントディレクトリと呼びます。 これは画面上の見た目だけでは分からないので、コマンドで確かめます。

入力する場所：Ubuntu

ここから先は、PowerShellと明記した箇所以外はUbuntuで実行します。

cd ~
pwd

cd は作業するディレクトリを移動するコマンドです。 ~ は自分用の作業場所であるホームディレクトリを表します。 pwd は「print working directory」の略で、今いる場所を表示します。

ユーザー名を learner にした場合の表示例です。

/home/learner

これがそのUbuntuでのホームディレクトリです。 Windowsの C:\Users\... とは別の場所です。今回はUbuntuのホームディレクトリの中にファイルを置きます。

PHPなど開発に必要なソフトを入れる

Ubuntuのソフトを管理する apt コマンドで、必要なものをまとめて導入します。 まず、入手できるソフトの一覧を更新します。

sudo apt update

sudo は続くコマンドを管理者の権限で実行するためのものです。 ここではUbuntu全体にソフトを入れるために使います。 パスワードを求められたら、先ほど作ったUbuntu用のパスワードを入力してください。ここでも入力文字は表示されません。

一覧の更新がエラーなく終わったら、次を実行します。

sudo apt install -y php-cli php-sqlite3 php-mbstring sqlite3 git gh

install はソフトの導入、-y はインストール中の確認に自動で「はい」と答える指定です。 後ろに並んでいるのが、導入するソフトの名前です。

SQLiteは購入申請などのデータを保存するために使えます。 HTMLページの表示では使いませんが、データを扱うアプリを開発できるよう、PHPから利用できるところまで準備します。 gh はUbuntu 26.04で提供されているパッケージ を使います。

導入後は次のコマンドを1行ずつ実行します。

php --version
sqlite3 --version
git --version
gh --version
php -m

最初の4つでは、ソフト名やバージョン番号が表示されれば、そのコマンドを呼び出せています。 最後の php -m はPHPの追加機能の一覧を表示します。mbstring、pdo_sqlite、sqlite3 があることを確認します。

command not found はそのコマンドが見つからないという意味です。 まず入力先がUbuntuであることを確かめ、インストール時にエラーが出ていないか読み直してください。 Unable to locate package gh が出る場合は、Ubuntuのバージョンと sudo apt update の結果を確認し、必要に応じてGitHub CLI公式のLinux向け導入手順 を使います。

開発用のディレクトリを作る

購入申請管理アプリの作業場所を、ホームディレクトリの中に作ります。 simple-application-manager はこの記事で使うディレクトリ名です。

mkdir -p ~/simple-application-manager/public
cd ~/simple-application-manager
pwd
ls

mkdir は「make directory」、つまりディレクトリを作るコマンドです。 -p を付けると、途中に必要なディレクトリもまとめて作れます。 ls は今いるディレクトリの中身を表示します。

pwd では /home/自分のユーザー名/simple-application-manager、ls では public が表示されれば、作業場所を用意できています。 今の構造を図にすると、次のようになります。

/home/learner/                  ← ホームディレクトリ
└── simple-application-manager/ ← 今いる場所
    └── public/                ← ブラウザーに渡すファイルを置く場所

パスの記号 .・~・/ の違い

ファイルやディレクトリの場所を表す文字列を、パスと呼びます。 今いる場所からたどる書き方が相対パス、一番上の / からたどる書き方が絶対パスです。

ホームディレクトリとルートディレクトリは別の場所です。 ~ はホームへの省略表記なので、今いる場所が変わっても同じホームを指します。 一方、. の指す場所は cd で移動するたびに変わります。

例えば /home/learner/simple-application-manager にいるとき、./public と /home/learner/simple-application-manager/public は同じ場所です。 cd public で中に入ったあとは、同じ public を . と書けます。

実際に移動し、表示の変化を確かめます。

cd public
pwd
cd ..
pwd

最後に /home/自分のユーザー名/simple-application-manager へ戻っていれば、この先に進めます。

ファイルを作ってVS Codeで開く

空のファイルを作って移す

作業場所で次を実行します。

touch ./index.html
ls

touch は、指定したファイルがなければ空のファイルを作ります。 同名のファイルがすでにある場合は日時を更新し、中身は空にしません。 ls に index.html と public が表示されることを確認します。

index.html をブラウザーに渡すファイル用の public に移します。

mv ./index.html ./public/
ls ./public

mv は「move」、移動するコマンドです。mv 移動元 移動先 の順で指定します。 今回は public の中に同名のファイルがない状態で実行します。 ls ./public に index.html が表示されれば移動できています。

VS CodeをUbuntuにつなぐ

WindowsでVS Codeを開き、左側の「拡張機能（Extensions）」を選びます。 拡張機能はVS Codeに追加する機能です。 検索欄で ms-vscode-remote.remote-wsl を検索し、Microsoftが提供するWSL拡張機能 をインストールします。

その後、Ubuntuのターミナルへ戻ります。現在地を確認してからVS Codeを開きます。

cd ~/simple-application-manager
code .

code はVS Codeを呼び出すコマンド、. は今いるディレクトリです。 つまり「今いるディレクトリをVS Codeで開く」という指示です。 初めてUbuntuへ接続するときは、必要なものがダウンロードされるので、完了を待ちます。

作業場所を信頼するか聞かれたら、自分で作った simple-application-manager を開いていることを確認して許可します。 左下に WSL: Ubuntu のような表示があり、左側のエクスプローラーに public が見えれば、Ubuntu内のフォルダーを開けています。 これはWindowsのエクスプローラーとは別で、VS Code内のファイル一覧です。公式のWSL接続手順 も参照できます。

code: command not found と出た場合は、VS Codeのインストール時にPATHへの追加を有効にしたか確認し、ターミナルを開き直してください。 左下にWSLの表示がない場合は、WSL拡張機能を確認し、Ubuntuから code . を実行し直します。

PHP Intelephenseを追加する

WSLにつながったVS Codeの拡張機能画面で、bmewburn.vscode-intelephense-client を検索します。 PHP Intelephense をインストールし、「WSL: Ubuntuにインストール」と表示される場合はそのボタンを選びます。 拡張機能の一覧で、WSL側に入ったことを確認してください。

PHPを書くときに入力候補を出したり、間違いを見つけたりするための拡張機能です。 無料で使える範囲を利用します。別のPHP拡張機能をすでに入れている場合は、入力補完などが重ならないよう無効にします。

HTMLを書いて保存する

VS Codeのエクスプローラーで public を開き、その中の index.html をクリックします。 右側の編集欄に、次の内容を貼り付けてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>備品購入申請 | HTMLの練習</title>
</head>
<body>
    <main>
        <h1>備品購入申請</h1>
        <p>備品の購入申請を管理するWebアプリを作ります。</p>
        <p>HTMLで見出しと文章を表示しています。</p>
    </main>
</body>
</html>

HTMLは、見出しや段落など、ページの構造を表すための書き方です。 <h1> と </h1> で囲んだ部分が大きな見出し、<p> と </p> で囲んだ部分が文章の段落になります。 こうした <...> の印をタグと呼びます。

head の中は文字の扱い方やページのタイトルなどの情報、body の中はページに表示する内容です。 <title> の文字はブラウザーのタブに、<h1> の文字はページ内に表示されます。 ここでは見出しと文章の場所を見つけ、自分で内容を変更して表示を確かめます。

最初に使う3つのショートカット

ショートカットはキーの組み合わせで操作する方法です。 Ctrl+S なら、Ctrl を押しながら S を押します。

今貼り付けたHTMLを Ctrl+S で保存してください。 ファイルのタブに未保存を示す丸印があれば、それが消えることを確認します。

試しに見出しの末尾に「の練習」と書き足し、Ctrl+Z で戻し、Ctrl+Y でもう一度現れることを確かめます。 最後は Ctrl+Z で元の「備品購入申請」に戻し、保存します。 これはWindows版VS Codeの既定のショートカット です。キー設定を変更している場合は、メニューの「編集（Edit）」でも操作を確認できます。

PHPでページを表示する

ブラウザーからの要求を受け取り、ファイルなどを返すプログラムをWebサーバーと呼びます。 PHPには、開発中の確認用に小さなWebサーバーが付属しています。今回はこれを使ってHTMLを表示します。

入力する場所：Ubuntuのターミナル

cd ~/simple-application-manager
php -S 127.0.0.1:8000 -t public

Development Server や started を含む表示が出ると、サーバーが動き始めています。 この間は入力待ちの $ が戻ってこなくて正常です。 ターミナルをそのままにして、WindowsのEdgeやChromeを開きます。 ブラウザー上部のアドレス欄に、次を入力してください。

http://127.0.0.1:8000

「備品購入申請」という見出しと2つの文章が表示されれば成功です。 WSL内のWebサーバーにWindowsのブラウザーから接続する仕組みについては、Microsoftのネットワークの説明 を参照できます。

ここではPHPのサーバーがHTMLファイルを返しています。 購入申請を処理するPHPのプログラムはまだ書いていません。 また、このサーバーは開発時の確認用です。インターネットにアプリを公開する手順とは異なります。PHP公式の説明

保存してブラウザーを再読み込みする

VS Codeで2つ目の段落を、例えば「自分のPCでページを表示できました。」に変更します。 Ctrl+S で保存してから、ブラウザーの再読み込みボタンを押してください。 ページの文章が変われば、編集から表示までの流れを確認できています。

今回の構成では、保存するだけでブラウザーの表示は自動更新されません。 編集する → 保存する → ブラウザーを再読み込みするという順番で確認します。 自動更新する機能を備えた開発ツールもありますが、ここでは手動で更新します。

表示されないときに確かめる場所

8000番を使っているものが分からない場合は、php -S 127.0.0.1:8001 -t public として起動し、ブラウザーも http://127.0.0.1:8001 に揃えます。

サーバーを止める

表示を確認できたら、PHPを起動したターミナルをクリックして Ctrl+C を押します。 ここでの Ctrl+C は実行中の処理を止める操作です。 入力待ちのプロンプトが戻れば、停止できています。編集したファイルは残ります。

このあとはそのターミナルを使って履歴を記録します。

Gitで最初の変更を記録する

ファイルを保存すると、その時点の内容がPCに残ります。 ただ、編集を重ねたあとで「昨日はどう書いていたか」「何を直したか」を知りたい場面もあります。 そこで、変更の区切りごとに記録を残せるGitを使います。

Gitで記録した履歴を、インターネット上に置けるサービスがGitHubです。 GitHubではその履歴やコードを人と共有できます。 両者は別のもので、Gitで記録しただけではGitHubへ送られません。

GitHubのアカウントと記録に使う名前を用意する

ブラウザーでGitHub を開き、「Sign up」からアカウントを作ります。 画面の案内に沿ってユーザー名などを決め、メールの確認も済ませてください。 すでにアカウントがあれば、それを使えます。

Gitの履歴には、変更した人の名前とメールアドレスが記録されます。 個人のメールアドレスをコードと一緒に公開しないため、ここではGitHubが提供する noreply アドレスを使います。

GitHubの右上のプロフィール画像から「Settings → Emails」を開き、「Keep my email addresses private」を有効にします。 画面に表示される、自分の noreply アドレスをコピーしてください。 数字を含むものなど形式に違いがあるので、例を組み立てず、表示された値をそのまま使います。GitHub公式のメール設定の説明

Ubuntuで、次の大文字の部分を自分の値に置き換えて実行します。両端の " は残します。

git config --global user.name "YOUR_GITHUB_NAME"
git config --global user.email "YOUR_NOREPLY_EMAIL"
git config --global init.defaultBranch main

YOUR_GITHUB_NAME はGitHubのユーザー名、YOUR_NOREPLY_EMAIL は設定画面からコピーしたアドレスです。 --global はこのUbuntuのユーザーが使うGitの共通設定にする指定です。

user.name は履歴に表示する名前なので、GitHubのユーザー名と同じである必要はありませんが、今回は揃えます。 この設定はGitHubへのログインではありません。Gitの名前とGitHubのユーザー名について

設定を確認します。

git config --global user.name
git config --global user.email

自分の値が表示されれば設定できています。大文字の置き換え用文字列が残っていたら、設定コマンドを正しい値で実行し直してください。

このディレクトリの履歴管理を始める

cd ~/simple-application-manager
git init
git status

git init はこのディレクトリでGitの履歴管理を始めるコマンドです。 ファイルとその履歴を管理するまとまりをリポジトリと呼びます。 この操作は作業場所を作った最初に1回行います。

git status は記録されていない変更など、現在の状態を表示します。 ここでは main という名前と、まだ記録対象になっていない public/ が表示されます。 main は履歴の流れを表すブランチの名前です。今回はこの1本を使います。

記録するファイルを選んで内容を確かめる

git add public/index.html
git diff --cached

git add は次の記録に入れるファイルの変更を選びます。この準備をステージングと呼びます。 git diff --cached は選んだ変更内容を表示します。 今回は新しいファイルなので、書いたHTMLが追加として表示されます。

ここで、記録するものが public/index.html であることを確かめます。 表示が長くなって入力待ちに戻らない場合は、閲覧用の画面が開いていることがあります。 その場合は q キーで閲覧を終えます。

メッセージを付けてコミットする

変更内容に説明を付けて履歴に残す操作をコミットと呼びます。

git commit -m "学習用のHTMLページを追加"
git log -1 --oneline
git status

-m の後ろに書いた文章がこの変更の説明です。 git log -1 --oneline は最新の記録を1件、1行で表示します。 英数字の並びと「学習用のHTMLページを追加」が表示されれば、コミットができています。

最後の git status に nothing to commit, working tree clean と表示されれば、記録後に未記録の変更はありません。 ただし、この時点では記録は自分のPCの中にあります。次にGitHubへ送ります。

GitHubにコードと履歴を公開する

ここで公開するのは書いたコードと変更履歴です。 ブラウザーで動くアプリ自体をインターネットへ公開する作業は、今回の範囲には含めません。

GitHub CLIからログインする

Ubuntuで、先ほど導入した gh を使います。

gh auth login

質問が順に表示されるので、上下の矢印キーで選び、Enter で確定します。 表示文はバージョンによって変わることがありますが、次の内容を選びます。

ターミナルに一時的なコードと案内が表示されます。 案内に従ってブラウザーを開き、GitHubにログインしたうえで、そのコードを入力してGitHub CLIを認証します。 このコードは今回のログインを進めるためのものです。記事や学習記録には貼り付けません。

WSLからブラウザーが自動で開かない場合は、ターミナルに表示されたURLをWindowsのブラウザーで開いて続けます。 認証後はUbuntuのターミナルに戻り、完了の表示を確認してください。 これはGitHub CLIのブラウザー認証 を使う手順です。

gh auth status
gh auth setup-git

gh auth status で、自分のGitHubアカウントにログインできていることを確かめます。 続く gh auth setup-git はGitからGitHubへ送るときにも gh の認証を利用する設定です。認証設定コマンドの説明

GitHub側にリポジトリを作る

今回は学習記録を外部に見せるため、公開リポジトリを作ります。 公開すると、誰でもコードと履歴を読めます。先ほどのHTMLと作者情報を確認してから進めてください。 実在する人の購入申請やパスワードは教材のコードに入れません。

cd ~/simple-application-manager
gh repo create simple-application-manager --public --source=. --remote=origin

simple-application-manager がGitHub上のリポジトリ名です。 --public は公開、--source=. は今いるディレクトリを元にする指定です。 --remote=origin はGitHub側の送信先に origin という呼び名を付けます。

この手順ではGitHub CLIで公開先を作成 するので、先にGitHubの画面で同名のリポジトリを作る必要はありません。 同名のリポジトリがすでに存在して作成に失敗した場合は、コマンド中のリポジトリ名だけを、simple-application-manager-practice など未使用の名前に変えてください。手元のディレクトリ名はそのままで構いません。

作成できたら、送信先を確認します。

git remote -v

origin の行に、自分のGitHubユーザー名と、今作成したリポジトリ名を含むURLが表示されることを確かめます。 fetch と push の2行が出るのは、受け取り先と送り先の両方が表示されているためです。

コミットを送信してブラウザーで確かめる

git push -u origin main

push は手元のコミットを送信する操作です。 origin main は origin という送信先へ main の履歴を送る指定です。 最初の送信時に -u を付けて対応を記録すると、このブランチでは以後 git push だけで送れます。

エラーなく終わったら、GitHubのページを開きます。

gh repo view --web

自動でブラウザーが開かない場合は gh repo view を実行し、表示されたリポジトリのURLをWindowsのブラウザーで開きます。 public/index.html の内容と「学習用のHTMLページを追加」というコミットメッセージが見えれば、公開まで完了です。

送信が失敗した場合は、まず gh auth status と git remote -v で、ログイン先と送信先を確かめます。 src refspec main does not match any と表示された場合は、git log -1 --oneline でコミットがあるか、git status でブランチ名が main かを確認します。 コミットがなければ、前の「Gitで最初の変更を記録する」から実行してください。

編集後の変更を記録する

HTMLやPHPを編集したら、保存しただけで終えず、変更した内容を確認してコミットします。 例えば public/index.html を変更したときの流れは、次のようになります。

git status
git diff
git add public/index.html
git diff --cached
git commit -m "変更した内容が分かる説明を書く"
git push

コミットメッセージには記録する変更内容を書きます。 git diff はまだステージングしていない変更を、git diff --cached は次のコミットに入る変更を表示します。 編集をしていない場合は、新しいコミットを作る必要はありません。

作業を終了して開発環境を開き直す

画面を閉じた状態から、同じ作業を再開できるか確かめます。 VS Codeでファイルを保存し、PHPのサーバーが動いていれば、そのターミナルで Ctrl+C を押して止めます。 VS Codeとターミナルを閉じてください。

今度は自分でスタートメニューからターミナルを開き、Ubuntuを選びます。 Ubuntuが見つからなければ、PowerShellで wsl -d Ubuntu を実行します。

入力する場所：Ubuntu

cd ~/simple-application-manager
pwd
code .
php -S 127.0.0.1:8000 -t public

ブラウザーで http://127.0.0.1:8000 を開き、保存したページが表示されることを確かめます。 次の点を確認してみてください。

• pwd の結果から、どこで作業しているか分かる。
• VS Codeで開いているのが、Ubuntu内の作業場所だと確認できる。
• 文章を変え、保存してブラウザーを再読み込みすると、変更が見える。
• GitHubに、最初のHTMLとコミットが残っている。
• PHPのサーバーを止め、同じコマンドで再び起動できる。

確認が済んだら、サーバーを Ctrl+C で止めます。 ページを編集して表示し、変更履歴を記録できる開発環境が整いました。

補足：隠しファイルと削除の練習

./index.html のつもりで ./.index.html と入力すると、指定しているディレクトリが同じでも、ファイル名が変わります。

./ は今いるディレクトリを示し、残りがファイル名です。 ./.index.html では、ファイル名の先頭にも . が付いています。 Ubuntuではこのような名前のファイルを隠しファイルとして、通常の ls では表示しません。

ls にオプションを付ける

コマンドに付ける -a や -l のような指定をオプションと呼びます。 ここでは表示の仕方を変えます。

作ったはずの index.html が見当たらない場合は、まず pwd で場所を確かめてから ls -a を実行します。 作業ディレクトリに .index.html があり、index.html がない場合は、次のように名前を直せます。

mv ./.index.html ./index.html

mv は同じディレクトリの中で名前を変えるときにも使います。 すでに public の中へ入れていた場合は、ls -a ./public で確認し、public/index.html が存在しないことを確かめてから mv ./public/.index.html ./public/index.html とします。 これで、書いた内容を残したまま名前を直せます。

練習用のファイルだけを消す

削除には rm コマンドを使います。通常、rm で消したファイルはWindowsのごみ箱には入りません。 今回はアプリのHTMLを消さず、空の練習用ファイルを作って操作を確かめます。

cd ~
mkdir command-practice-01
cd command-practice-01
pwd
touch ./.practice.txt
ls
ls -a

mkdir で「すでに存在する」と表示された場合は、別の未使用の練習用ディレクトリ名に変え、cd の名前も揃えます。 pwd がその練習場所を示していることを確認してから touch に進んでください。

通常の ls には出ず、ls -a には .practice.txt が表示されます。 次に名前を変え、詳細を見てから削除します。

mv ./.practice.txt ./practice.txt
ls -l
rm ./practice.txt
ls -a

削除するのは今作った空の practice.txt です。 最後の ls -a で . と .. だけになっていれば、練習用ファイルを削除できています。

空になった練習場所も片付けます。rmdir は空のディレクトリを削除するコマンドです。

cd ~
rmdir command-practice-01
cd ~/simple-application-manager

練習場所の名前を変えた場合は、rmdir の指定も同じ名前にします。 空ではないというエラーが出たら、中身を確認してください。アプリの作業場所を削除する必要はありません。

補足：Cドライブの空き容量が少ない場合

UbuntuのファイルはWindowsのドライブ上に保存されます。 Cドライブの空き容量が少なく、Dドライブには余裕がある場合は、Ubuntuの保存先をDドライブに指定できます。

これからインストールする場合

新規のインストールでは最初から保存先を指定できます。 管理者のPowerShellで wsl --help を実行し、--install の説明に --location があることを確認します。 なければ wsl --update を実行してから確認し直します。

エクスプローラーでDドライブに wsl というフォルダーを作り、その中の Ubuntu が未使用であることを確認してください。 本文のインストールコマンドの代わりに、次を使います。

wsl --install -d Ubuntu --location "D:\wsl\Ubuntu"

その後の再起動、Ubuntuのユーザー作成は本文と同じです。 --location はMicrosoftが案内しているインストール先の指定 です。 Ubuntu内での /home/ユーザー名 という見え方は、保存先がDドライブでも変わりません。

すでにインストールしたUbuntuを移す場合

インストール済みのUbuntuはWSLの --manage --move で保存先を移せます。WSLの機能追加記録

入力する場所：WindowsのPowerShell

以下は登録名が Ubuntu の場合です。

wsl --list --verbose
wsl --help

一覧で対象の名前を確認し、ヘルプに --manage と --move があることを確かめます。 なければ wsl --update を実行します。更新後も見つからなければ、登録解除のコマンドで代用せず、WSLの更新ができない原因を確認してください。

移動前にVS Codeのファイルを保存し、Ubuntuで実行中の処理を止めて、Ubuntuにつながった画面を閉じます。 エクスプローラーで D:\wsl-backup と D:\wsl を用意し、D:\wsl-backup\Ubuntu.tar と移動先の D:\wsl\Ubuntu が未使用であることを確認します。 Dドライブにはバックアップと移動するデータの両方を置ける空き容量が必要です。

wsl --shutdown
wsl --export Ubuntu "D:\wsl-backup\Ubuntu.tar"

--shutdown はほかのUbuntuなども含めてWSLを停止します。別の作業が動いている場合は、それも保存・終了してから実行してください。 書き出しの成功表示と、エクスプローラーにバックアップファイルがあることを確認します。 エラーが出た場合は移動へ進まず、書き出しを完了させます。

次に、保存先を移します。

wsl --manage Ubuntu --move "D:\wsl\Ubuntu"
wsl -d Ubuntu

Ubuntuが開いたら、whoami で自分のユーザー名、cd ~ と pwd でホームを確認します。 すでにアプリを作っていた場合は cd ~/simple-application-manager と ls でファイルを確認し、本文の再開手順でページも表示します。 移動先にデータがあることとUbuntuの動作を確かめるまで、バックアップは残してください。

指導者向け：操作の成功と理解を確かめる

画面を開くところから本人に操作してもらう

操作に成功したかどうかと、操作を理解しているかどうかを分けて確かめます。

ターミナルは「コマンドを入力し、結果を見るためのもの」、エディタは「紙とペンのような、書くための道具」と説明できます。 ディレクトリの構造を説明するときは、箱やマトリョーシカなど、入れ子になるものが例えになります。

たとえを使ったあとには実際の画面へ戻ります。 pwd がどの場所を示し、VS Codeのファイル一覧のどこが同じ場所にあたるか、本人に指してもらうと確認しやすくなります。 分からないときは、さらに用語を増やすより、cd の前後で表示を見比べるところへ戻ります。

「ターミナルは怖くない」と伝えるときも、何を実行しても安全だという説明にはしません。 pwd と ls は確認、mkdir と touch は作成、mv は移動や名前変更、rm は削除、と結果を分けて扱います。 実行前に結果を予想し、実行後に確かめる習慣を付けることが大切です。

区切りごとに短い確認を挟む

全コマンドの暗記を最初の合格条件にする必要はありません。 記事を見ながらでも、入力する場所を選び、結果を確かめて先へ進めるかを見ます。

.index.html を作った場面も、正しいコマンドを代わりに打つだけで終えず、ls と ls -a の違いを見せる機会になります。 同時に、名前の先頭の . と、パスの ./ は別の役割だと確かめます。

全員に同じ時間で終えるよう求めず、「ページが表示された」「履歴がGitHubに残った」「自分で再開できた」という区切りで進み具合を確かめます。