diff --git a/astro.config.mjs b/astro.config.mjs index fd90fb8..a976c6f 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -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", diff --git a/src/content/docs/textbook/git/01--version-control.mdx b/src/content/docs/textbook/git/01--version-control.mdx new file mode 100644 index 0000000..666070b --- /dev/null +++ b/src/content/docs/textbook/git/01--version-control.mdx @@ -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) + +## コラム: チーム開発をする時に大事なこと + +- 些細な問題でも、**違和感を感じたら**、すぐに連絡をする + - コミュニケーションが大事 +- マージをする時は、**勝手にマージをしない** + - プロジェクト全体で連絡をする +- こまめにバックアップ、コミット、プルリクを出す + - **大きすぎる変更点は事故の元** + - ビッグバン変更点は出さないように diff --git a/src/content/docs/textbook/git/02--git-install.mdx b/src/content/docs/textbook/git/02--git-install.mdx new file mode 100644 index 0000000..d60de58 --- /dev/null +++ b/src/content/docs/textbook/git/02--git-install.mdx @@ -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のインストール」まで行ってください。 diff --git a/src/content/docs/textbook/git/03--github-account.mdx b/src/content/docs/textbook/git/03--github-account.mdx new file mode 100644 index 0000000..62c8d16 --- /dev/null +++ b/src/content/docs/textbook/git/03--github-account.mdx @@ -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を使う準備が整いました。 diff --git a/src/content/docs/textbook/git/04--git-config.mdx b/src/content/docs/textbook/git/04--git-config.mdx new file mode 100644 index 0000000..bd21b4c --- /dev/null +++ b/src/content/docs/textbook/git/04--git-config.mdx @@ -0,0 +1,167 @@ +--- +title: Gitの初期設定を行う +description: ターミナルを使ってGitのユーザー名、メールアドレス、SSHキーの設定を行う方法を解説します。 +slug: textbook/git/git-config +sidebar: + order: 4 +--- + +## ターミナルを起動しよう + +### Macの場合 + +1. `Command` + `Space` を押してSpotlightを開く +2. 「ターミナル」と入力 +3. `Enter` を押す + +### Windowsの場合 + +Git Bashを起動します。 + +![](./_images/vscode-page-044.png) + +## ユーザー名とアドレスを登録する + +GitHubで登録したユーザー名とメールアドレスを設定します。 + +```bash +# ユーザー名を設定 +git config --global user.name "ユーザー名" + +# メールアドレスを設定 +git config --global user.email "メールアドレス" +``` + +設定を確認するには以下のコマンドを実行します。 + +```bash +# ユーザー名を確認 +git config user.name + +# メールアドレスを確認 +git config user.email +``` + +![](./_images/vscode-page-047.png) + +## SSHを用いてログインをする理由 + +2021年8月13日まではユーザー名とパスワードを用いてログインを行っていました。しかし、ユーザー名とパスワードでは、漏れてしまった時に乗っ取られる危険があったため、よりセキュアである、公開鍵認証を用いた方式に変更されました。 + +### SSHを用いるメリット + +- 認証に必要な秘密情報そのものはネットワーク上に送出されない +- 認証に使われる署名は一時的なもので再利用はできない +- 秘密鍵を推測して偽造することは非常に困難 +- パスフレーズを設定して鍵そのものをロックすることができる + +## SSHキーを作成する + +### 1. ホームディレクトリに移動して.sshフォルダを確認 + +```bash +# ホームディレクトリに移動 +cd + +# .sshフォルダがあるか確認 +ls -al | grep .ssh +``` + +`.ssh`フォルダが表示されない場合は作成します。 + +![](./_images/vscode-page-050.png) + +```bash +# .sshフォルダを作成 +mkdir .ssh + +# .sshフォルダに移動 +cd .ssh +``` + +### 2. SSHキーを生成 + +```bash +ssh-keygen -t ed25519 +``` + +実行すると以下の質問が表示されます。 + +1. **ファイル名の指定** - デフォルトのままでOKなので、そのまま `Enter` を押す +2. **パスワードの設定** - 今回はそのまま `Enter` を押す +3. **パスワードの確認** - 今回はそのまま `Enter` を押す + +### 3. SSHキーが作成できたか確認 + +```bash +ls ~/.ssh +``` + +`id_ed25519` と `id_ed25519.pub` の2つのファイルが表示されれば成功です。 + +![](./_images/vscode-page-052.png) + +### 4. 公開鍵の内容をコピー + +SSHキーの公開鍵が表示されるので、出力された内容を全てコピーします。 + +```bash +cat ~/.ssh/id_ed25519.pub +``` + +出力例: +``` +ssh-ed25519 AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA +``` + +![](./_images/vscode-page-053.png) + +## SSHキーをGitHubに登録する + +1. https://github.com にアクセスする +2. 右上のアイコンをクリックして、**Settings** を押す + +![](./_images/vscode-page-055.png) + +3. 左側のメニューから **SSH and GPG keys** を押す + +![](./_images/vscode-page-056.png) + +4. **New SSH key** ボタンを押す + +![](./_images/vscode-page-057.png) + +5. 以下の情報を入力: + - **Title**: わかりやすい名前をつける(例: MacBookAir) + - **Key type**: Authentication Key + - **Key**: コピーした公開鍵を貼り付ける +6. **Add SSH key** ボタンを押す + +![](./_images/vscode-page-058.png) + +登録した名前が表示されれば成功です。 + +## SSH接続を確認する + +以下のコマンドを実行して、GitHubに接続できるか確認します。 + +```bash +ssh -T git@github.com +``` + +初回接続時は以下のようなメッセージが表示されます。 + +``` +This key is not known by any other names +Are you want to continue connecting (yes/no/[fingerprint])? +``` + +`yes` と入力して `Enter` を押します。 + +``` +Hi <ユーザー名>! You've successfully authenticated, but GitHub does not provide shell access. +``` + +`Hi` の後にユーザー名が出力されれば成功です。 + +![](./_images/vscode-page-060.png) diff --git a/src/content/docs/textbook/git/05--vscode-setup.mdx b/src/content/docs/textbook/git/05--vscode-setup.mdx new file mode 100644 index 0000000..f3f7dd3 --- /dev/null +++ b/src/content/docs/textbook/git/05--vscode-setup.mdx @@ -0,0 +1,83 @@ +--- +title: VSCodeの初期設定 +description: Visual Studio Codeのインストール方法と、Git関連の拡張機能の設定方法を解説します。 +slug: textbook/git/vscode-setup +sidebar: + order: 5 +--- + +## VSCodeとは? + +Microsoftが作成した、無料のファイルエディタです。拡張機能が充実していて、軽量なためみんなに愛されています。今回Gitの管理はVSCode上から行います。 + +![](./_images/vscode-page-062.png) + +## VSCodeのインストール + +### Windowsの場合 + +以下のリンクを参考にして、インストールを行ってください。 + +https://qiita.com/mmake/items/2cf2131a0ab5bc431215 + +### Macの場合 + +1. 以下のURLにアクセスして、**Download for Mac** を押す + + https://code.visualstudio.com/ + +2. ダウンロードしたファイルをダブルクリックして、解凍をしてください + +![](./_images/vscode-page-065.png) + +3. Visual Studio Codeをアプリケーションフォルダーに移しましょう + +4. Launchpadをクリックして、Visual Studio Codeが表示されていれば、クリックして、アプリを開きましょう + +![](./_images/vscode-page-067.png) + +## PATHにCodeをインストールする(Macのみ) + +シェルで `code .` と入力した時に、VSCodeを起動するための設定です。 + +1. `Command` + `Shift` + `P` を押してコマンドパレットを表示する +2. `path` と入力して、「シェルコマンド: PATH内に 'code' コマンドをインストールします」を押す +3. ポップアップの通りに進める +4. 「シェルコマンド 'code' が〜」と表示されれば完了 + +![](./_images/vscode-page-069.png) + +## 拡張機能について + +VSCodeの拡張機能は有志で作成されているため、同じような機能でも複数個の拡張機能があります。Git History派の人もいますし、Git Graph派の人もいます。 + +今回は Git Graph で資料を作成します。他の拡張機能を使いたい方は、いい感じに読み替えていただけると助かります。 + +## Git Graphをインストールする + +1. VSCodeの左側にある拡張機能アイコン(四角が4つのアイコン)を押す + +![](./_images/vscode-page-071.png) + +2. 検索欄に `git` と入力する +3. **Git Graph** を見つけて、**インストール** ボタンを押す + +![](./_images/vscode-page-072.png) + +4. 「無効にする」という表示がされればインストールが完了です + +## Tips: おすすめの拡張機能 + +### Material Icon Theme +ファイルのアイコンの見た目を変える拡張機能です。 + +### One Dark Pro +VSCodeのテーマを変える拡張機能です。 + +### Code Spell Checker +誤字を見つけてくれる拡張機能です。 + +### Japanese Language Pack for Visual Studio Code +VSCodeを日本語対応にする拡張機能です。 + +![](./_images/vscode-page-074.png) diff --git a/src/content/docs/textbook/git/06--git-flow.mdx b/src/content/docs/textbook/git/06--git-flow.mdx new file mode 100644 index 0000000..5623f43 --- /dev/null +++ b/src/content/docs/textbook/git/06--git-flow.mdx @@ -0,0 +1,124 @@ +--- +title: Gitの基本的な流れ +description: Gitの基本操作であるadd、commit、push、pullの流れと、ローカル環境の3つのエリアについて解説します。 +slug: textbook/git/git-flow +sidebar: + order: 6 +--- + +## Gitの大きな流れ + +Gitの基本的な操作は以下の4つです。 + +- **Add** - コミットするファイルを追加する +- **Commit** - 追加・変更点をGitに追加する +- **Push** - リモート(ネット)に打ち上げる +- **Pull** - リモート(ネット)から変更点をもらう + +![](./_images/vscode-page-076.png) + +## Gitの状態とは? + +ローカルの環境は3つのエリアに分かれています。 + +### リポジトリ +変更履歴の記録を保存する場所です。 + +### ステージ +履歴を新しく保存する一覧を用意する場所です。コミットしたいファイルを選択する場所とも言えます。 + +### ワークツリー +作業をする場所です。実際にファイルを編集する場所です。 + +![](./_images/vscode-page-078.png) + +## ファイルの編集をしているとき + +ワークツリーでファイルを編集します。この時点では、Gitには何も記録されていません。 + +## addをすると + +`git add` コマンドを実行すると、ワークツリーからステージにファイルを上げます。 + +イメージとしては、コミットしたいファイルを選択しているだけです。 + +```bash +# 特定のファイルをステージに追加 +git add ファイル名 + +# すべての変更をステージに追加 +git add . +``` + +![](./_images/vscode-page-081.png) + +## commitをすると + +`git commit` コマンドを実行すると、ステージに上がっているファイルを一塊にして、履歴として残します。 + +イメージとしては、残したいタイミングでファイルをコピーして残している感じです。 + +```bash +git commit -m "コミットメッセージ" +``` + +![](./_images/vscode-page-082.png) + +## ファイルを少し変更する + +コミット後にファイルを変更した場合(例: HTMLファイルにButtonのタグを追加)、その変更はワークツリーにのみ存在します。 + +## 変更点をaddする + +変更したファイルだけをステージに上げます。それ以外のファイルはあげません。 + +Gitは差分だけを保存するので、変更した部分だけが記録されます。 + +## 変更点をcommitする + +ステージに上がっているファイルの変更内容を、変更履歴に残します。 + +これで新しいコミット(id: 2)が作成され、履歴として保存されます。 + +## pushとは? + +ローカルの状態をリモートにアップロードすることです。 + +- **GitHub** - オンライン上のファイルを管理するサービス(リモート) +- **push(プッシュ)** - アップロード + +ローカルのリポジトリとGitHub側のリポジトリを同じ状態にする(アップロードする)操作です。 + +```bash +git push origin main +``` + +![](./_images/vscode-page-086.png) + +## pullとは? + +リモートの状態をローカルにダウンロードすることです。 + +- **pull(プル)** - ダウンロード + +他の人が変更をpushした場合、その変更を自分のローカル環境に取り込むために使用します。 + +```bash +git pull origin main +``` + +![](./_images/vscode-page-087.png) + +![](./_images/vscode-page-089.png) + +## まとめ + +Gitの基本的な流れは以下の通りです。 + +1. **ファイルを編集する** - ワークツリーで作業 +2. **add** - 変更したファイルをステージに追加 +3. **commit** - ステージの内容を履歴として保存 +4. **push** - ローカルの履歴をリモートにアップロード +5. **pull** - リモートの変更をローカルにダウンロード + +この流れを繰り返すことで、チームでの開発やバージョン管理が可能になります。 diff --git a/src/content/docs/textbook/git/07--commit.mdx b/src/content/docs/textbook/git/07--commit.mdx new file mode 100644 index 0000000..9348a6b --- /dev/null +++ b/src/content/docs/textbook/git/07--commit.mdx @@ -0,0 +1,344 @@ +--- +title: 実際にcommitまでやってみる +description: VS CodeでGitのプロジェクト作成からcommitまでの流れを学びます +slug: textbook/git/commit +sidebar: + order: 7 +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components' +export const CLI_OR_GUI_SYNC_KEY = 'git::cli-or-gui'; + +## Gitの大きな流れ + +Gitでは以下の4つの操作を繰り返して開発を進めます。 + +- **Add** - コミットするファイルを追加する +- **Commit** - 追加・変更点をGitに追加する +- **Push** - リモート(ネット)に打ち上げる +- **Pull** - リモート(ネット)から変更点をもらう + +![](./_images/vscode-page-091.png) + +## プロジェクトを作成する + + + + +### 1. フォルダを開く + +VS Codeのエクスプローラーから「フォルダーを開く」を押します。 + +![](./_images/vscode-page-092.png) + +### 2. 新規フォルダを作成 + +プロジェクトを作成したい場所で「新規フォルダ」を押します。 + +![](./_images/vscode-page-093.png) + +### 3. プロジェクト名を設定 + +プロジェクト名を適宜設定して「作成」を押します。今回は `GitTest` とします。 + +![](./_images/vscode-page-094.png) + +### 4. フォルダを開く + +作成したフォルダを選択して「開く」を押します。 + +![](./_images/vscode-page-095.png) + +### 5. リポジトリの初期化 + +1. サイドバーの「ソース管理」アイコンをクリック +2. 「リポジトリを初期化する」を押す + +![](./_images/vscode-page-096.png) + +これでGitを使える状態になりました。 + +![](./_images/vscode-page-097.png) + + + + +### 1. ターミナルを起動する + +**Mac の場合**: Command + Space で Spotlight を開き、「ターミナル」と入力して Enter を押します。 + +**Windows の場合**: Win + R で「ファイル名を指定して実行」を開き、`cmd` と入力して OK を押します。 + +### 2. プロジェクトフォルダを作成 + +```bash +# srcフォルダがある場合はその中に作成(なければスキップ) +mkdir src +cd src + +# プロジェクトフォルダを作成 +mkdir GitTest +cd GitTest +``` + +### 3. リポジトリの初期化 + +```bash +git init +``` + +以下のような出力が表示されれば成功です。 + +``` +Initialized empty Git repository in <パス>/GitTest/.git/ +``` + +これでGitを使える状態になりました。 + + + + +## ファイルを作成して、コーディングをしよう + +### ワークツリーとステージとリポジトリ + +Gitには3つの領域があります。 + +- **リポジトリ** - コミットされた変更履歴が保存される場所 +- **ステージ** - コミット前の変更を一時的に置く場所 +- **ワークツリー** - 実際にファイルを編集する作業場所 + +### ファイルの作成 + + + + +1. エクスプローラーをクリック +2. 新規ファイル作成アイコンをクリック +3. ファイル名を入力(今回は `index.html`)してエンターを押して作成 + +![](./_images/vscode-page-098.png) + + + + +```bash +# Macの場合 +touch index.html + +# Windowsの場合 +type nul > index.html +``` + + + + +### HTMLテンプレートの入力 + +`index.html` ファイルで `html:5` と入力してエンターを押すと、自動でHTMLテンプレートが入力されます。 + +![](./_images/vscode-page-099.png) + +```html + + + + + + Document + + + + + +``` + +## Addをしてみる + + + + +1. サイドバーの「ソース管理」をクリック +2. 変更されたファイル(`index.html`)の横にある「+」ボタン(変更をステージ)を押してAddをする + +![](./_images/vscode-page-101.png) + +ステージされている変更にファイルが入っていればOKです。 + +![](./_images/vscode-page-102.png) + + + + +```bash +# 特定のファイルをステージに追加 +git add index.html + +# すべてのファイルをステージに追加する場合 +git add -A +``` + +ステータスを確認してみましょう。 + +```bash +git status +``` + +以下のような出力が表示されます。 + +``` +On branch master +Changes to be committed: + (use "git restore --staged ..." to unstage) + modified: index.html +``` + +ファイルがステージに追加されていることが確認できます。 + + + + +## コミットしてみる + + + + +1. コミットメッセージ(変更箇所をわかりやすくするメモ)を入力欄に書く + - 例:「htmlのテンプレートを追加」 +2. 「コミット」ボタンを押す + +![](./_images/vscode-page-103.png) + +これでステージにあったファイルがリポジトリに保存されました。 + + + + +```bash +git commit -m "初めてのコミット" +``` + +`-m` オプションの後にコミットメッセージを入力します。 + +これでステージにあったファイルがリポジトリに保存されました。 + + + + +## コミットした履歴を見てみる + + + + +変更履歴を確認するために、VS Code左下の「Git Graph」を押します。 + +![](./_images/vscode-page-104.png) + +Git Graphを見ることで、Gitの現状の状態を把握することができます。 + +![](./_images/vscode-page-105.png) + + + + +```bash +git log +``` + +以下のような出力が表示されます。 + +``` +commit 0cd513265131d7f2d915e9965d5b10ba94e80a44 (HEAD -> master) +Author: harutiro +Date: Wed Jul 13 10:48:44 2022 +0900 + + 初めてのコミット +``` + +コミットをした履歴をみることが出来ます。 + + + + +## GitHubでリポジトリを作成する + + + + +### 1. Branchの発行 + +1. ソース管理を開く +2. 「Branch の発行」を押す + +![](./_images/vscode-page-106.png) + +### 2. リポジトリの設定 + +1. GitHubでのリポジトリ名を記述します(今回は同じく `GitTest` とする) +2. PrivateとPublicを選択します + - **Private** - 自分だけにしか公開されません + - **Public** - 全世界に公開されます + - 今回はPrivateにしておきましょう + +![](./_images/vscode-page-107.png) + +### 3. 確認 + +右下に「GitHub上で開く」というポップアップが表示されるので、「GitHub上で開く」を押します。 + +![](./_images/vscode-page-108.png) + +作成されているファイルが表示されていたら成功です。 + +![](./_images/vscode-page-109.png) + + + + +### 1. GitHubでリポジトリを作成 + +1. https://github.com にアクセスする +2. 右上のアイコンをクリックして「Your profile」を選択 +3. 「Repositories」タブをクリック +4. 「New」ボタンをクリック +5. リポジトリ名を入力(今回は `GitTest`) +6. Public または Private を選択 +7. 「Create repository」をクリック + +### 2. SSHのURLをコピー + +作成されたリポジトリページで「SSH」が選択されていることを確認し、URLをコピーします。 + +### 3. リモートリポジトリを追加 + +```bash +git remote add origin <コピーしたURL> +``` + +例: +```bash +git remote add origin git@github.com:harutiro/GitTest.git +``` + +### 4. プッシュする + +```bash +git push origin main +``` + +GitHubのリポジトリページを更新して、ファイルが表示されていたら成功です。 + + + + +## まとめ + +Gitの基本的な流れを覚えましょう。 + +1. **編集** - ファイルを編集する +2. **Add** - コミットするファイルを追加する +3. **Commit** - 追加・変更点をGitに追加する +4. **Push** - リモート(ネット)に打ち上げる +5. **Pull** - リモート(ネット)から変更点をもらう + +この流れを繰り返して開発を進めていきます。 diff --git a/src/content/docs/textbook/git/08--file-changes.mdx b/src/content/docs/textbook/git/08--file-changes.mdx new file mode 100644 index 0000000..67f1248 --- /dev/null +++ b/src/content/docs/textbook/git/08--file-changes.mdx @@ -0,0 +1,114 @@ +--- +title: ファイルの変更を行ってみる +description: Gitでファイルを変更してコミット・プッシュする流れを学びます +slug: textbook/git/file-changes +sidebar: + order: 8 +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components' +export const CLI_OR_GUI_SYNC_KEY = 'git::cli-or-gui'; + +## 先ほどと同じ流れでファイルを編集してみる + +先ほど作った `index.html` を使って少し編集をしてみましょう。 + +以下のように、`` タグ内に `Hello World` を記述してみましょう。 + +```html + + + + + + Document + + +

