---
title: "プログラミング未経験者向け：Windowsで開発環境を作る"
url: "https://blog.101ta28.com/posts/windows-programming-setup/"
language: "ja"
description: "プログラミング未経験者向けに、Windows 11とWSLのUbuntuで開発環境を準備する。VS CodeでHTMLを書き、PHPで表示し、GitとGitHubに学習記録を残すまでを説明する。"
---

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

> プログラミング未経験者向けに、Windows 11とWSLのUbuntuで開発環境を準備する。VS CodeでHTMLを書き、PHPで表示し、GitとGitHubに学習記録を残すまでを説明する。

プログラミングを始めようとして、ソフトの名前や黒い画面に並ぶ文字で手が止まってしまう。
この記事ではターミナルという言葉を初めて聞く人に向けて、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ドライブを利用したい場合は、インストール前に[保存先についての補足](#wsl-storage)を読んでください。

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

### Windows Terminalを用意する

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

まず、スタートメニューで「ターミナル」を検索します。すでにWindows Terminalが入っていれば、そのまま使えます。
見つからなければ、[Microsoft StoreのWindows Terminal](https://apps.microsoft.com/detail/9n0dx20hk701?hl=ja-JP&gl=JP)をインストールしてください。

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

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

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

### VS Codeをインストールする

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

今回は[Visual Studio Codeのダウンロードページ](https://code.visualstudio.com/download)から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向け手順](https://code.visualstudio.com/docs/setup/windows)でも確認できます。

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

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

### PowerShellからインストールする

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

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

```powershell
wsl --install -d Ubuntu
```

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

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

```powershell
wsl -d Ubuntu
```

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

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

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

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

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

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

```text
learner@DESKTOP-XXXX:~$
```

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

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

**入力する場所：Ubuntu**

```bash
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が公開している配布一覧](https://raw.githubusercontent.com/microsoft/WSL/refs/heads/master/distributions/DistributionInfo.json)でも名前を確認できます。

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

```powershell
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で実行します。

```bash
cd ~
pwd
```

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

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

```text
/home/learner
```

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

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

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

```bash
sudo apt update
```

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

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

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

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

| 名前 | 開発環境での役割 |
| --- | --- |
| `php-cli` | コマンドからPHPを動かす。今回はブラウザーへページを返すためにも使う |
| `php-sqlite3` | PHPからSQLiteを利用するための追加機能 |
| `php-mbstring` | PHPで日本語などの文字列を扱うための追加機能 |
| `sqlite3` | データを保存するSQLiteをコマンドから操作する道具 |
| `git` | ファイルの変更履歴を記録する道具 |
| `gh` | GitHubをコマンドから操作する道具。GitHub CLIとも呼ぶ |

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

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

```bash
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向け導入手順](https://raw.githubusercontent.com/cli/cli/refs/heads/trunk/docs/install_linux.md)を使います。

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

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

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

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

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

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

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

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

| 書き方 | 意味 |
| --- | --- |
| `.` | 今いるディレクトリ |
| `..` | 一つ上のディレクトリ |
| `~` | 自分のホームディレクトリ。入力を処理する仕組みがホームのパスに置き換える |
| `/` | ディレクトリ全体の一番上。ルートディレクトリと呼ぶ |
| `./public` | 今いるディレクトリの中の `public` |
| `~/simple-application-manager/public` | ホームの中の作業場所を経由して指定する `public` |

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

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

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

```bash
cd public
pwd
cd ..
pwd
```

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

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

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

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

```bash
touch ./index.html
ls
```

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

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

```bash
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拡張機能](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl)をインストールします。

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

```bash
cd ~/simple-application-manager
code .
```

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

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

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

### PHP Intelephenseを追加する

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

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

## HTMLを書いて保存する

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

```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` を押します。

| キー | VS Codeの編集欄での操作 |
| --- | --- |
| `Ctrl+S` | ファイルを保存する |
| `Ctrl+Z` | 直前の編集を元に戻す |
| `Ctrl+Y` | 元に戻した編集をやり直す |

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

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

## PHPでページを表示する

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

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

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

| 指定 | 意味 |
| --- | --- |
| `-S` | 開発用のWebサーバーを起動する。大文字の `S` |
| `127.0.0.1` | 自分自身を指すアドレス |
| `8000` | 接続先を区別する番号であるポート番号 |
| `-t public` | ブラウザーに渡すファイルを探す場所を `public` にする |

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

```text
http://127.0.0.1:8000
```

「備品購入申請」という見出しと2つの文章が表示されれば成功です。
WSL内のWebサーバーにWindowsのブラウザーから接続する仕組みについては、[Microsoftのネットワークの説明](https://learn.microsoft.com/ja-jp/windows/wsl/networking)を参照できます。

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

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

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

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

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

| 状況 | 確認することと次の操作 |
| --- | --- |
| `Directory public does not exist` | 現在地が違う可能性がある。`pwd` と `ls` を確認し、`cd ~/simple-application-manager` で移動して起動し直す |
| ページが見つからない、404と出る | `ls ./public` で `index.html` があるか確認する。`.index.html` になっていたら、後半の「隠しファイル」の説明で名前を直す |
| 接続できない | PHPを起動したターミナルが開いているか、起動時にエラーが出ていないか、URLが `http://127.0.0.1:8000` か確認する |
| `Address already in use` | 同じ番号を別のサーバーが使っている。以前起動した自分のサーバーなら、そのターミナルで `Ctrl+C` を押して止める |
| 文章が変わらない | VS Codeで `public/index.html` を編集しているか確認し、保存してからブラウザーを再読み込みする |

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](https://github.com/)を開き、「Sign up」からアカウントを作ります。
画面の案内に沿ってユーザー名などを決め、メールの確認も済ませてください。
すでにアカウントがあれば、それを使えます。

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

GitHubの右上のプロフィール画像から「Settings → Emails」を開き、「Keep my email addresses private」を有効にします。
画面に表示される、自分の `noreply` アドレスをコピーしてください。
数字を含むものなど形式に違いがあるので、例を組み立てず、表示された値をそのまま使います。[GitHub公式のメール設定の説明](https://docs.github.com/ja/account-and-profile/how-tos/email-preferences/setting-your-commit-email-address)

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

```bash
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のユーザー名について](https://docs.github.com/ja/get-started/git-basics/setting-your-username-in-git)

設定を確認します。

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

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

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

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

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

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

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

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

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

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

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

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

```bash
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` を使います。

```bash
gh auth login
```

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

| 質問の内容 | 選ぶもの |
| --- | --- |
| どのGitHubにログインするか | `GitHub.com` |
| Gitの通信方法 | `HTTPS` |
| GitでもGitHubの認証を使うか | `Yes` |
| どうログインするか | `Login with a web browser` |

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

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

```bash
gh auth status
gh auth setup-git
```

`gh auth status` で、自分のGitHubアカウントにログインできていることを確かめます。
続く `gh auth setup-git` はGitからGitHubへ送るときにも `gh` の認証を利用する設定です。[認証設定コマンドの説明](https://cli.github.com/manual/gh_auth_setup-git)

### GitHub側にリポジトリを作る

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

```bash
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で公開先を作成](https://cli.github.com/manual/gh_repo_create)するので、先にGitHubの画面で同名のリポジトリを作る必要はありません。
同名のリポジトリがすでに存在して作成に失敗した場合は、コマンド中のリポジトリ名だけを、`simple-application-manager-practice` など未使用の名前に変えてください。手元のディレクトリ名はそのままで構いません。

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

```bash
git remote -v
```

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

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

```bash
git push -u origin main
```

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

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

```bash
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` を変更したときの流れは、次のようになります。

```bash
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**

```bash
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` のような指定を**オプション**と呼びます。
ここでは表示の仕方を変えます。

| コマンド | 表示するもの |
| --- | --- |
| `ls` | 通常のファイルやディレクトリ |
| `ls -a` | 隠しファイルも含めた一覧。`.` と `..` も表示される |
| `ls -l` | 大きさや更新日時などの詳細 |
| `ls -al` | 隠しファイルも含めた詳細 |

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

```bash
mv ./.index.html ./index.html
```

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

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

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

```bash
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` が表示されます。
次に名前を変え、詳細を見てから削除します。

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

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

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

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

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

## 補足：Cドライブの空き容量が少ない場合 {#wsl-storage}

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

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

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

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

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

その後の再起動、Ubuntuのユーザー作成は本文と同じです。
`--location` は[Microsoftが案内しているインストール先の指定](https://learn.microsoft.com/ja-jp/windows/wsl/basic-commands)です。
Ubuntu内での `/home/ユーザー名` という見え方は、保存先がDドライブでも変わりません。

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

インストール済みのUbuntuはWSLの `--manage --move` で保存先を移せます。[WSLの機能追加記録](https://github.com/microsoft/WSL/releases/tag/2.3.11)

**入力する場所：WindowsのPowerShell**

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

```powershell
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ドライブにはバックアップと移動するデータの両方を置ける空き容量が必要です。

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

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

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

```powershell
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` は削除、と結果を分けて扱います。
実行前に結果を予想し、実行後に確かめる習慣を付けることが大切です。

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

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

| 区切り | 学習者に確かめてもらうこと |
| --- | --- |
| Ubuntuの起動後 | いま入力しているのはPowerShellかUbuntuか |
| ディレクトリ作成後 | `pwd` の表示のうち、ユーザー名と作業場所の名前はどこか |
| `cd public` の前後 | `.` が指す場所はどう変わったか |
| HTMLの編集後 | どこを変えると、ページのどの文章が変わるか |
| ブラウザー表示後 | 保存しただけで表示が変わらないとき、次に何をするか |
| コミット後 | PC内への記録とGitHubへの送信は、どの操作で行ったか |
| 環境構築の完了時 | 画面を閉じた状態から、ページ表示まで再開できるか |

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

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