昔Gitの資料を作ろうとして途中かけのやつをとりあえず出しておきます。#20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
harutiro wants to merge 3 commits into
base:main
Choose a base branch
from
Draft

昔Gitの資料を作ろうとして途中かけのやつをとりあえず出しておきます。 #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1de4340
とりあえずAIにお願いして、骨組みだけ作成
harutiro Feb 4, 2026
d2d6871
cli版を追加
harutiro Feb 4, 2026
2e75259
とりあえず、mdx化に成功した
harutiro Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions astro.config.mjs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -93,6 +93,17 @@ export default defineConfig({
// },
// ],
// },
{
label: "Git・GitHub",
link: "/textbook/git/version-control",
icon: "seti:git",
items: [
{
label: "Git入門",
autogenerate: { directory: "textbook/git" },
},
],
},
{
label: "Web",
link: "/textbook/web/for-classes/html-structure-basic",
Expand Down
91 changes: 91 additions & 0 deletions src/content/docs/textbook/git/01--version-control.mdx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
---
title: バージョン管理ツールとは何か？
description: Gitの基本概念とバージョン管理ツールの必要性について解説します
slug: textbook/git/version-control
sidebar:
order: 1
---

## Gitとは何か？

Gitは**バージョン管理システム**の1つです。

- ファイルの**変更履歴**を管理してくれる
- チーム開発の**コード管理**をしてくれる

## Gitはどういうときに使うのか

- データを**戻したい**とき
- データを**混ぜ合わせる**とき
- コードの**バックアップ**をとるとき

## 例1: データをバックアップから戻したい時

### 従来の方法の欠点

課題などで、途中まで出来て一応バックアップを取りたい時、とりあえずフォルダごとコピーを取る方法には以下の欠点があります：

- どれが最新かわからないときも
- 戻す時に、コピペで戻すため事故るときがある（バックアップを消すなど）

![](./_images/vscode-page-011.png)

### Gitを使った場合の利点

Gitを用いると、ブランチを分けて簡単に戻せます。

- グラフで簡単に最新のコードが何かわかる
- ブランチを変えることでコードを戻すこともできる
- GitHubに上げることで、リモートでバックアップもできる

![](./_images/vscode-page-012.png)

## 例2: データを混ぜる時

### 従来の方法の欠点

みんなで開発をしている時に、コードを一つにまとめたい時がある。その時に、どこが変わっているのか差分を自分で見て直す必要がある。

- どこが変更されたか手動でみる
- どのファイルがマージ対象か自分で見極めないといけない
- 複数ファイルあると地獄をみる

### Gitを使った場合の利点

Gitを用いると、コマンド一つでまとめたり、差分を簡単に表示をしてくれる。

- グラフで簡単にどのような混ざり方をしているか見れる
- マージを間違えた時に簡単に戻せる
- 差分を表示したり、混ぜたりするツールが揃っている

## 例3: チームで共同開発をするとき

### 従来の方法の欠点

変更点だったり、コードの状態をクラウドストレージで管理をする方法には以下の欠点があります：

- ファイルが乱立してどれかわからん
- プロジェクト全体でコードを最新に保てない
- 勝手にコードを混ぜられる危険がある

![](./_images/vscode-page-015.png)

### Git・GitHubを使った場合の利点

Git・GitHubを用いると、コードの管理をWeb上でまとめることができる。

- Git Cloneでプロジェクトを簡単に持ってこれる
- Git pullで簡単に最新にできる
- GitHubの便利なWebツールでコードを管理できる

![](./_images/vscode-page-016.png)

## コラム: チーム開発をする時に大事なこと

- 些細な問題でも、**違和感を感じたら**、すぐに連絡をする
- コミュニケーションが大事
- マージをする時は、**勝手にマージをしない**
- プロジェクト全体で連絡をする
- こまめにバックアップ、コミット、プルリクを出す
- **大きすぎる変更点は事故の元**
- ビッグバン変更点は出さないように
106 changes: 106 additions & 0 deletions src/content/docs/textbook/git/02--git-install.mdx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
---
title: Gitのインストール
description: Mac/WindowsでのGitのインストール手順を解説します
slug: textbook/git/git-install
sidebar:
order: 2
---

## ターミナル/コマンドプロンプトを起動しよう

### Macの場合

1. `Command` + `Space` キーを押す
2. 「ターミナル」と入力
3. Enterを押す

ターミナルが起動します。

![](./_images/vscode-page-019.png)

### Windowsの場合

1. `Windows` キー + `R` キーを押す
2. 「cmd」と入力
3. OKを押す

コマンドプロンプトが立ち上がるはずです。

![](./_images/vscode-page-020.png)

## Gitが入っているか確認してみよう

以下のコマンドを入力して、Gitがインストールされているか確認しましょう。

```bash
git version
```

出力例：
```
git version 2.33.0.windows.2
```

![](./_images/vscode-page-022.png)

Gitのバージョンが帰ってこない場合、インストールが出来ていません。インストールから始めましょう！

## Gitをインストールしてみる（Mac）

Homebrewを使ってGitをインストールします。

```bash
brew install git
```

インストール後、バージョンを確認します。

```bash
git -v
```

出力例：
```
git version 2.37.0
```

![](./_images/vscode-page-023.png)

バージョンが帰ってきたらインストール完了です。

### Homebrewが入っていない方へ

Homebrewが入っていない方は以下のコマンドを実行してください。

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

```bash
echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> ~/.zprofile
```

```bash
eval $(/opt/homebrew/bin/brew shellenv)
```

Homebrewがインストールされたか確認します。

```bash
brew -v
```

出力例：
```
Homebrew 3.5.4
Homebrew/homebrew-core (git revision 7d69acd3065; last commit 2022-07-13)
Homebrew/homebrew-cask (git revision ce084d024b; last commit 2022-07-13)
```

## インストール手順（Windows）

Windowsの場合は、以下のURLを参照してください。

https://prog-8.com/docs/git-env-win

チャプター1「Gitのインストール」まで行ってください。
105 changes: 105 additions & 0 deletions src/content/docs/textbook/git/03--github-account.mdx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
---
title: GitHubアカウントを作成しよう
description: GitHubアカウントの作成手順を解説します
slug: textbook/git/github-account
sidebar:
order: 3
---

## GitHubとは？

GitHub上にコードをあげてネットに**公開**したり、チーム開発でコードを**集結**させるのに用います。

![](./_images/vscode-page-027.png)

## GitHubとGitの違いは？

| GitHub | Git |
|--------|-----|
| オンラインでソースコードを保存してくれるサービスの名前 | バージョン管理をするシステムの名前 |

Gitは「プロジェクトやソースコードのバージョン管理を行うツール」です。過去に書いたコードの内容を復元したり、複数人での同時作業を効率的に進められる。

一方で、GitHubはGitを利用した開発者向けのウェブサービスです。GitHubには開発者にとって便利な機能が多く提供されている。Gitを使った他のウェブサービスも存在しますが、世界的に最も広く使われているのはGitHubである。

## アカウントを作成しましょう

プログラミングを行うに当たって便利なものです。アカウントを持っていない方は作っていきましょう。

## GitHubアカウントを作成する

### 1. GitHubにアクセス

https://github.com にアクセスする

### 2. サインアップを押す

画面右上の「Sign up」ボタンを押しましょう。

![](./_images/vscode-page-031.png)

### 3. メールアドレスを入力

メールアドレスを入力します。

:::tip
大学のメールにすると自動でPro版になります
:::

### 4. 必要情報を入力

以下の情報を入力します：

- **メールアドレス**: 大学のメールにすると自動でPro版になります
- **パスワード**: 大文字、小文字、数字、記号を入れる
- **ユーザー名**: 後で使うので控えておいてください
- **キャンペーンメールの許可**: 基本は「n」で大丈夫

![](./_images/vscode-page-033.png)

### 5. 認証をクリア

認証をクリアして、人間だと証明しましょう。

### 6. アカウント作成

「Create account」ボタンを押してアカウントを作成します。

![](./_images/vscode-page-035.png)

### 7. 確認コードを入力

メールアドレスに届いたコードを入力します。

![](./_images/vscode-page-036.png)

### 8. アンケートに答える

3つのアンケートに答えましょう：

1. **チーム開発はどれくらいの人数で行うのか？**
- Just me / 2-5 / 5-10 / 10-20 / 20-50 / 50+ から選択

2. **学生か先生か？**
- Student / Teacher から選択

3. **GitHubで気になるサービスを選択**
- よくわからない方は、画面のチェックに合わせてもらえれば大丈夫です

![](./_images/vscode-page-037.png)

### 9. プランを選択

プランを選択します。**Freeプラン**を選択しましょう。

「Continue for free」をクリックします。

![](./_images/vscode-page-039.png)

### 10. 完了

アカウントを作成することができました！

![](./_images/vscode-page-040.png)

これでGitHubを使う準備が整いました。
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
昔Gitの資料を作ろうとして途中かけのやつをとりあえず出しておきます。#20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Draft

harutiro
wants to merge
3
commits into

base:main
Choose a base branch

from

 Draft


昔Gitの資料を作ろうとして途中かけのやつをとりあえず出しておきます。
#20
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
1de4340

とりあえずAIにお願いして、骨組みだけ作成


harutiro Feb 4, 2026
d2d6871

cli版を追加


harutiro Feb 4, 2026
2e75259

とりあえず、mdx化に成功した


harutiro Feb 4, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


11 changes: 11 additions & 0 deletions
astro.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -93,6 +93,17 @@ export default defineConfig({
 // },
 // ],
 // },
 {
 label: "Git・GitHub",
 link: "/textbook/git/version-control",
 icon: "seti:git",
 items: [
 {
 label: "Git入門",
 autogenerate: { directory: "textbook/git" },
 },
 ],
 },
 {
 label: "Web",
 link: "/textbook/web/for-classes/html-structure-basic",
Expand Down

91 changes: 91 additions & 0 deletions
src/content/docs/textbook/git/01--version-control.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
---
title: バージョン管理ツールとは何か？
description: Gitの基本概念とバージョン管理ツールの必要性について解説します
slug: textbook/git/version-control
sidebar:
 order: 1
---

## Gitとは何か？

Gitは**バージョン管理システム**の1つです。

- ファイルの**変更履歴**を管理してくれる
- チーム開発の**コード管理**をしてくれる

## Gitはどういうときに使うのか

- データを**戻したい**とき
- データを**混ぜ合わせる**とき
- コードの**バックアップ**をとるとき

## 例1: データをバックアップから戻したい時

### 従来の方法の欠点

課題などで、途中まで出来て一応バックアップを取りたい時、とりあえずフォルダごとコピーを取る方法には以下の欠点があります：

- どれが最新かわからないときも
- 戻す時に、コピペで戻すため事故るときがある（バックアップを消すなど）

![](./_images/vscode-page-011.png)

### Gitを使った場合の利点

Gitを用いると、ブランチを分けて簡単に戻せます。

- グラフで簡単に最新のコードが何かわかる
- ブランチを変えることでコードを戻すこともできる
- GitHubに上げることで、リモートでバックアップもできる

![](./_images/vscode-page-012.png)

## 例2: データを混ぜる時

### 従来の方法の欠点

みんなで開発をしている時に、コードを一つにまとめたい時がある。その時に、どこが変わっているのか差分を自分で見て直す必要がある。

- どこが変更されたか手動でみる
- どのファイルがマージ対象か自分で見極めないといけない
- 複数ファイルあると地獄をみる

### Gitを使った場合の利点

Gitを用いると、コマンド一つでまとめたり、差分を簡単に表示をしてくれる。

- グラフで簡単にどのような混ざり方をしているか見れる
- マージを間違えた時に簡単に戻せる
- 差分を表示したり、混ぜたりするツールが揃っている

## 例3: チームで共同開発をするとき

### 従来の方法の欠点

変更点だったり、コードの状態をクラウドストレージで管理をする方法には以下の欠点があります：

- ファイルが乱立してどれかわからん
- プロジェクト全体でコードを最新に保てない
- 勝手にコードを混ぜられる危険がある

![](./_images/vscode-page-015.png)

### Git・GitHubを使った場合の利点

Git・GitHubを用いると、コードの管理をWeb上でまとめることができる。

- Git Cloneでプロジェクトを簡単に持ってこれる
- Git pullで簡単に最新にできる
- GitHubの便利なWebツールでコードを管理できる

![](./_images/vscode-page-016.png)

## コラム: チーム開発をする時に大事なこと

- 些細な問題でも、**違和感を感じたら**、すぐに連絡をする
 - コミュニケーションが大事
- マージをする時は、**勝手にマージをしない**
 - プロジェクト全体で連絡をする
- こまめにバックアップ、コミット、プルリクを出す
 - **大きすぎる変更点は事故の元**
 - ビッグバン変更点は出さないように

106 changes: 106 additions & 0 deletions
src/content/docs/textbook/git/02--git-install.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
---
title: Gitのインストール
description: Mac/WindowsでのGitのインストール手順を解説します
slug: textbook/git/git-install
sidebar:
 order: 2
---

## ターミナル/コマンドプロンプトを起動しよう

### Macの場合

1. `Command` + `Space` キーを押す
2. 「ターミナル」と入力
3. Enterを押す

ターミナルが起動します。

![](./_images/vscode-page-019.png)

### Windowsの場合

1. `Windows` キー + `R` キーを押す
2. 「cmd」と入力
3. OKを押す

コマンドプロンプトが立ち上がるはずです。

![](./_images/vscode-page-020.png)

## Gitが入っているか確認してみよう

以下のコマンドを入力して、Gitがインストールされているか確認しましょう。

```bash
git version
```

出力例：
```
git version 2.33.0.windows.2
```

![](./_images/vscode-page-022.png)

Gitのバージョンが帰ってこない場合、インストールが出来ていません。インストールから始めましょう！

## Gitをインストールしてみる（Mac）

Homebrewを使ってGitをインストールします。

```bash
brew install git
```

インストール後、バージョンを確認します。

```bash
git -v
```

出力例：
```
git version 2.37.0
```

![](./_images/vscode-page-023.png)

バージョンが帰ってきたらインストール完了です。

### Homebrewが入っていない方へ

Homebrewが入っていない方は以下のコマンドを実行してください。

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

```bash
echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> ~/.zprofile
```

```bash
eval $(/opt/homebrew/bin/brew shellenv)
```

Homebrewがインストールされたか確認します。

```bash
brew -v
```

出力例：
```
Homebrew 3.5.4
Homebrew/homebrew-core (git revision 7d69acd3065; last commit 2022-07-13)
Homebrew/homebrew-cask (git revision ce084d024b; last commit 2022-07-13)
```

## インストール手順（Windows）

Windowsの場合は、以下のURLを参照してください。

https://prog-8.com/docs/git-env-win

チャプター1「Gitのインストール」まで行ってください。

105 changes: 105 additions & 0 deletions
src/content/docs/textbook/git/03--github-account.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
---
title: GitHubアカウントを作成しよう
description: GitHubアカウントの作成手順を解説します
slug: textbook/git/github-account
sidebar:
 order: 3
---

## GitHubとは？

GitHub上にコードをあげてネットに**公開**したり、チーム開発でコードを**集結**させるのに用います。

![](./_images/vscode-page-027.png)

## GitHubとGitの違いは？

| GitHub | Git |
|--------|-----|
| オンラインでソースコードを保存してくれるサービスの名前 | バージョン管理をするシステムの名前 |

Gitは「プロジェクトやソースコードのバージョン管理を行うツール」です。過去に書いたコードの内容を復元したり、複数人での同時作業を効率的に進められる。

一方で、GitHubはGitを利用した開発者向けのウェブサービスです。GitHubには開発者にとって便利な機能が多く提供されている。Gitを使った他のウェブサービスも存在しますが、世界的に最も広く使われているのはGitHubである。

## アカウントを作成しましょう

プログラミングを行うに当たって便利なものです。アカウントを持っていない方は作っていきましょう。

## GitHubアカウントを作成する

### 1. GitHubにアクセス

https://github.com にアクセスする

### 2. サインアップを押す

画面右上の「Sign up」ボタンを押しましょう。

![](./_images/vscode-page-031.png)

### 3. メールアドレスを入力

メールアドレスを入力します。

:::tip
大学のメールにすると自動でPro版になります
:::

### 4. 必要情報を入力

以下の情報を入力します：

- **メールアドレス**: 大学のメールにすると自動でPro版になります
- **パスワード**: 大文字、小文字、数字、記号を入れる
- **ユーザー名**: 後で使うので控えておいてください
- **キャンペーンメールの許可**: 基本は「n」で大丈夫

![](./_images/vscode-page-033.png)

### 5. 認証をクリア

認証をクリアして、人間だと証明しましょう。

### 6. アカウント作成

「Create account」ボタンを押してアカウントを作成します。

![](./_images/vscode-page-035.png)

### 7. 確認コードを入力

メールアドレスに届いたコードを入力します。

![](./_images/vscode-page-036.png)

### 8. アンケートに答える

3つのアンケートに答えましょう：

1. **チーム開発はどれくらいの人数で行うのか？**
 - Just me / 2-5 / 5-10 / 10-20 / 20-50 / 50+ から選択

2. **学生か先生か？**
 - Student / Teacher から選択

3. **GitHubで気になるサービスを選択**
 - よくわからない方は、画面のチェックに合わせてもらえれば大丈夫です

![](./_images/vscode-page-037.png)

### 9. プランを選択

プランを選択します。**Freeプラン**を選択しましょう。

「Continue for free」をクリックします。

![](./_images/vscode-page-039.png)

### 10. 完了

アカウントを作成することができました！

![](./_images/vscode-page-040.png)

これでGitHubを使う準備が整いました。
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
昔Gitの資料を作ろうとして途中かけのやつをとりあえず出しておきます。#20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Draft

harutiro
wants to merge
3
commits into

base:main
Choose a base branch

from

 Draft


昔Gitの資料を作ろうとして途中かけのやつをとりあえず出しておきます。
#20
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
1de4340

とりあえずAIにお願いして、骨組みだけ作成


harutiro Feb 4, 2026
d2d6871

cli版を追加


harutiro Feb 4, 2026
2e75259

とりあえず、mdx化に成功した


harutiro Feb 4, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


11 changes: 11 additions & 0 deletions
astro.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -93,6 +93,17 @@ export default defineConfig({
 // },
 // ],
 // },
 {
 label: "Git・GitHub",
 link: "/textbook/git/version-control",
 icon: "seti:git",
 items: [
 {
 label: "Git入門",
 autogenerate: { directory: "textbook/git" },
 },
 ],
 },
 {
 label: "Web",
 link: "/textbook/web/for-classes/html-structure-basic",
Expand Down

91 changes: 91 additions & 0 deletions
src/content/docs/textbook/git/01--version-control.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
---
title: バージョン管理ツールとは何か？
description: Gitの基本概念とバージョン管理ツールの必要性について解説します
slug: textbook/git/version-control
sidebar:
 order: 1
---

## Gitとは何か？

Gitは**バージョン管理システム**の1つです。

- ファイルの**変更履歴**を管理してくれる
- チーム開発の**コード管理**をしてくれる

## Gitはどういうときに使うのか

- データを**戻したい**とき
- データを**混ぜ合わせる**とき
- コードの**バックアップ**をとるとき

## 例1: データをバックアップから戻したい時

### 従来の方法の欠点

課題などで、途中まで出来て一応バックアップを取りたい時、とりあえずフォルダごとコピーを取る方法には以下の欠点があります：

- どれが最新かわからないときも
- 戻す時に、コピペで戻すため事故るときがある（バックアップを消すなど）

![](./_images/vscode-page-011.png)

### Gitを使った場合の利点

Gitを用いると、ブランチを分けて簡単に戻せます。

- グラフで簡単に最新のコードが何かわかる
- ブランチを変えることでコードを戻すこともできる
- GitHubに上げることで、リモートでバックアップもできる

![](./_images/vscode-page-012.png)

## 例2: データを混ぜる時

### 従来の方法の欠点

みんなで開発をしている時に、コードを一つにまとめたい時がある。その時に、どこが変わっているのか差分を自分で見て直す必要がある。

- どこが変更されたか手動でみる
- どのファイルがマージ対象か自分で見極めないといけない
- 複数ファイルあると地獄をみる

### Gitを使った場合の利点

Gitを用いると、コマンド一つでまとめたり、差分を簡単に表示をしてくれる。

- グラフで簡単にどのような混ざり方をしているか見れる
- マージを間違えた時に簡単に戻せる
- 差分を表示したり、混ぜたりするツールが揃っている

## 例3: チームで共同開発をするとき

### 従来の方法の欠点

変更点だったり、コードの状態をクラウドストレージで管理をする方法には以下の欠点があります：

- ファイルが乱立してどれかわからん
- プロジェクト全体でコードを最新に保てない
- 勝手にコードを混ぜられる危険がある

![](./_images/vscode-page-015.png)

### Git・GitHubを使った場合の利点

Git・GitHubを用いると、コードの管理をWeb上でまとめることができる。

- Git Cloneでプロジェクトを簡単に持ってこれる
- Git pullで簡単に最新にできる
- GitHubの便利なWebツールでコードを管理できる

![](./_images/vscode-page-016.png)

## コラム: チーム開発をする時に大事なこと

- 些細な問題でも、**違和感を感じたら**、すぐに連絡をする
 - コミュニケーションが大事
- マージをする時は、**勝手にマージをしない**
 - プロジェクト全体で連絡をする
- こまめにバックアップ、コミット、プルリクを出す
 - **大きすぎる変更点は事故の元**
 - ビッグバン変更点は出さないように

106 changes: 106 additions & 0 deletions
src/content/docs/textbook/git/02--git-install.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
---
title: Gitのインストール
description: Mac/WindowsでのGitのインストール手順を解説します
slug: textbook/git/git-install
sidebar:
 order: 2
---

## ターミナル/コマンドプロンプトを起動しよう

### Macの場合

1. `Command` + `Space` キーを押す
2. 「ターミナル」と入力
3. Enterを押す

ターミナルが起動します。

![](./_images/vscode-page-019.png)

### Windowsの場合

1. `Windows` キー + `R` キーを押す
2. 「cmd」と入力
3. OKを押す

コマンドプロンプトが立ち上がるはずです。

![](./_images/vscode-page-020.png)

## Gitが入っているか確認してみよう

以下のコマンドを入力して、Gitがインストールされているか確認しましょう。

```bash
git version
```

出力例：
```
git version 2.33.0.windows.2
```

![](./_images/vscode-page-022.png)

Gitのバージョンが帰ってこない場合、インストールが出来ていません。インストールから始めましょう！

## Gitをインストールしてみる（Mac）

Homebrewを使ってGitをインストールします。

```bash
brew install git
```

インストール後、バージョンを確認します。

```bash
git -v
```

出力例：
```
git version 2.37.0
```

![](./_images/vscode-page-023.png)

バージョンが帰ってきたらインストール完了です。

### Homebrewが入っていない方へ

Homebrewが入っていない方は以下のコマンドを実行してください。

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

```bash
echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> ~/.zprofile
```

```bash
eval $(/opt/homebrew/bin/brew shellenv)
```

Homebrewがインストールされたか確認します。

```bash
brew -v
```

出力例：
```
Homebrew 3.5.4
Homebrew/homebrew-core (git revision 7d69acd3065; last commit 2022-07-13)
Homebrew/homebrew-cask (git revision ce084d024b; last commit 2022-07-13)
```

## インストール手順（Windows）

Windowsの場合は、以下のURLを参照してください。

https://prog-8.com/docs/git-env-win

チャプター1「Gitのインストール」まで行ってください。

105 changes: 105 additions & 0 deletions
src/content/docs/textbook/git/03--github-account.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
---
title: GitHubアカウントを作成しよう
description: GitHubアカウントの作成手順を解説します
slug: textbook/git/github-account
sidebar:
 order: 3
---

## GitHubとは？

GitHub上にコードをあげてネットに**公開**したり、チーム開発でコードを**集結**させるのに用います。

![](./_images/vscode-page-027.png)

## GitHubとGitの違いは？

| GitHub | Git |
|--------|-----|
| オンラインでソースコードを保存してくれるサービスの名前 | バージョン管理をするシステムの名前 |

Gitは「プロジェクトやソースコードのバージョン管理を行うツール」です。過去に書いたコードの内容を復元したり、複数人での同時作業を効率的に進められる。

一方で、GitHubはGitを利用した開発者向けのウェブサービスです。GitHubには開発者にとって便利な機能が多く提供されている。Gitを使った他のウェブサービスも存在しますが、世界的に最も広く使われているのはGitHubである。

## アカウントを作成しましょう

プログラミングを行うに当たって便利なものです。アカウントを持っていない方は作っていきましょう。

## GitHubアカウントを作成する

### 1. GitHubにアクセス

https://github.com にアクセスする

### 2. サインアップを押す

画面右上の「Sign up」ボタンを押しましょう。

![](./_images/vscode-page-031.png)

### 3. メールアドレスを入力

メールアドレスを入力します。

:::tip
大学のメールにすると自動でPro版になります
:::

### 4. 必要情報を入力

以下の情報を入力します：

- **メールアドレス**: 大学のメールにすると自動でPro版になります
- **パスワード**: 大文字、小文字、数字、記号を入れる
- **ユーザー名**: 後で使うので控えておいてください
- **キャンペーンメールの許可**: 基本は「n」で大丈夫

![](./_images/vscode-page-033.png)

### 5. 認証をクリア

認証をクリアして、人間だと証明しましょう。

### 6. アカウント作成

「Create account」ボタンを押してアカウントを作成します。

![](./_images/vscode-page-035.png)

### 7. 確認コードを入力

メールアドレスに届いたコードを入力します。

![](./_images/vscode-page-036.png)

### 8. アンケートに答える

3つのアンケートに答えましょう：

1. **チーム開発はどれくらいの人数で行うのか？**
 - Just me / 2-5 / 5-10 / 10-20 / 20-50 / 50+ から選択

2. **学生か先生か？**
 - Student / Teacher から選択

3. **GitHubで気になるサービスを選択**
 - よくわからない方は、画面のチェックに合わせてもらえれば大丈夫です

![](./_images/vscode-page-037.png)

### 9. プランを選択

プランを選択します。**Freeプラン**を選択しましょう。

「Continue for free」をクリックします。

![](./_images/vscode-page-039.png)

### 10. 完了

アカウントを作成することができました！

![](./_images/vscode-page-040.png)

これでGitHubを使う準備が整いました。
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
昔Gitの資料を作ろうとして途中かけのやつをとりあえず出しておきます。#20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Draft

harutiro
wants to merge
3
commits into

base:main
Choose a base branch

from

 Draft


昔Gitの資料を作ろうとして途中かけのやつをとりあえず出しておきます。
#20
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
1de4340

とりあえずAIにお願いして、骨組みだけ作成


harutiro Feb 4, 2026
d2d6871

cli版を追加


harutiro Feb 4, 2026
2e75259

とりあえず、mdx化に成功した


harutiro Feb 4, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


11 changes: 11 additions & 0 deletions
astro.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -93,6 +93,17 @@ export default defineConfig({
 // },
 // ],
 // },
 {
 label: "Git・GitHub",
 link: "/textbook/git/version-control",
 icon: "seti:git",
 items: [
 {
 label: "Git入門",
 autogenerate: { directory: "textbook/git" },
 },
 ],
 },
 {
 label: "Web",
 link: "/textbook/web/for-classes/html-structure-basic",
Expand Down

91 changes: 91 additions & 0 deletions
src/content/docs/textbook/git/01--version-control.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
---
title: バージョン管理ツールとは何か？
description: Gitの基本概念とバージョン管理ツールの必要性について解説します
slug: textbook/git/version-control
sidebar:
 order: 1
---

## Gitとは何か？

Gitは**バージョン管理システム**の1つです。

- ファイルの**変更履歴**を管理してくれる
- チーム開発の**コード管理**をしてくれる

## Gitはどういうときに使うのか

- データを**戻したい**とき
- データを**混ぜ合わせる**とき
- コードの**バックアップ**をとるとき

## 例1: データをバックアップから戻したい時

### 従来の方法の欠点

課題などで、途中まで出来て一応バックアップを取りたい時、とりあえずフォルダごとコピーを取る方法には以下の欠点があります：

- どれが最新かわからないときも
- 戻す時に、コピペで戻すため事故るときがある（バックアップを消すなど）

![](./_images/vscode-page-011.png)

### Gitを使った場合の利点

Gitを用いると、ブランチを分けて簡単に戻せます。

- グラフで簡単に最新のコードが何かわかる
- ブランチを変えることでコードを戻すこともできる
- GitHubに上げることで、リモートでバックアップもできる

![](./_images/vscode-page-012.png)

## 例2: データを混ぜる時

### 従来の方法の欠点

みんなで開発をしている時に、コードを一つにまとめたい時がある。その時に、どこが変わっているのか差分を自分で見て直す必要がある。

- どこが変更されたか手動でみる
- どのファイルがマージ対象か自分で見極めないといけない
- 複数ファイルあると地獄をみる

### Gitを使った場合の利点

Gitを用いると、コマンド一つでまとめたり、差分を簡単に表示をしてくれる。

- グラフで簡単にどのような混ざり方をしているか見れる
- マージを間違えた時に簡単に戻せる
- 差分を表示したり、混ぜたりするツールが揃っている

## 例3: チームで共同開発をするとき

### 従来の方法の欠点

変更点だったり、コードの状態をクラウドストレージで管理をする方法には以下の欠点があります：

- ファイルが乱立してどれかわからん
- プロジェクト全体でコードを最新に保てない
- 勝手にコードを混ぜられる危険がある

![](./_images/vscode-page-015.png)

### Git・GitHubを使った場合の利点

Git・GitHubを用いると、コードの管理をWeb上でまとめることができる。

- Git Cloneでプロジェクトを簡単に持ってこれる
- Git pullで簡単に最新にできる
- GitHubの便利なWebツールでコードを管理できる

![](./_images/vscode-page-016.png)

## コラム: チーム開発をする時に大事なこと

- 些細な問題でも、**違和感を感じたら**、すぐに連絡をする
 - コミュニケーションが大事
- マージをする時は、**勝手にマージをしない**
 - プロジェクト全体で連絡をする
- こまめにバックアップ、コミット、プルリクを出す
 - **大きすぎる変更点は事故の元**
 - ビッグバン変更点は出さないように

106 changes: 106 additions & 0 deletions
src/content/docs/textbook/git/02--git-install.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
---
title: Gitのインストール
description: Mac/WindowsでのGitのインストール手順を解説します
slug: textbook/git/git-install
sidebar:
 order: 2
---

## ターミナル/コマンドプロンプトを起動しよう

### Macの場合

1. `Command` + `Space` キーを押す
2. 「ターミナル」と入力
3. Enterを押す

ターミナルが起動します。

![](./_images/vscode-page-019.png)

### Windowsの場合

1. `Windows` キー + `R` キーを押す
2. 「cmd」と入力
3. OKを押す

コマンドプロンプトが立ち上がるはずです。

![](./_images/vscode-page-020.png)

## Gitが入っているか確認してみよう

以下のコマンドを入力して、Gitがインストールされているか確認しましょう。

```bash
git version
```

出力例：
```
git version 2.33.0.windows.2
```

![](./_images/vscode-page-022.png)

Gitのバージョンが帰ってこない場合、インストールが出来ていません。インストールから始めましょう！

## Gitをインストールしてみる（Mac）

Homebrewを使ってGitをインストールします。

```bash
brew install git
```

インストール後、バージョンを確認します。

```bash
git -v
```

出力例：
```
git version 2.37.0
```

![](./_images/vscode-page-023.png)

バージョンが帰ってきたらインストール完了です。

### Homebrewが入っていない方へ

Homebrewが入っていない方は以下のコマンドを実行してください。

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

```bash
echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> ~/.zprofile
```

```bash
eval $(/opt/homebrew/bin/brew shellenv)
```

Homebrewがインストールされたか確認します。

```bash
brew -v
```

出力例：
```
Homebrew 3.5.4
Homebrew/homebrew-core (git revision 7d69acd3065; last commit 2022-07-13)
Homebrew/homebrew-cask (git revision ce084d024b; last commit 2022-07-13)
```

## インストール手順（Windows）

Windowsの場合は、以下のURLを参照してください。

https://prog-8.com/docs/git-env-win

チャプター1「Gitのインストール」まで行ってください。

105 changes: 105 additions & 0 deletions
src/content/docs/textbook/git/03--github-account.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
---
title: GitHubアカウントを作成しよう
description: GitHubアカウントの作成手順を解説します
slug: textbook/git/github-account
sidebar:
 order: 3
---

## GitHubとは？

GitHub上にコードをあげてネットに**公開**したり、チーム開発でコードを**集結**させるのに用います。

![](./_images/vscode-page-027.png)

## GitHubとGitの違いは？

| GitHub | Git |
|--------|-----|
| オンラインでソースコードを保存してくれるサービスの名前 | バージョン管理をするシステムの名前 |

Gitは「プロジェクトやソースコードのバージョン管理を行うツール」です。過去に書いたコードの内容を復元したり、複数人での同時作業を効率的に進められる。

一方で、GitHubはGitを利用した開発者向けのウェブサービスです。GitHubには開発者にとって便利な機能が多く提供されている。Gitを使った他のウェブサービスも存在しますが、世界的に最も広く使われているのはGitHubである。

## アカウントを作成しましょう

プログラミングを行うに当たって便利なものです。アカウントを持っていない方は作っていきましょう。

## GitHubアカウントを作成する

### 1. GitHubにアクセス

https://github.com にアクセスする

### 2. サインアップを押す

画面右上の「Sign up」ボタンを押しましょう。

![](./_images/vscode-page-031.png)

### 3. メールアドレスを入力

メールアドレスを入力します。

:::tip
大学のメールにすると自動でPro版になります
:::

### 4. 必要情報を入力

以下の情報を入力します：

- **メールアドレス**: 大学のメールにすると自動でPro版になります
- **パスワード**: 大文字、小文字、数字、記号を入れる
- **ユーザー名**: 後で使うので控えておいてください
- **キャンペーンメールの許可**: 基本は「n」で大丈夫

![](./_images/vscode-page-033.png)

### 5. 認証をクリア

認証をクリアして、人間だと証明しましょう。

### 6. アカウント作成

「Create account」ボタンを押してアカウントを作成します。

![](./_images/vscode-page-035.png)

### 7. 確認コードを入力

メールアドレスに届いたコードを入力します。

![](./_images/vscode-page-036.png)

### 8. アンケートに答える

3つのアンケートに答えましょう：

1. **チーム開発はどれくらいの人数で行うのか？**
 - Just me / 2-5 / 5-10 / 10-20 / 20-50 / 50+ から選択

2. **学生か先生か？**
 - Student / Teacher から選択

3. **GitHubで気になるサービスを選択**
 - よくわからない方は、画面のチェックに合わせてもらえれば大丈夫です

![](./_images/vscode-page-037.png)

### 9. プランを選択

プランを選択します。**Freeプラン**を選択しましょう。

「Continue for free」をクリックします。

![](./_images/vscode-page-039.png)

### 10. 完了

アカウントを作成することができました！

![](./_images/vscode-page-040.png)

これでGitHubを使う準備が整いました。
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
昔Gitの資料を作ろうとして途中かけのやつをとりあえず出しておきます。#20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Draft

harutiro
wants to merge
3
commits into

base:main
Choose a base branch

from

 Draft


昔Gitの資料を作ろうとして途中かけのやつをとりあえず出しておきます。
#20
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
1de4340

とりあえずAIにお願いして、骨組みだけ作成


harutiro Feb 4, 2026
d2d6871

cli版を追加


harutiro Feb 4, 2026
2e75259

とりあえず、mdx化に成功した


harutiro Feb 4, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


11 changes: 11 additions & 0 deletions
astro.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -93,6 +93,17 @@ export default defineConfig({
 // },
 // ],
 // },
 {
 label: "Git・GitHub",
 link: "/textbook/git/version-control",
 icon: "seti:git",
 items: [
 {
 label: "Git入門",
 autogenerate: { directory: "textbook/git" },
 },
 ],
 },
 {
 label: "Web",
 link: "/textbook/web/for-classes/html-structure-basic",
Expand Down

91 changes: 91 additions & 0 deletions
src/content/docs/textbook/git/01--version-control.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
---
title: バージョン管理ツールとは何か？
description: Gitの基本概念とバージョン管理ツールの必要性について解説します
slug: textbook/git/version-control
sidebar:
 order: 1
---

## Gitとは何か？

Gitは**バージョン管理システム**の1つです。

- ファイルの**変更履歴**を管理してくれる
- チーム開発の**コード管理**をしてくれる

## Gitはどういうときに使うのか

- データを**戻したい**とき
- データを**混ぜ合わせる**とき
- コードの**バックアップ**をとるとき

## 例1: データをバックアップから戻したい時

### 従来の方法の欠点

課題などで、途中まで出来て一応バックアップを取りたい時、とりあえずフォルダごとコピーを取る方法には以下の欠点があります：

- どれが最新かわからないときも
- 戻す時に、コピペで戻すため事故るときがある（バックアップを消すなど）

![](./_images/vscode-page-011.png)

### Gitを使った場合の利点

Gitを用いると、ブランチを分けて簡単に戻せます。

- グラフで簡単に最新のコードが何かわかる
- ブランチを変えることでコードを戻すこともできる
- GitHubに上げることで、リモートでバックアップもできる

![](./_images/vscode-page-012.png)

## 例2: データを混ぜる時

### 従来の方法の欠点

みんなで開発をしている時に、コードを一つにまとめたい時がある。その時に、どこが変わっているのか差分を自分で見て直す必要がある。

- どこが変更されたか手動でみる
- どのファイルがマージ対象か自分で見極めないといけない
- 複数ファイルあると地獄をみる

### Gitを使った場合の利点

Gitを用いると、コマンド一つでまとめたり、差分を簡単に表示をしてくれる。

- グラフで簡単にどのような混ざり方をしているか見れる
- マージを間違えた時に簡単に戻せる
- 差分を表示したり、混ぜたりするツールが揃っている

## 例3: チームで共同開発をするとき

### 従来の方法の欠点

変更点だったり、コードの状態をクラウドストレージで管理をする方法には以下の欠点があります：

- ファイルが乱立してどれかわからん
- プロジェクト全体でコードを最新に保てない
- 勝手にコードを混ぜられる危険がある

![](./_images/vscode-page-015.png)

### Git・GitHubを使った場合の利点

Git・GitHubを用いると、コードの管理をWeb上でまとめることができる。

- Git Cloneでプロジェクトを簡単に持ってこれる
- Git pullで簡単に最新にできる
- GitHubの便利なWebツールでコードを管理できる

![](./_images/vscode-page-016.png)

## コラム: チーム開発をする時に大事なこと

- 些細な問題でも、**違和感を感じたら**、すぐに連絡をする
 - コミュニケーションが大事
- マージをする時は、**勝手にマージをしない**
 - プロジェクト全体で連絡をする
- こまめにバックアップ、コミット、プルリクを出す
 - **大きすぎる変更点は事故の元**
 - ビッグバン変更点は出さないように

106 changes: 106 additions & 0 deletions
src/content/docs/textbook/git/02--git-install.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
---
title: Gitのインストール
description: Mac/WindowsでのGitのインストール手順を解説します
slug: textbook/git/git-install
sidebar:
 order: 2
---

## ターミナル/コマンドプロンプトを起動しよう

### Macの場合

1. `Command` + `Space` キーを押す
2. 「ターミナル」と入力
3. Enterを押す

ターミナルが起動します。

![](./_images/vscode-page-019.png)

### Windowsの場合

1. `Windows` キー + `R` キーを押す
2. 「cmd」と入力
3. OKを押す

コマンドプロンプトが立ち上がるはずです。

![](./_images/vscode-page-020.png)

## Gitが入っているか確認してみよう

以下のコマンドを入力して、Gitがインストールされているか確認しましょう。

```bash
git version
```

出力例：
```
git version 2.33.0.windows.2
```

![](./_images/vscode-page-022.png)

Gitのバージョンが帰ってこない場合、インストールが出来ていません。インストールから始めましょう！

## Gitをインストールしてみる（Mac）

Homebrewを使ってGitをインストールします。

```bash
brew install git
```

インストール後、バージョンを確認します。

```bash
git -v
```

出力例：
```
git version 2.37.0
```

![](./_images/vscode-page-023.png)

バージョンが帰ってきたらインストール完了です。

### Homebrewが入っていない方へ

Homebrewが入っていない方は以下のコマンドを実行してください。

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

```bash
echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> ~/.zprofile
```

```bash
eval $(/opt/homebrew/bin/brew shellenv)
```

Homebrewがインストールされたか確認します。

```bash
brew -v
```

出力例：
```
Homebrew 3.5.4
Homebrew/homebrew-core (git revision 7d69acd3065; last commit 2022-07-13)
Homebrew/homebrew-cask (git revision ce084d024b; last commit 2022-07-13)
```

## インストール手順（Windows）

Windowsの場合は、以下のURLを参照してください。

https://prog-8.com/docs/git-env-win

チャプター1「Gitのインストール」まで行ってください。

105 changes: 105 additions & 0 deletions
src/content/docs/textbook/git/03--github-account.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
---
title: GitHubアカウントを作成しよう
description: GitHubアカウントの作成手順を解説します
slug: textbook/git/github-account
sidebar:
 order: 3
---

## GitHubとは？

GitHub上にコードをあげてネットに**公開**したり、チーム開発でコードを**集結**させるのに用います。

![](./_images/vscode-page-027.png)

## GitHubとGitの違いは？

| GitHub | Git |
|--------|-----|
| オンラインでソースコードを保存してくれるサービスの名前 | バージョン管理をするシステムの名前 |

Gitは「プロジェクトやソースコードのバージョン管理を行うツール」です。過去に書いたコードの内容を復元したり、複数人での同時作業を効率的に進められる。

一方で、GitHubはGitを利用した開発者向けのウェブサービスです。GitHubには開発者にとって便利な機能が多く提供されている。Gitを使った他のウェブサービスも存在しますが、世界的に最も広く使われているのはGitHubである。

## アカウントを作成しましょう

プログラミングを行うに当たって便利なものです。アカウントを持っていない方は作っていきましょう。

## GitHubアカウントを作成する

### 1. GitHubにアクセス

https://github.com にアクセスする

### 2. サインアップを押す

画面右上の「Sign up」ボタンを押しましょう。

![](./_images/vscode-page-031.png)

### 3. メールアドレスを入力

メールアドレスを入力します。

:::tip
大学のメールにすると自動でPro版になります
:::

### 4. 必要情報を入力

以下の情報を入力します：

- **メールアドレス**: 大学のメールにすると自動でPro版になります
- **パスワード**: 大文字、小文字、数字、記号を入れる
- **ユーザー名**: 後で使うので控えておいてください
- **キャンペーンメールの許可**: 基本は「n」で大丈夫

![](./_images/vscode-page-033.png)

### 5. 認証をクリア

認証をクリアして、人間だと証明しましょう。

### 6. アカウント作成

「Create account」ボタンを押してアカウントを作成します。

![](./_images/vscode-page-035.png)

### 7. 確認コードを入力

メールアドレスに届いたコードを入力します。

![](./_images/vscode-page-036.png)

### 8. アンケートに答える

3つのアンケートに答えましょう：

1. **チーム開発はどれくらいの人数で行うのか？**
 - Just me / 2-5 / 5-10 / 10-20 / 20-50 / 50+ から選択

2. **学生か先生か？**
 - Student / Teacher から選択

3. **GitHubで気になるサービスを選択**
 - よくわからない方は、画面のチェックに合わせてもらえれば大丈夫です

![](./_images/vscode-page-037.png)

### 9. プランを選択

プランを選択します。**Freeプラン**を選択しましょう。

「Continue for free」をクリックします。

![](./_images/vscode-page-039.png)

### 10. 完了

アカウントを作成することができました！

![](./_images/vscode-page-040.png)

これでGitHubを使う準備が整いました。
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
昔Gitの資料を作ろうとして途中かけのやつをとりあえず出しておきます。#20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Draft

harutiro
wants to merge
3
commits into

base:main
Choose a base branch

from

 Draft


昔Gitの資料を作ろうとして途中かけのやつをとりあえず出しておきます。
#20
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
1de4340

とりあえずAIにお願いして、骨組みだけ作成


harutiro Feb 4, 2026
d2d6871

cli版を追加


harutiro Feb 4, 2026
2e75259

とりあえず、mdx化に成功した


harutiro Feb 4, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


11 changes: 11 additions & 0 deletions
astro.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -93,6 +93,17 @@ export default defineConfig({
 // },
 // ],
 // },
 {
 label: "Git・GitHub",
 link: "/textbook/git/version-control",
 icon: "seti:git",
 items: [
 {
 label: "Git入門",
 autogenerate: { directory: "textbook/git" },
 },
 ],
 },
 {
 label: "Web",
 link: "/textbook/web/for-classes/html-structure-basic",
Expand Down

91 changes: 91 additions & 0 deletions
src/content/docs/textbook/git/01--version-control.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
---
title: バージョン管理ツールとは何か？
description: Gitの基本概念とバージョン管理ツールの必要性について解説します
slug: textbook/git/version-control
sidebar:
 order: 1
---

## Gitとは何か？

Gitは**バージョン管理システム**の1つです。

- ファイルの**変更履歴**を管理してくれる
- チーム開発の**コード管理**をしてくれる

## Gitはどういうときに使うのか

- データを**戻したい**とき
- データを**混ぜ合わせる**とき
- コードの**バックアップ**をとるとき

## 例1: データをバックアップから戻したい時

### 従来の方法の欠点

課題などで、途中まで出来て一応バックアップを取りたい時、とりあえずフォルダごとコピーを取る方法には以下の欠点があります：

- どれが最新かわからないときも
- 戻す時に、コピペで戻すため事故るときがある（バックアップを消すなど）

![](./_images/vscode-page-011.png)

### Gitを使った場合の利点

Gitを用いると、ブランチを分けて簡単に戻せます。

- グラフで簡単に最新のコードが何かわかる
- ブランチを変えることでコードを戻すこともできる
- GitHubに上げることで、リモートでバックアップもできる

![](./_images/vscode-page-012.png)

## 例2: データを混ぜる時

### 従来の方法の欠点

みんなで開発をしている時に、コードを一つにまとめたい時がある。その時に、どこが変わっているのか差分を自分で見て直す必要がある。

- どこが変更されたか手動でみる
- どのファイルがマージ対象か自分で見極めないといけない
- 複数ファイルあると地獄をみる

### Gitを使った場合の利点

Gitを用いると、コマンド一つでまとめたり、差分を簡単に表示をしてくれる。

- グラフで簡単にどのような混ざり方をしているか見れる
- マージを間違えた時に簡単に戻せる
- 差分を表示したり、混ぜたりするツールが揃っている

## 例3: チームで共同開発をするとき

### 従来の方法の欠点

変更点だったり、コードの状態をクラウドストレージで管理をする方法には以下の欠点があります：

- ファイルが乱立してどれかわからん
- プロジェクト全体でコードを最新に保てない
- 勝手にコードを混ぜられる危険がある

![](./_images/vscode-page-015.png)

### Git・GitHubを使った場合の利点

Git・GitHubを用いると、コードの管理をWeb上でまとめることができる。

- Git Cloneでプロジェクトを簡単に持ってこれる
- Git pullで簡単に最新にできる
- GitHubの便利なWebツールでコードを管理できる

![](./_images/vscode-page-016.png)

## コラム: チーム開発をする時に大事なこと

- 些細な問題でも、**違和感を感じたら**、すぐに連絡をする
 - コミュニケーションが大事
- マージをする時は、**勝手にマージをしない**
 - プロジェクト全体で連絡をする
- こまめにバックアップ、コミット、プルリクを出す
 - **大きすぎる変更点は事故の元**
 - ビッグバン変更点は出さないように

106 changes: 106 additions & 0 deletions
src/content/docs/textbook/git/02--git-install.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
---
title: Gitのインストール
description: Mac/WindowsでのGitのインストール手順を解説します
slug: textbook/git/git-install
sidebar:
 order: 2
---

## ターミナル/コマンドプロンプトを起動しよう

### Macの場合

1. `Command` + `Space` キーを押す
2. 「ターミナル」と入力
3. Enterを押す

ターミナルが起動します。

![](./_images/vscode-page-019.png)

### Windowsの場合

1. `Windows` キー + `R` キーを押す
2. 「cmd」と入力
3. OKを押す

コマンドプロンプトが立ち上がるはずです。

![](./_images/vscode-page-020.png)

## Gitが入っているか確認してみよう

以下のコマンドを入力して、Gitがインストールされているか確認しましょう。

```bash
git version
```

出力例：
```
git version 2.33.0.windows.2
```

![](./_images/vscode-page-022.png)

Gitのバージョンが帰ってこない場合、インストールが出来ていません。インストールから始めましょう！

## Gitをインストールしてみる（Mac）

Homebrewを使ってGitをインストールします。

```bash
brew install git
```

インストール後、バージョンを確認します。

```bash
git -v
```

出力例：
```
git version 2.37.0
```

![](./_images/vscode-page-023.png)

バージョンが帰ってきたらインストール完了です。

### Homebrewが入っていない方へ

Homebrewが入っていない方は以下のコマンドを実行してください。

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

```bash
echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> ~/.zprofile
```

```bash
eval $(/opt/homebrew/bin/brew shellenv)
```

Homebrewがインストールされたか確認します。

```bash
brew -v
```

出力例：
```
Homebrew 3.5.4
Homebrew/homebrew-core (git revision 7d69acd3065; last commit 2022-07-13)
Homebrew/homebrew-cask (git revision ce084d024b; last commit 2022-07-13)
```

## インストール手順（Windows）

Windowsの場合は、以下のURLを参照してください。

https://prog-8.com/docs/git-env-win

チャプター1「Gitのインストール」まで行ってください。

105 changes: 105 additions & 0 deletions
src/content/docs/textbook/git/03--github-account.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
---
title: GitHubアカウントを作成しよう
description: GitHubアカウントの作成手順を解説します
slug: textbook/git/github-account
sidebar:
 order: 3
---

## GitHubとは？

GitHub上にコードをあげてネットに**公開**したり、チーム開発でコードを**集結**させるのに用います。

![](./_images/vscode-page-027.png)

## GitHubとGitの違いは？

| GitHub | Git |
|--------|-----|
| オンラインでソースコードを保存してくれるサービスの名前 | バージョン管理をするシステムの名前 |

Gitは「プロジェクトやソースコードのバージョン管理を行うツール」です。過去に書いたコードの内容を復元したり、複数人での同時作業を効率的に進められる。

一方で、GitHubはGitを利用した開発者向けのウェブサービスです。GitHubには開発者にとって便利な機能が多く提供されている。Gitを使った他のウェブサービスも存在しますが、世界的に最も広く使われているのはGitHubである。

## アカウントを作成しましょう

プログラミングを行うに当たって便利なものです。アカウントを持っていない方は作っていきましょう。

## GitHubアカウントを作成する

### 1. GitHubにアクセス

https://github.com にアクセスする

### 2. サインアップを押す

画面右上の「Sign up」ボタンを押しましょう。

![](./_images/vscode-page-031.png)

### 3. メールアドレスを入力

メールアドレスを入力します。

:::tip
大学のメールにすると自動でPro版になります
:::

### 4. 必要情報を入力

以下の情報を入力します：

- **メールアドレス**: 大学のメールにすると自動でPro版になります
- **パスワード**: 大文字、小文字、数字、記号を入れる
- **ユーザー名**: 後で使うので控えておいてください
- **キャンペーンメールの許可**: 基本は「n」で大丈夫

![](./_images/vscode-page-033.png)

### 5. 認証をクリア

認証をクリアして、人間だと証明しましょう。

### 6. アカウント作成

「Create account」ボタンを押してアカウントを作成します。

![](./_images/vscode-page-035.png)

### 7. 確認コードを入力

メールアドレスに届いたコードを入力します。

![](./_images/vscode-page-036.png)

### 8. アンケートに答える

3つのアンケートに答えましょう：

1. **チーム開発はどれくらいの人数で行うのか？**
 - Just me / 2-5 / 5-10 / 10-20 / 20-50 / 50+ から選択

2. **学生か先生か？**
 - Student / Teacher から選択

3. **GitHubで気になるサービスを選択**
 - よくわからない方は、画面のチェックに合わせてもらえれば大丈夫です

![](./_images/vscode-page-037.png)

### 9. プランを選択

プランを選択します。**Freeプラン**を選択しましょう。

「Continue for free」をクリックします。

![](./_images/vscode-page-039.png)

### 10. 完了

アカウントを作成することができました！

![](./_images/vscode-page-040.png)

これでGitHubを使う準備が整いました。
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
昔Gitの資料を作ろうとして途中かけのやつをとりあえず出しておきます。#20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Draft

harutiro
wants to merge
3
commits into

base:main
Choose a base branch

from

 Draft


昔Gitの資料を作ろうとして途中かけのやつをとりあえず出しておきます。
#20
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
1de4340

とりあえずAIにお願いして、骨組みだけ作成


harutiro Feb 4, 2026
d2d6871

cli版を追加


harutiro Feb 4, 2026
2e75259

とりあえず、mdx化に成功した


harutiro Feb 4, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


11 changes: 11 additions & 0 deletions
astro.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -93,6 +93,17 @@ export default defineConfig({
 // },
 // ],
 // },
 {
 label: "Git・GitHub",
 link: "/textbook/git/version-control",
 icon: "seti:git",
 items: [
 {
 label: "Git入門",
 autogenerate: { directory: "textbook/git" },
 },
 ],
 },
 {
 label: "Web",
 link: "/textbook/web/for-classes/html-structure-basic",
Expand Down

91 changes: 91 additions & 0 deletions
src/content/docs/textbook/git/01--version-control.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
---
title: バージョン管理ツールとは何か？
description: Gitの基本概念とバージョン管理ツールの必要性について解説します
slug: textbook/git/version-control
sidebar:
 order: 1
---

## Gitとは何か？

Gitは**バージョン管理システム**の1つです。

- ファイルの**変更履歴**を管理してくれる
- チーム開発の**コード管理**をしてくれる

## Gitはどういうときに使うのか

- データを**戻したい**とき
- データを**混ぜ合わせる**とき
- コードの**バックアップ**をとるとき

## 例1: データをバックアップから戻したい時

### 従来の方法の欠点

課題などで、途中まで出来て一応バックアップを取りたい時、とりあえずフォルダごとコピーを取る方法には以下の欠点があります：

- どれが最新かわからないときも
- 戻す時に、コピペで戻すため事故るときがある（バックアップを消すなど）

![](./_images/vscode-page-011.png)

### Gitを使った場合の利点

Gitを用いると、ブランチを分けて簡単に戻せます。

- グラフで簡単に最新のコードが何かわかる
- ブランチを変えることでコードを戻すこともできる
- GitHubに上げることで、リモートでバックアップもできる

![](./_images/vscode-page-012.png)

## 例2: データを混ぜる時

### 従来の方法の欠点

みんなで開発をしている時に、コードを一つにまとめたい時がある。その時に、どこが変わっているのか差分を自分で見て直す必要がある。

- どこが変更されたか手動でみる
- どのファイルがマージ対象か自分で見極めないといけない
- 複数ファイルあると地獄をみる

### Gitを使った場合の利点

Gitを用いると、コマンド一つでまとめたり、差分を簡単に表示をしてくれる。

- グラフで簡単にどのような混ざり方をしているか見れる
- マージを間違えた時に簡単に戻せる
- 差分を表示したり、混ぜたりするツールが揃っている

## 例3: チームで共同開発をするとき

### 従来の方法の欠点

変更点だったり、コードの状態をクラウドストレージで管理をする方法には以下の欠点があります：

- ファイルが乱立してどれかわからん
- プロジェクト全体でコードを最新に保てない
- 勝手にコードを混ぜられる危険がある

![](./_images/vscode-page-015.png)

### Git・GitHubを使った場合の利点

Git・GitHubを用いると、コードの管理をWeb上でまとめることができる。

- Git Cloneでプロジェクトを簡単に持ってこれる
- Git pullで簡単に最新にできる
- GitHubの便利なWebツールでコードを管理できる

![](./_images/vscode-page-016.png)

## コラム: チーム開発をする時に大事なこと

- 些細な問題でも、**違和感を感じたら**、すぐに連絡をする
 - コミュニケーションが大事
- マージをする時は、**勝手にマージをしない**
 - プロジェクト全体で連絡をする
- こまめにバックアップ、コミット、プルリクを出す
 - **大きすぎる変更点は事故の元**
 - ビッグバン変更点は出さないように

106 changes: 106 additions & 0 deletions
src/content/docs/textbook/git/02--git-install.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
---
title: Gitのインストール
description: Mac/WindowsでのGitのインストール手順を解説します
slug: textbook/git/git-install
sidebar:
 order: 2
---

## ターミナル/コマンドプロンプトを起動しよう

### Macの場合

1. `Command` + `Space` キーを押す
2. 「ターミナル」と入力
3. Enterを押す

ターミナルが起動します。

![](./_images/vscode-page-019.png)

### Windowsの場合

1. `Windows` キー + `R` キーを押す
2. 「cmd」と入力
3. OKを押す

コマンドプロンプトが立ち上がるはずです。

![](./_images/vscode-page-020.png)

## Gitが入っているか確認してみよう

以下のコマンドを入力して、Gitがインストールされているか確認しましょう。

```bash
git version
```

出力例：
```
git version 2.33.0.windows.2
```

![](./_images/vscode-page-022.png)

Gitのバージョンが帰ってこない場合、インストールが出来ていません。インストールから始めましょう！

## Gitをインストールしてみる（Mac）

Homebrewを使ってGitをインストールします。

```bash
brew install git
```

インストール後、バージョンを確認します。

```bash
git -v
```

出力例：
```
git version 2.37.0
```

![](./_images/vscode-page-023.png)

バージョンが帰ってきたらインストール完了です。

### Homebrewが入っていない方へ

Homebrewが入っていない方は以下のコマンドを実行してください。

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

```bash
echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> ~/.zprofile
```

```bash
eval $(/opt/homebrew/bin/brew shellenv)
```

Homebrewがインストールされたか確認します。

```bash
brew -v
```

出力例：
```
Homebrew 3.5.4
Homebrew/homebrew-core (git revision 7d69acd3065; last commit 2022-07-13)
Homebrew/homebrew-cask (git revision ce084d024b; last commit 2022-07-13)
```

## インストール手順（Windows）

Windowsの場合は、以下のURLを参照してください。

https://prog-8.com/docs/git-env-win

チャプター1「Gitのインストール」まで行ってください。

105 changes: 105 additions & 0 deletions
src/content/docs/textbook/git/03--github-account.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
---
title: GitHubアカウントを作成しよう
description: GitHubアカウントの作成手順を解説します
slug: textbook/git/github-account
sidebar:
 order: 3
---

## GitHubとは？

GitHub上にコードをあげてネットに**公開**したり、チーム開発でコードを**集結**させるのに用います。

![](./_images/vscode-page-027.png)

## GitHubとGitの違いは？

| GitHub | Git |
|--------|-----|
| オンラインでソースコードを保存してくれるサービスの名前 | バージョン管理をするシステムの名前 |

Gitは「プロジェクトやソースコードのバージョン管理を行うツール」です。過去に書いたコードの内容を復元したり、複数人での同時作業を効率的に進められる。

一方で、GitHubはGitを利用した開発者向けのウェブサービスです。GitHubには開発者にとって便利な機能が多く提供されている。Gitを使った他のウェブサービスも存在しますが、世界的に最も広く使われているのはGitHubである。

## アカウントを作成しましょう

プログラミングを行うに当たって便利なものです。アカウントを持っていない方は作っていきましょう。

## GitHubアカウントを作成する

### 1. GitHubにアクセス

https://github.com にアクセスする

### 2. サインアップを押す

画面右上の「Sign up」ボタンを押しましょう。

![](./_images/vscode-page-031.png)

### 3. メールアドレスを入力

メールアドレスを入力します。

:::tip
大学のメールにすると自動でPro版になります
:::

### 4. 必要情報を入力

以下の情報を入力します：

- **メールアドレス**: 大学のメールにすると自動でPro版になります
- **パスワード**: 大文字、小文字、数字、記号を入れる
- **ユーザー名**: 後で使うので控えておいてください
- **キャンペーンメールの許可**: 基本は「n」で大丈夫

![](./_images/vscode-page-033.png)

### 5. 認証をクリア

認証をクリアして、人間だと証明しましょう。

### 6. アカウント作成

「Create account」ボタンを押してアカウントを作成します。

![](./_images/vscode-page-035.png)

### 7. 確認コードを入力

メールアドレスに届いたコードを入力します。

![](./_images/vscode-page-036.png)

### 8. アンケートに答える

3つのアンケートに答えましょう：

1. **チーム開発はどれくらいの人数で行うのか？**
 - Just me / 2-5 / 5-10 / 10-20 / 20-50 / 50+ から選択

2. **学生か先生か？**
 - Student / Teacher から選択

3. **GitHubで気になるサービスを選択**
 - よくわからない方は、画面のチェックに合わせてもらえれば大丈夫です

![](./_images/vscode-page-037.png)

### 9. プランを選択

プランを選択します。**Freeプラン**を選択しましょう。

「Continue for free」をクリックします。

![](./_images/vscode-page-039.png)

### 10. 完了

アカウントを作成することができました！

![](./_images/vscode-page-040.png)

これでGitHubを使う準備が整いました。
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
昔Gitの資料を作ろうとして途中かけのやつをとりあえず出しておきます。#20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Draft

harutiro
wants to merge
3
commits into

base:main
Choose a base branch

from

 Draft


昔Gitの資料を作ろうとして途中かけのやつをとりあえず出しておきます。
#20
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
1de4340

とりあえずAIにお願いして、骨組みだけ作成


harutiro Feb 4, 2026
d2d6871

cli版を追加


harutiro Feb 4, 2026
2e75259

とりあえず、mdx化に成功した


harutiro Feb 4, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


11 changes: 11 additions & 0 deletions
astro.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -93,6 +93,17 @@ export default defineConfig({
 // },
 // ],
 // },
 {
 label: "Git・GitHub",
 link: "/textbook/git/version-control",
 icon: "seti:git",
 items: [
 {
 label: "Git入門",
 autogenerate: { directory: "textbook/git" },
 },
 ],
 },
 {
 label: "Web",
 link: "/textbook/web/for-classes/html-structure-basic",
Expand Down

91 changes: 91 additions & 0 deletions
src/content/docs/textbook/git/01--version-control.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
---
title: バージョン管理ツールとは何か？
description: Gitの基本概念とバージョン管理ツールの必要性について解説します
slug: textbook/git/version-control
sidebar:
 order: 1
---

## Gitとは何か？

Gitは**バージョン管理システム**の1つです。

- ファイルの**変更履歴**を管理してくれる
- チーム開発の**コード管理**をしてくれる

## Gitはどういうときに使うのか

- データを**戻したい**とき
- データを**混ぜ合わせる**とき
- コードの**バックアップ**をとるとき

## 例1: データをバックアップから戻したい時

### 従来の方法の欠点

課題などで、途中まで出来て一応バックアップを取りたい時、とりあえずフォルダごとコピーを取る方法には以下の欠点があります：

- どれが最新かわからないときも
- 戻す時に、コピペで戻すため事故るときがある（バックアップを消すなど）

![](./_images/vscode-page-011.png)

### Gitを使った場合の利点

Gitを用いると、ブランチを分けて簡単に戻せます。

- グラフで簡単に最新のコードが何かわかる
- ブランチを変えることでコードを戻すこともできる
- GitHubに上げることで、リモートでバックアップもできる

![](./_images/vscode-page-012.png)

## 例2: データを混ぜる時

### 従来の方法の欠点

みんなで開発をしている時に、コードを一つにまとめたい時がある。その時に、どこが変わっているのか差分を自分で見て直す必要がある。

- どこが変更されたか手動でみる
- どのファイルがマージ対象か自分で見極めないといけない
- 複数ファイルあると地獄をみる

### Gitを使った場合の利点

Gitを用いると、コマンド一つでまとめたり、差分を簡単に表示をしてくれる。

- グラフで簡単にどのような混ざり方をしているか見れる
- マージを間違えた時に簡単に戻せる
- 差分を表示したり、混ぜたりするツールが揃っている

## 例3: チームで共同開発をするとき

### 従来の方法の欠点

変更点だったり、コードの状態をクラウドストレージで管理をする方法には以下の欠点があります：

- ファイルが乱立してどれかわからん
- プロジェクト全体でコードを最新に保てない
- 勝手にコードを混ぜられる危険がある

![](./_images/vscode-page-015.png)

### Git・GitHubを使った場合の利点

Git・GitHubを用いると、コードの管理をWeb上でまとめることができる。

- Git Cloneでプロジェクトを簡単に持ってこれる
- Git pullで簡単に最新にできる
- GitHubの便利なWebツールでコードを管理できる

![](./_images/vscode-page-016.png)

## コラム: チーム開発をする時に大事なこと

- 些細な問題でも、**違和感を感じたら**、すぐに連絡をする
 - コミュニケーションが大事
- マージをする時は、**勝手にマージをしない**
 - プロジェクト全体で連絡をする
- こまめにバックアップ、コミット、プルリクを出す
 - **大きすぎる変更点は事故の元**
 - ビッグバン変更点は出さないように

106 changes: 106 additions & 0 deletions
src/content/docs/textbook/git/02--git-install.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
---
title: Gitのインストール
description: Mac/WindowsでのGitのインストール手順を解説します
slug: textbook/git/git-install
sidebar:
 order: 2
---

## ターミナル/コマンドプロンプトを起動しよう

### Macの場合

1. `Command` + `Space` キーを押す
2. 「ターミナル」と入力
3. Enterを押す

ターミナルが起動します。

![](./_images/vscode-page-019.png)

### Windowsの場合

1. `Windows` キー + `R` キーを押す
2. 「cmd」と入力
3. OKを押す

コマンドプロンプトが立ち上がるはずです。

![](./_images/vscode-page-020.png)

## Gitが入っているか確認してみよう

以下のコマンドを入力して、Gitがインストールされているか確認しましょう。

```bash
git version
```

出力例：
```
git version 2.33.0.windows.2
```

![](./_images/vscode-page-022.png)

Gitのバージョンが帰ってこない場合、インストールが出来ていません。インストールから始めましょう！

## Gitをインストールしてみる（Mac）

Homebrewを使ってGitをインストールします。

```bash
brew install git
```

インストール後、バージョンを確認します。

```bash
git -v
```

出力例：
```
git version 2.37.0
```

![](./_images/vscode-page-023.png)

バージョンが帰ってきたらインストール完了です。

### Homebrewが入っていない方へ

Homebrewが入っていない方は以下のコマンドを実行してください。

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

```bash
echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> ~/.zprofile
```

```bash
eval $(/opt/homebrew/bin/brew shellenv)
```

Homebrewがインストールされたか確認します。

```bash
brew -v
```

出力例：
```
Homebrew 3.5.4
Homebrew/homebrew-core (git revision 7d69acd3065; last commit 2022-07-13)
Homebrew/homebrew-cask (git revision ce084d024b; last commit 2022-07-13)
```

## インストール手順（Windows）

Windowsの場合は、以下のURLを参照してください。

https://prog-8.com/docs/git-env-win

チャプター1「Gitのインストール」まで行ってください。

105 changes: 105 additions & 0 deletions
src/content/docs/textbook/git/03--github-account.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
---
title: GitHubアカウントを作成しよう
description: GitHubアカウントの作成手順を解説します
slug: textbook/git/github-account
sidebar:
 order: 3
---

## GitHubとは？

GitHub上にコードをあげてネットに**公開**したり、チーム開発でコードを**集結**させるのに用います。

![](./_images/vscode-page-027.png)

## GitHubとGitの違いは？

| GitHub | Git |
|--------|-----|
| オンラインでソースコードを保存してくれるサービスの名前 | バージョン管理をするシステムの名前 |

Gitは「プロジェクトやソースコードのバージョン管理を行うツール」です。過去に書いたコードの内容を復元したり、複数人での同時作業を効率的に進められる。

一方で、GitHubはGitを利用した開発者向けのウェブサービスです。GitHubには開発者にとって便利な機能が多く提供されている。Gitを使った他のウェブサービスも存在しますが、世界的に最も広く使われているのはGitHubである。

## アカウントを作成しましょう

プログラミングを行うに当たって便利なものです。アカウントを持っていない方は作っていきましょう。

## GitHubアカウントを作成する

### 1. GitHubにアクセス

https://github.com にアクセスする

### 2. サインアップを押す

画面右上の「Sign up」ボタンを押しましょう。

![](./_images/vscode-page-031.png)

### 3. メールアドレスを入力

メールアドレスを入力します。

:::tip
大学のメールにすると自動でPro版になります
:::

### 4. 必要情報を入力

以下の情報を入力します：

- **メールアドレス**: 大学のメールにすると自動でPro版になります
- **パスワード**: 大文字、小文字、数字、記号を入れる
- **ユーザー名**: 後で使うので控えておいてください
- **キャンペーンメールの許可**: 基本は「n」で大丈夫

![](./_images/vscode-page-033.png)

### 5. 認証をクリア

認証をクリアして、人間だと証明しましょう。

### 6. アカウント作成

「Create account」ボタンを押してアカウントを作成します。

![](./_images/vscode-page-035.png)

### 7. 確認コードを入力

メールアドレスに届いたコードを入力します。

![](./_images/vscode-page-036.png)

### 8. アンケートに答える

3つのアンケートに答えましょう：

1. **チーム開発はどれくらいの人数で行うのか？**
 - Just me / 2-5 / 5-10 / 10-20 / 20-50 / 50+ から選択

2. **学生か先生か？**
 - Student / Teacher から選択

3. **GitHubで気になるサービスを選択**
 - よくわからない方は、画面のチェックに合わせてもらえれば大丈夫です

![](./_images/vscode-page-037.png)

### 9. プランを選択

プランを選択します。**Freeプラン**を選択しましょう。

「Continue for free」をクリックします。

![](./_images/vscode-page-039.png)

### 10. 完了

アカウントを作成することができました！

![](./_images/vscode-page-040.png)

これでGitHubを使う準備が整いました。
Loading