Hello World

+ + +``` + +## 変更をコミットする + + + + +1. ステージするファイルを「+」ボタンでaddする +2. コミットメッセージ(変更箇所をわかりやすくするメモ)を書く + - 例:「HelloWorldを追記」 +3. 「コミット」ボタンを押す + +![](./_images/vscode-page-114.png) + + + + +1. 変更をステージに追加する + +```bash +git add index.html +``` + +2. コミットする + +```bash +git commit -m "HelloWorldを追記" +``` + + + + +## 変更をGitHubに反映させる + + + + +変更をGitHub側に反映させるために、「変更の同期」を押しましょう。 + +![](./_images/vscode-page-115.png) + +これで新しい変更を保存することが出来ました。 + + + + +変更をGitHub側に反映させるために、プッシュを行います。 + +```bash +git push origin main +``` + +これで新しい変更を保存することが出来ました。 + +GitHub上のリポジトリの変更点をローカルに反映させる場合は、プルを行います。 + +```bash +git pull origin main +``` + + + + +## Tips: ファイル名の色について + +おそらくファイルの色が変わって少し違和感を感じるかもしれません。 +ファイルの色はGitの状態を表しています。 + +![](./_images/vscode-page-116.png) + +| 色 | 状態 | +|---|---| +| 黄色(オレンジ) | 変更された箇所があります | +| 白色 | 何も変更がないです | +| 緑色 | 新規で作成されたファイルです | + +## 草を増やそう + +この流れでどんどんコミットを増やして、GitHubの草(コントリビューショングラフ)を生やしていきましょう。 + +![](./_images/vscode-page-117.png) + +GitHubのプロフィールページには、1年間のコミット活動が緑色のマス目で表示されます。コミットが多い日ほど濃い緑色になります。 + +継続的にコードを書いてコミットすることで、草がどんどん増えていきます。 diff --git a/src/content/docs/textbook/git/09--branch.mdx b/src/content/docs/textbook/git/09--branch.mdx new file mode 100644 index 0000000..a5c92f6 --- /dev/null +++ b/src/content/docs/textbook/git/09--branch.mdx @@ -0,0 +1,256 @@ +--- +title: ブランチを切ってみる +description: Gitのブランチ機能を使って安全に開発を進める方法を学びます +slug: textbook/git/branch +sidebar: + order: 9 +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components' +export const CLI_OR_GUI_SYNC_KEY = 'git::cli-or-gui'; + +## ブランチを切る利点 + +### Mainブランチは安全地帯 + +コードを書くときにMainブランチは、エラーが絶対出ない安全地帯にする必要があります。 + +![](./_images/vscode-page-120.png) + +### 自由に開発できる場所を作る + +ブランチを切ることによって、どんなにメチャクチャにしてもいい場所をつくって開発することができます。 + +- ブランチを切ることによって、どんなにヘンテコなものを書いても許される(実際には書かないでね!) +- 新規機能を作成する際も、Mainブランチに影響を与えずに開発できる +- バグやエラーが発生しても、Mainブランチは安全なまま + +![](./_images/vscode-page-121.png) + +## コンフリクトとは + +Mainブランチはみんなで開発をするとコンフリクト(コードの衝突)が起きることもあります。 + +![](./_images/vscode-page-122.png) + +例えば、AさんとBさんが同じファイルの同じ行を編集した場合: +- Aさん:1行目はアラートの表示を書く +- Bさん:1行目は、ボタンの処理を書く + +このような場合、GitHubは1行目がボタンの処理か、アラートの処理かわからなくなります。これがコンフリクトです。 + +ブランチを切って作業することで、このようなコンフリクトを防ぎやすくなります。 + +## mainブランチから切り離してみましょう + +### ブランチの一覧を表示してみる + + + + +VS Codeの左下にある、ブランチまたはタグのチェックアウトを押しましょう。 +おそらく `main` と表示されているはずです。 + +![](./_images/vscode-page-124.png) + + + + +以下のコマンドで、今あるブランチの一覧を表示します。 + +```bash +git branch +``` + +`*` がついているところが今いるブランチです。おそらく `main` または `master` と表示されているはずです。 + +```text +* main +``` + +:::note[注意] +ブランチ名が `master` の場合と `main` の場合があるので、確認をお願いします。 +`main` だった場合はうまく読み替えてください。 +::: + + + + +### ブランチを作ってみる + + + + +1. 「新しいブランチの作成...」を押します + +![](./_images/vscode-page-125.png) + +2. 作成したいブランチ名を記述して、エンターを押しましょう + - 今回は `newBranch` という名前にします + +![](./_images/vscode-page-126.png) + +これで新しいブランチが作成され、自動的にそのブランチに切り替わります。 + + + + +以下のコマンドで、新しいブランチを作成します。 + +```bash +git branch newBranch +``` + +ブランチが作成されたか確認してみましょう。 + +```bash +git branch +``` + +```text +* main + newBranch +``` + +newBranchが作成されました。ただし、まだ `main` ブランチにいる状態です。 + +次に、作成したブランチに移動(チェックアウト)します。 + +```bash +git checkout newBranch +``` + +```bash +git branch +``` + +```text + main +* newBranch +``` + +`*` が `newBranch` に移動し、新しいブランチに切り替わりました。 + + + + +## ファイルを変更してコミットしてみる + +では、またindex.htmlを使って少し編集をしてみましょう。 + +以下のように、「ここは新しいブランチです」を記述してみましょう。 + +```html + + + + + + Document + + +

