サイトアイコン 協栄情報ブログ

Visual Studio Code (VSC)でGitHubを使いこなすための手順

yasuoka.y

Visual Studio Code (VSC)でGitHubを使いこなすための手順

Visual Studio Code (VSC)を使ってGitHubと連携し、プロジェクトの管理やコードのバージョン管理を効率よく行うための手順を紹介します。このブログでは、VSCでのGitHubリポジトリのクローン、コミット、プッシュ、プルリクエストの流れを学びます。

1. VSCにGitHubを設定する

まず、VSCでGitHubを使うための準備を行います。

1.1. Gitのインストール

VSCでGitHubを使用するには、まずGitがインストールされている必要があります。まだインストールしていない場合は、Git公式サイトからGitをダウンロードしてインストールします。

1.2. GitHubアカウントの設定

GitHubアカウントを作成し、VSCと連携させます。
bash: sudo: command not found というエラーは、WindowsのGit BashやMINGW64環境で表示されます。Windows環境ではsudoコマンドが存在しないためです。

Gitの基本設定
Gitがインストールされたら、ユーザー名とメールアドレスを設定します。

   git config --global user.name "Your Name"
   git config --global user.email "your.email@example.com"

2. GitHubリポジトリをクローンする

  1. GitHubからURLを取得
    GitHubでリポジトリのページに行き、「Code」ボタンをクリックし、URLをコピーします。
  2. VSCでリポジトリをクローン
    VSCで Ctrl + Shift + P を押してコマンドパレットを開き、"Git: Clone"を選択。先ほどコピーしたリポジトリURLを貼り付け、プロジェクトを保存するフォルダを選びます。

3. コードの編集とコミット

リポジトリをクローンしたら、実際にコードを編集して変更を反映させます。

  1. ファイルを編集
    任意のファイルを開いてコードを編集します。

  2. 変更内容を確認
    git status コマンドをターミナルで実行して、変更されたファイルを確認します。

    git status

  3. 変更をステージングに追加
    編集したファイルをステージに追加します。

    git add

    すべての変更を追加したい場合は次のようにします。

    git add .

  4. コミットを作成
    変更内容をローカルリポジトリにコミットします。
    以下は、作業リポジトリの作成から変更を加えるプロセスまでの詳細な手順を説明した内容です。

3. 変更を加えるプロセス

ローカルリポジトリで変更を加える際の流れは以下の通りです。

  1. 変更（Modification）:

    • エディタ内でファイルを編集します。新しいファイルを作成したり、既存のファイルを更新したりすることができます。例えば、index.htmlというファイルを作成し、HTMLコードを追加します。

  2. ステージング（Staging）:

    • VSCの左サイドバーにある「ソース管理」タブを選択します。
    • 変更したファイルが「変更」セクションに表示されます。
    • 各ファイルの横にある「+」アイコンをクリックして、ステージングエリアに追加します。これにより、次のコミットに含める変更が準備されます。

  3. コミット（Commit）:

    • ステージした変更が「ステージされた変更」セクションに移動します。
    • 下部のメッセージボックスに、コミットメッセージを入力します。コミットメッセージは、何を変更したのかを簡潔に説明する重要な部分です。例: Added index.html with basic structure.
    • チェックマーク（✔）アイコンをクリックするか、キーボードショートカット（WindowsではCtrl + Enter、MacではCmd + Enter）を使用してコミットします。

  4. プッシュ（Push）:

    • コミットが成功すると、ローカルリポジトリには変更が保存されます。
    • 次に、これをリモートリポジトリに反映させるために、上部の「…」メニューをクリックし、「Push」を選択します。
    • プッシュが成功すると、GitHubのリポジトリページに移動し、変更が反映されていることを確認します。

4. 変更内容を確認する

ローカルリポジトリの変更履歴を確認する方法は以下の通りです。

  1. 全体のコミットログと差分を確認する:

    • ソース管理タブを開き、コミット履歴を表示します。
    • 各コミットをクリックすると、変更内容の差分が表示されます。

  2. 特定のコミットの差分を確認する:

    • ターミナルで以下のコマンドを使用して、特定のコミットの変更内容を確認します。 
      git show

以上の手順で、VSCを使用してGitHubリポジトリを作成し、ローカルリポジトリでの変更を管理する方法を学ぶことができました。これにより、効率的にコードを管理し、チームとの共同作業がスムーズになります。さらに質問があれば、ぜひお知らせください！

   git commit -m "コミットメッセージ"

4. 変更をGitHubにプッシュ

ローカルの変更をGitHubのリポジトリに反映させるためにはプッシュします。

git push origin main

main はリモートのブランチ名です。別のブランチにプッシュする場合は、そのブランチ名を指定してください。

5. プルリクエストの作成

GitHub上でチームと共同作業する際は、プルリクエスト (PR) を使って変更を提案します。

  1. ブランチを作成
    新しい機能や修正を行う際には、まず新しいブランチを作成します。

    git checkout -b feature/new-feature

  2. 変更を加えてコミット・プッシュ
    編集後、コミットして新しいブランチにプッシュします。

    git push origin feature/new-feature

  3. GitHubでプルリクエストを作成
    GitHubリポジトリのページで「Pull requests」タブをクリックし、「New Pull Request」ボタンを押して、新しいプルリクエストを作成します。

6. VSCでのGitHubアクションの確認

VSC上でGitHubのプルリクエストやイシューの状況を確認したり、レビューしたりできます。「GitHub Pull Requests and Issues」拡張機能を使えば、VSC内で直接管理可能です。

  1. VSCのサイドバーにあるGitHubアイコンをクリックします。
  2. プルリクエストのレビューやマージを行います。

7. Gitのログと差分確認

変更履歴や差分を確認して、コミット内容が意図通りかどうかをチェックします。

  1. コミットログの確認

    git log --oneline

    コミット履歴を簡潔に確認できます。

  2. 特定のコミットの差分を確認

    git show

  3. 全体の差分を確認

    git diff

まとめ

Visual Studio CodeでGitHubを使いこなすことで、効率的なコーディング環境を整え、チーム開発でも円滑に作業を進めることができます。GitHubの基本的な操作（クローン、コミット、プッシュ、プルリクエスト）はシンプルですが、慣れることで作業がスムーズになります。ぜひこの手順を実践してみてください！

モバイルバージョンを終了