Hello World

+

ここは新しいブランチです

+ + +``` + +### コミットする + + + + +1. ステージするファイルをaddする +2. コミットメッセージを書く + - 例:「新しいメッセージを記述」 +3. コミットを押す + +![](./_images/vscode-page-129.png) + + + + +以下のコマンドで、ファイルをステージしてコミットします。 + +```bash +git add -A +git commit -m "indexに文を追加した2" +``` + + + + +### 変更を同期する + + + + +変更をGitHub側に反映させるために、「変更の同期」を押しましょう。 + +![](./_images/vscode-page-130.png) + +これで新しい変更を保存することが出来ました。 + + + + +変更をGitHub側に反映させるために、以下のコマンドを実行します。 + +```bash +git push origin newBranch +``` + +これで新しい変更を保存することが出来ました。 + + + + +## GitGraphを確認してみよう + + + + +おそらく、2つのブランチがあり、mainブランチの先にnewBranchがあると思います。 + +![](./_images/vscode-page-131.png) + +**newBranch** - 新しく作成したブランチ(最新のコミットがある) + +**main** - 元のブランチ + + + + +以下のコマンドで、ブランチの状態をグラフ形式で確認できます。 + +```bash +git log --graph --all +``` + +短い版でより見やすく表示することもできます。 + +```bash +git log --graph --all --oneline +``` + +おそらく、2つのブランチがあり、mainブランチの先にnewBranchがあると思います。 + +**newBranch** - 新しく作成したブランチ(最新のコミットがある) + +**main** - 元のブランチ + +今はただの点に見えますが、今後Gitをたくさん使っていくとどんどんカラフルになります。 + + + + +## ブランチを切った後の流れ + +ブランチを切った後も、基本的な流れは同じです。 + +1. **Add** - コミットするファイルを追加する +2. **Commit** - 追加・変更点をGitに追加する +3. **Push** - リモート(ネット)に打ち上げる +4. **Pull** - リモート(ネット)から変更点をもらう + +あとはこの流れに沿って、Gitを使っていきましょう。 diff --git a/src/content/docs/textbook/git/10--checkout.mdx b/src/content/docs/textbook/git/10--checkout.mdx new file mode 100644 index 0000000..293ef2e --- /dev/null +++ b/src/content/docs/textbook/git/10--checkout.mdx @@ -0,0 +1,215 @@ +--- +title: チェックアウトをしてみる +description: Gitでブランチを移動するチェックアウトの方法を学びます +slug: textbook/git/checkout +sidebar: + order: 10 +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components' +export const CLI_OR_GUI_SYNC_KEY = 'git::cli-or-gui'; + +## チェックアウトとは + +チェックアウト(checkout)は、ブランチを移動するためのコマンドです。異なるブランチに切り替えることで、そのブランチの状態でファイルを確認・編集できます。 + +## ブランチを移動してみる + + + + +### VSCodeでのチェックアウト方法 + +1. VSCodeの左下にある、ブランチまたはタグのチェックアウトを押します + - おそらく `newBranch` と表示されているはずです + +![](./_images/vscode-page-136.png) + +2. チェックアウトするブランチまたはタグを選択するメニューが表示されます + - 「新しいブランチの作成...」 + - 「新しいブランチを以下から作成...」 + - ローカルブランチ(例: `newBranch`、`main`) + - リモートブランチ(例: `origin/newBranch`、`origin/main`) + +3. `main` をダブルクリックすると、チェックアウトできます + +![](./_images/vscode-page-137.png) + +これでmainブランチに戻ることができました。 + + + + +### CLIでのチェックアウト方法 + +まず、現在のブランチとファイルの中身を確認してみましょう。 + +**Windowsの方:** +```bash +type index.html +``` + +**Macの方:** +```bash +cat index.html +``` + +newBranchで追加した内容が表示されるはずです。 + +次に、mainブランチに移動します。 + +```bash +git checkout main +``` + +ブランチが切り替わったか確認しましょう。 + +```bash +git branch +``` + +```text +* main + newBranch +``` + +`*` が `main` に移動し、mainブランチに戻ることができました。 + + + + +## ファイルが戻っているか確認する + + + + +ファイルを確認することで、先ほど記述した `

ここは新しいブランチです

` がなくなっているのがわかります。 + +![](./_images/vscode-page-140.png) + +チェックアウトによって、ブランチごとに異なるファイルの状態を切り替えることができます。 + +
+ + +ファイルの中身を確認してみましょう。 + +**Windowsの方:** +```bash +type index.html +``` + +**Macの方:** +```bash +cat index.html +``` + +先ほど記述した内容がなくなっているのがわかります。 + +チェックアウトによって、ブランチごとに異なるファイルの状態を切り替えることができます。 + + +
+ +## ログを確認してみよう + + + + +Git Graphをみると、mainのブランチに対して、青く選択されているのがわかります。これにより、現在どのブランチにいるかを視覚的に確認できます。 + +![](./_images/vscode-page-141.png) + + + + +以下のコマンドでログを確認できます。 + +```bash +git log --graph --all --oneline +``` + +現在のHEADが `main` を指していることが確認できます。これにより、現在どのブランチにいるかを確認できます。 + + + + +## Tips: Git Graphでチェックアウトをする + + + + +Git Graphからも簡単にチェックアウトができます。 + +### 手順 + +1. チェックアウトしたいブランチをダブルクリックします + +![](./_images/vscode-page-142.png) + +2. 選択がそのブランチに代わり、チェックアウトが完了します + +![](./_images/vscode-page-143.png) + +### ポップアップが出てきた場合 + +ポップアップが出てきた時は、Originからファイルをpullするか聞かれています。 + +1. 問題がなければ、「Checkout Branch」を押します +2. その後、「Checkout the existing branch & pull changes」を押します + +![](./_images/vscode-page-144.png) + +これにより、リモートブランチの最新の変更を取得しながらチェックアウトできます。 + + + + +CLIでは、`git checkout` コマンドを使ってブランチを切り替えます。 + +### よく使うコマンド + +```bash +# ブランチを切り替える +git checkout <ブランチ名> + +# 例: mainブランチに切り替える +git checkout main + +# 例: newBranchブランチに切り替える +git checkout newBranch +``` + +### リモートの変更を取得しながらチェックアウトする + +リモートブランチの最新の変更を取得しながらチェックアウトする場合は、以下のようにします。 + +```bash +git checkout main +git pull origin main +``` + + + + +## コマンドラインでのチェックアウト + +コマンドラインからチェックアウトを行う場合は、以下のコマンドを使用します。 + +```bash +# ブランチを切り替える +git checkout <ブランチ名> + +# 例: mainブランチに切り替える +git checkout main + +# 例: newBranchブランチに切り替える +git checkout newBranch +``` + +## まとめ + +- `checkout` はブランチを移動するコマンド +- VSCodeの左下からブランチを切り替えられる +- Git Graphからもダブルクリックでチェックアウト可能 +- チェックアウトするとファイルの状態もそのブランチの状態に切り替わる diff --git a/src/content/docs/textbook/git/11--pull-request.mdx b/src/content/docs/textbook/git/11--pull-request.mdx new file mode 100644 index 0000000..2a0a81a --- /dev/null +++ b/src/content/docs/textbook/git/11--pull-request.mdx @@ -0,0 +1,262 @@ +--- +title: プルリクをしてみる +description: GitHubでプルリクエストを作成してマージする方法を学びます +slug: textbook/git/pull-request +sidebar: + order: 11 +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components' +export const CLI_OR_GUI_SYNC_KEY = 'git::cli-or-gui'; + +## Pull Requestとは? + +Pull Request(プルリクエスト、略してプルリク/PR)は、**マージを誰かにお願いする機能**です。 + +![](./_images/vscode-page-146.png) + +### Pull Requestなしの場合 + +開発者がそのままmainブランチにマージしてしまうと、バグが発生する可能性があります。 + +### Pull Requestありの場合 + +1. 開発者がPull Requestを作成 +2. レビュー・マージ担当者がコードを確認 +3. 問題がなければマージを実行 + +このように、レビューする文化を取り入れることで、バグが起こりにくくなります。 + +## マージの問題点 + +直接マージする場合の問題点を見てみましょう。 + +![](./_images/vscode-page-147.png) + +- 開発者: 「完成したからmainにmergeしました!」 +- 別の担当者: 「バグが多すぎて取り返しがつかないことになってるんだけど...」 + +このような事態を防ぐために、プルリクエストが重要です。 + +## プルリクエストのいい点 + +プルリクエストを使うと、以下のような流れになります。 + +![](./_images/vscode-page-148.png) + +- 開発者: 「完成したからpull requestを出しました!」 +- レビュアー: 「〇〇行目の処理がおかしいので修正お願いします!」 + +このように、マージ前にコードをチェックできるため、品質を保つことができます。 + +## ツリーをみながら考えてみる + +- 最後にMainにマージをする時にエラーやバグ、Typoミスなどを確認(レビュー)してマージをする +- このタイミングでおかしいところがあれば、もう一度やり直してもらう + +![](./_images/vscode-page-149.png) + +レビュアーが「ここエラー出るやん、修正お願いします。」とフィードバックすることで、超特大バグ・エラーを防ぐことができます。 + +## Gitのリポジトリにアクセスする + +GitHubでプルリクエストを作成するには、まずリポジトリにアクセスします。 + +``` +https://github.com/<ユーザー名>/<リポジトリ名> +``` + +![](./_images/vscode-page-150.png) + +## ブランチのプルリクを送る + + + + +### 手順1: Pull Requestsを選択 + +リポジトリのページで、上部のタブから「Pull requests」を選択しましょう。 + +![](./_images/vscode-page-151.png) + +### 手順2: New Pull Requestを選択 + +「New pull request」ボタンをクリックします。 + +![](./_images/vscode-page-152.png) + +### 手順3: ブランチを選択 + +どのブランチからどこにマージをしたいのか選択しましょう。 + +- **base**: マージ先のブランチ(例: `master` または `main`) +- **compare**: マージ元のブランチ(例: `newBranch`) + +![](./_images/vscode-page-153.png) + +### 手順4: View pull requestを選択 + +選択ができたら「View pull request」または「Create pull request」を選択しましょう。 + +![](./_images/vscode-page-154.png) + +### 手順5: コメントを記入 + +マージしたい内容についてコメントを書きましょう。 + +- タイトル: 変更内容を簡潔に記述(例: 「indexに文を追加した」) +- 説明: 詳細な変更内容や背景を記述 + +編集したら「Create pull request」を押そう。 + +![](./_images/vscode-page-155.png) + +### 手順6: マージを実行 + +レビューをする人は内容を確認したら「Merge pull request」を押します。 + +今回は自分でマージをしましょう。 + +- 「This branch has no conflicts with the base branch」と表示されていれば、自動的にマージできます +- 「Merge pull request」ボタンをクリックしてマージを完了します + +![](./_images/vscode-page-156.png) + + + + +### 前提条件: GitHub CLIのインストール + +CLIでプルリクエストを作成するには、GitHub CLI(`gh`コマンド)が必要です。 + +インストールがまだの場合は、以下のコマンドでインストールしましょう。 + +**macOSの場合:** +```bash +brew install gh +``` + +**Windowsの場合:** +```powershell +winget install GitHub.cli +``` + +インストール後、認証を行います。 + +```bash +gh auth login +``` + +### 手順1: 変更をプッシュ + +まず、作業ブランチの変更がリモートにプッシュされていることを確認します。 + +```bash +# 現在のブランチを確認 +git branch + +# 変更をプッシュ(まだの場合) +git push -u origin <ブランチ名> +``` + +### 手順2: プルリクエストを作成 + +`gh pr create` コマンドでプルリクエストを作成します。 + +```bash +# インタラクティブモードで作成 +gh pr create + +# タイトルと本文を指定して作成 +gh pr create --title "indexに文を追加した" --body "変更内容の説明" + +# ベースブランチを指定して作成 +gh pr create --base main --title "indexに文を追加した" +``` + +コマンドを実行すると、以下の情報を入力するよう求められます。 +- タイトル: 変更内容を簡潔に記述 +- 本文: 詳細な変更内容や背景を記述 +- ベースブランチ: マージ先のブランチ(通常は `main` または `master`) + +### 手順3: プルリクエストの確認 + +作成したプルリクエストを確認しましょう。 + +```bash +# プルリクエストの一覧を表示 +gh pr list + +# 特定のプルリクエストの詳細を表示 +gh pr view + +# ブラウザでプルリクエストを開く +gh pr view --web +``` + +### 手順4: マージを実行 + +レビューが完了したら、マージを実行します。 + +```bash +# プルリクエストをマージ +gh pr merge + +# マージ方法を指定する場合 +gh pr merge --merge # マージコミットを作成 +gh pr merge --squash # スカッシュマージ +gh pr merge --rebase # リベースマージ +``` + +今回は自分でマージをしましょう。 + + + + +## マージしたコードをダウンロードする + +マージが完了したら、ローカル環境にも反映させましょう。 + + + + +1. mainブランチにチェックアウトする +2. 変更の同期を押して、リモート側の変更を受け取ります + - VSCodeの左下にある「くるくるボタン」(同期ボタン)を押します + +![](./_images/vscode-page-157.png) + +これで、マージした情報をGitHub側からダウンロードができます。 + + + + +以下のコマンドを実行します。 + +```bash +# mainブランチに切り替え +git checkout main + +# リモートの変更を取得 +git pull origin main +``` + +これで、マージした情報をGitHub側からダウンロードができます。 + + + + +## まとめ + +チーム開発で使うのは主にこの2つのコマンドです。 + +```bash +branch # 作業領域を切り分けるコマンド +checkout # ブランチを移動するコマンド +``` + +```bash +Pull request # マージを他の人にお願いするGitHubの機能 +``` + +Gitを使いこなして、Gitマスターになろう! diff --git a/src/content/docs/textbook/git/_images/vscode-page-011.png b/src/content/docs/textbook/git/_images/vscode-page-011.png new file mode 100644 index 0000000..49e041d Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-011.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-012.png b/src/content/docs/textbook/git/_images/vscode-page-012.png new file mode 100644 index 0000000..49d9a70 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-012.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-015.png b/src/content/docs/textbook/git/_images/vscode-page-015.png new file mode 100644 index 0000000..a6a4b2a Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-015.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-016.png b/src/content/docs/textbook/git/_images/vscode-page-016.png new file mode 100644 index 0000000..b1f1a15 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-016.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-019.png b/src/content/docs/textbook/git/_images/vscode-page-019.png new file mode 100644 index 0000000..c7a594e Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-019.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-020.png b/src/content/docs/textbook/git/_images/vscode-page-020.png new file mode 100644 index 0000000..ef6b76d Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-020.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-022.png b/src/content/docs/textbook/git/_images/vscode-page-022.png new file mode 100644 index 0000000..e4efca9 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-022.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-023.png b/src/content/docs/textbook/git/_images/vscode-page-023.png new file mode 100644 index 0000000..f22744e Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-023.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-027.png b/src/content/docs/textbook/git/_images/vscode-page-027.png new file mode 100644 index 0000000..762b314 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-027.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-031.png b/src/content/docs/textbook/git/_images/vscode-page-031.png new file mode 100644 index 0000000..7d4d86e Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-031.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-033.png b/src/content/docs/textbook/git/_images/vscode-page-033.png new file mode 100644 index 0000000..fea090c Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-033.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-035.png b/src/content/docs/textbook/git/_images/vscode-page-035.png new file mode 100644 index 0000000..436bc17 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-035.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-036.png b/src/content/docs/textbook/git/_images/vscode-page-036.png new file mode 100644 index 0000000..1291809 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-036.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-037.png b/src/content/docs/textbook/git/_images/vscode-page-037.png new file mode 100644 index 0000000..9d26e85 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-037.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-039.png b/src/content/docs/textbook/git/_images/vscode-page-039.png new file mode 100644 index 0000000..9d44902 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-039.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-040.png b/src/content/docs/textbook/git/_images/vscode-page-040.png new file mode 100644 index 0000000..7133450 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-040.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-044.png b/src/content/docs/textbook/git/_images/vscode-page-044.png new file mode 100644 index 0000000..16e2b8c Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-044.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-047.png b/src/content/docs/textbook/git/_images/vscode-page-047.png new file mode 100644 index 0000000..09639ca Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-047.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-050.png b/src/content/docs/textbook/git/_images/vscode-page-050.png new file mode 100644 index 0000000..e88d75b Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-050.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-052.png b/src/content/docs/textbook/git/_images/vscode-page-052.png new file mode 100644 index 0000000..8fec3c6 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-052.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-053.png b/src/content/docs/textbook/git/_images/vscode-page-053.png new file mode 100644 index 0000000..0c418a9 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-053.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-055.png b/src/content/docs/textbook/git/_images/vscode-page-055.png new file mode 100644 index 0000000..ece071f Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-055.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-056.png b/src/content/docs/textbook/git/_images/vscode-page-056.png new file mode 100644 index 0000000..314d890 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-056.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-057.png b/src/content/docs/textbook/git/_images/vscode-page-057.png new file mode 100644 index 0000000..027ccbf Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-057.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-058.png b/src/content/docs/textbook/git/_images/vscode-page-058.png new file mode 100644 index 0000000..9788537 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-058.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-060.png b/src/content/docs/textbook/git/_images/vscode-page-060.png new file mode 100644 index 0000000..96a83d1 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-060.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-062.png b/src/content/docs/textbook/git/_images/vscode-page-062.png new file mode 100644 index 0000000..b11a0ab Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-062.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-065.png b/src/content/docs/textbook/git/_images/vscode-page-065.png new file mode 100644 index 0000000..a769f4e Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-065.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-067.png b/src/content/docs/textbook/git/_images/vscode-page-067.png new file mode 100644 index 0000000..8f81c39 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-067.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-069.png b/src/content/docs/textbook/git/_images/vscode-page-069.png new file mode 100644 index 0000000..5e538e7 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-069.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-071.png b/src/content/docs/textbook/git/_images/vscode-page-071.png new file mode 100644 index 0000000..57fc012 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-071.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-072.png b/src/content/docs/textbook/git/_images/vscode-page-072.png new file mode 100644 index 0000000..9769cbd Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-072.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-074.png b/src/content/docs/textbook/git/_images/vscode-page-074.png new file mode 100644 index 0000000..69c263d Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-074.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-076.png b/src/content/docs/textbook/git/_images/vscode-page-076.png new file mode 100644 index 0000000..89eaa63 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-076.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-078.png b/src/content/docs/textbook/git/_images/vscode-page-078.png new file mode 100644 index 0000000..0b71f50 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-078.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-081.png b/src/content/docs/textbook/git/_images/vscode-page-081.png new file mode 100644 index 0000000..3dbfb1a Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-081.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-082.png b/src/content/docs/textbook/git/_images/vscode-page-082.png new file mode 100644 index 0000000..450208f Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-082.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-086.png b/src/content/docs/textbook/git/_images/vscode-page-086.png new file mode 100644 index 0000000..023ffae Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-086.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-087.png b/src/content/docs/textbook/git/_images/vscode-page-087.png new file mode 100644 index 0000000..b8a0ad8 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-087.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-089.png b/src/content/docs/textbook/git/_images/vscode-page-089.png new file mode 100644 index 0000000..507fcb4 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-089.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-091.png b/src/content/docs/textbook/git/_images/vscode-page-091.png new file mode 100644 index 0000000..443a33a Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-091.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-092.png b/src/content/docs/textbook/git/_images/vscode-page-092.png new file mode 100644 index 0000000..2ccdc33 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-092.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-093.png b/src/content/docs/textbook/git/_images/vscode-page-093.png new file mode 100644 index 0000000..0318bc7 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-093.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-094.png b/src/content/docs/textbook/git/_images/vscode-page-094.png new file mode 100644 index 0000000..8e3bff0 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-094.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-095.png b/src/content/docs/textbook/git/_images/vscode-page-095.png new file mode 100644 index 0000000..c29d106 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-095.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-096.png b/src/content/docs/textbook/git/_images/vscode-page-096.png new file mode 100644 index 0000000..02b3e2e Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-096.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-097.png b/src/content/docs/textbook/git/_images/vscode-page-097.png new file mode 100644 index 0000000..ca88788 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-097.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-098.png b/src/content/docs/textbook/git/_images/vscode-page-098.png new file mode 100644 index 0000000..27629fa Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-098.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-099.png b/src/content/docs/textbook/git/_images/vscode-page-099.png new file mode 100644 index 0000000..d760ab1 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-099.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-101.png b/src/content/docs/textbook/git/_images/vscode-page-101.png new file mode 100644 index 0000000..5a31bcd Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-101.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-102.png b/src/content/docs/textbook/git/_images/vscode-page-102.png new file mode 100644 index 0000000..1cef8ca Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-102.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-103.png b/src/content/docs/textbook/git/_images/vscode-page-103.png new file mode 100644 index 0000000..2441f2c Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-103.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-104.png b/src/content/docs/textbook/git/_images/vscode-page-104.png new file mode 100644 index 0000000..9828e35 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-104.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-105.png b/src/content/docs/textbook/git/_images/vscode-page-105.png new file mode 100644 index 0000000..7e7cb0b Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-105.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-106.png b/src/content/docs/textbook/git/_images/vscode-page-106.png new file mode 100644 index 0000000..14c4798 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-106.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-107.png b/src/content/docs/textbook/git/_images/vscode-page-107.png new file mode 100644 index 0000000..8e98aa3 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-107.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-108.png b/src/content/docs/textbook/git/_images/vscode-page-108.png new file mode 100644 index 0000000..fdce184 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-108.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-109.png b/src/content/docs/textbook/git/_images/vscode-page-109.png new file mode 100644 index 0000000..f0bd2b3 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-109.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-114.png b/src/content/docs/textbook/git/_images/vscode-page-114.png new file mode 100644 index 0000000..5087d2e Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-114.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-115.png b/src/content/docs/textbook/git/_images/vscode-page-115.png new file mode 100644 index 0000000..4a76ee9 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-115.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-116.png b/src/content/docs/textbook/git/_images/vscode-page-116.png new file mode 100644 index 0000000..db4754f Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-116.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-117.png b/src/content/docs/textbook/git/_images/vscode-page-117.png new file mode 100644 index 0000000..779a952 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-117.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-120.png b/src/content/docs/textbook/git/_images/vscode-page-120.png new file mode 100644 index 0000000..d9b0e88 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-120.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-121.png b/src/content/docs/textbook/git/_images/vscode-page-121.png new file mode 100644 index 0000000..b46becb Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-121.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-122.png b/src/content/docs/textbook/git/_images/vscode-page-122.png new file mode 100644 index 0000000..d6c8a12 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-122.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-124.png b/src/content/docs/textbook/git/_images/vscode-page-124.png new file mode 100644 index 0000000..0dbae68 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-124.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-125.png b/src/content/docs/textbook/git/_images/vscode-page-125.png new file mode 100644 index 0000000..af8b6cf Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-125.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-126.png b/src/content/docs/textbook/git/_images/vscode-page-126.png new file mode 100644 index 0000000..bf09da9 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-126.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-129.png b/src/content/docs/textbook/git/_images/vscode-page-129.png new file mode 100644 index 0000000..00ea805 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-129.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-130.png b/src/content/docs/textbook/git/_images/vscode-page-130.png new file mode 100644 index 0000000..0d4512e Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-130.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-131.png b/src/content/docs/textbook/git/_images/vscode-page-131.png new file mode 100644 index 0000000..4710e38 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-131.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-136.png b/src/content/docs/textbook/git/_images/vscode-page-136.png new file mode 100644 index 0000000..c28ab88 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-136.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-137.png b/src/content/docs/textbook/git/_images/vscode-page-137.png new file mode 100644 index 0000000..2c1acb3 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-137.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-140.png b/src/content/docs/textbook/git/_images/vscode-page-140.png new file mode 100644 index 0000000..c031710 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-140.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-141.png b/src/content/docs/textbook/git/_images/vscode-page-141.png new file mode 100644 index 0000000..5cfc20a Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-141.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-142.png b/src/content/docs/textbook/git/_images/vscode-page-142.png new file mode 100644 index 0000000..b2e3280 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-142.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-143.png b/src/content/docs/textbook/git/_images/vscode-page-143.png new file mode 100644 index 0000000..2cc0d77 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-143.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-144.png b/src/content/docs/textbook/git/_images/vscode-page-144.png new file mode 100644 index 0000000..053e502 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-144.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-146.png b/src/content/docs/textbook/git/_images/vscode-page-146.png new file mode 100644 index 0000000..3058525 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-146.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-147.png b/src/content/docs/textbook/git/_images/vscode-page-147.png new file mode 100644 index 0000000..b60f257 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-147.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-148.png b/src/content/docs/textbook/git/_images/vscode-page-148.png new file mode 100644 index 0000000..db32d2d Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-148.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-149.png b/src/content/docs/textbook/git/_images/vscode-page-149.png new file mode 100644 index 0000000..1110ca6 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-149.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-150.png b/src/content/docs/textbook/git/_images/vscode-page-150.png new file mode 100644 index 0000000..b8a595e Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-150.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-151.png b/src/content/docs/textbook/git/_images/vscode-page-151.png new file mode 100644 index 0000000..52a13b2 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-151.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-152.png b/src/content/docs/textbook/git/_images/vscode-page-152.png new file mode 100644 index 0000000..18e6bfe Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-152.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-153.png b/src/content/docs/textbook/git/_images/vscode-page-153.png new file mode 100644 index 0000000..45e57f0 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-153.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-154.png b/src/content/docs/textbook/git/_images/vscode-page-154.png new file mode 100644 index 0000000..d109cd6 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-154.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-155.png b/src/content/docs/textbook/git/_images/vscode-page-155.png new file mode 100644 index 0000000..4e9c2f4 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-155.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-156.png b/src/content/docs/textbook/git/_images/vscode-page-156.png new file mode 100644 index 0000000..426a181 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-156.png differ diff --git a/src/content/docs/textbook/git/_images/vscode-page-157.png b/src/content/docs/textbook/git/_images/vscode-page-157.png new file mode 100644 index 0000000..8b0e3c0 Binary files /dev/null and b/src/content/docs/textbook/git/_images/vscode-page-157.png differ