【GitHub】初心者向け|GitHubの基本的な操作手順まとめ【VSCode連携】

目次

経緯

最近GitHubを使い始めたばかりで、操作の流れが分からなくなりがちだったため、自分なりに整理して手順をメモとしてまとめました。
GitとGitHubの基本操作を学びたい方、今後の復習用として使いたい方の参考になれば幸いです。


全体の流れ

  1. GitHubで新しいリポジトリを作成
  2. VSCodeでディレクトリを準備し、cloneを実行
  3. 空の状態でcommit
  4. branchを作成・切り替え
  5. コードを書く
  6. Pull request(プルリク)→ merge(マージ)
  7. 使用済みbranchを削除
  8. 最後にPullして最新状態に更新
  9. 次のbranchを作成して繰り返す

GitHubでリポジトリを作成する

  1. GitHubにログインし、自分のアイコンをクリック
  2. 「Your repositories」を選択
  3. 右上の「New」をクリック
  4. 「Create a new repository」画面で以下を入力
    • Repository name:任意の名前
    • 公開範囲:「public」または「private」
  5. 「Create repository」をクリック

VSCodeでcloneを作成する

  1. VSCodeを起動し、ターミナルを開く
  2. GitHub上のリポジトリページにある「Quick setup」から、https://github.com/ユーザー名/リポジトリ名 をコピー
  3. VSCodeのターミナルに以下を入力
git clone コピーしたURL
  1. cloneしたフォルダに移動し、VSCodeで開く
cd リポジトリ名
code .

空の状態でとりあえずcommit

git commit --allow-empty -m "first commit"
git push origin main

GitHubページに「first commit」が表示されていれば成功です。


branchを作成して切り替える

git branch todo-base
git checkout todo-base

git branchで確認すると、「*」が todo-base に移動しているはずです。


コードを書く

この状態で、VSCode上で自由にコードを書きます。


プルリクエスト(Pull Request)してmergeする

git add .
git commit -m "変更内容を記述"
git push origin todo-base

GitHubページに移動し、

  1. 「Compare & Pull request」をクリック
  2. 「Create Pull request」
  3. 「Merge Pull request」
  4. 「Confirm merge」

以上でmainブランチにマージされました。


使用済みbranchを削除する

GitHubページで「Delete branch」をクリック。

ローカル側も削除します。

git checkout main
git branch -D todo-base

git branch で確認すると、mainだけになっていれば完了です。


最後にPullして最新状態を取得

git pull origin main

これでローカルも最新のmainブランチになります。


新しいbranchを作成する場合

再び新しい作業を始めるときは、以下のように実行します。

git checkout -b add-file

あとは同様に、

git add .
git commit -m "コメント"
git push origin add-file

GitHubページで、

  1. 「Compare & Pull request」
  2. 「Create Pull request」
  3. 「Merge Pull request」
  4. 「Confirm merge」
  5. 「Delete branch」

ローカルで、

git checkout main
git branch -D add-file
git pull origin main

この流れを繰り返していきます。


まとめ

GitHubの操作は、手順が分かればシンプルです。
特にVSCodeと連携すれば、cloneからcommit、branch作成、push、pull request、merge、branch削除まで一貫した作業フローが実現できます。

何度も使って慣れていけば、チーム開発や個人開発でも効率よくソースコードを管理できます。

最後までお読みいただき、ありがとうございました。

スクールの紹介

ここまで読んでいただきありがとうございました。

最後に宣伝をさせてください。

技術で未来を切り拓く―あなたの夢を現実にするプログラミングスクール

Webデザインやプログラミングで成功を目指している方々にとって、このオンラインスクールは夢を叶えるための最適な場所です。皆さんのキャリアを次の段階へと引き上げるためにデザインされたこのスクールは、一人ひとりの成功を心から願い、それを実現するための全てを提供しています。ここでは、このスクールの魅力について詳しくご紹介します。

◆圧倒的な費用対効果
このオンラインプログラミングスクールは、Web系教育において最高の費用対効果を提供しています。多くの高額スクールが存在する中で、ここではリーズナブルな価格で、質の高い教材、無限のサポート、そして実際に市場で求められるスキルの習得機会を提供しています。

◆現役フリーランスの講師陣
講師たちは全員、現役のフリーランスプロフェッショナルです。市場で活躍している講師から直接、最新のトレンドや実践的なスキルを学べるのは、このスクールの大きな特徴です。

◆柔軟な学習コース
固定のコースがなく、学習者の興味やニーズに応じて自由に学習できます。進路変更も自由で、最低契約期間は1ヶ月という柔軟性を持っています。自分のペースで、自分に合った学習が可能です。

◆無制限の添削とサポート
理解できるまで、そして満足するまで、無制限に添削と質問への回答を提供しています。進路相談や技術面以外の相談にも対応しており、全面的にサポートします。

◆社長から学べる貴重な機会
デザイナー、プログラマー、ディレクター、マーケターとして豊富な経験を持つ社長から直接学べるのも、このスクールの特別な点です。他のスクールでは得られない、貴重な機会です。

◆実績作りへの徹底的なサポート
就職、転職、フリーランスとして成功するためには、高品質な実績が必要です。生徒の作品レベルを最大限に高め、市場で求められる実績を作り上げることに力を入れています。案件を取得できない生徒には、直接案件を提供することもあります。

◆メッセージからの約束
高額な授業料を支払わせて結果を出せないスクールとは違い、物理的なサポートは提供できないかもしれませんが、継続的な努力を通じて最高の結果を出せるようにサポートします。一緒に不正なスクールを撲滅し、あなたの夢を実現しましょう。

このプログラミングスクールは、Webデザインやプログラミングでの成功を目指す方々に必要な全てを備えています。今こそ、このコミュニティに参加し、あなたのキャリアを加速させる時です。

詳しくはこちら↓

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

私が勉強したこと、実践したこと、してることを書いているブログです。
主に資産運用について書いていたのですが、
最近はプログラミングに興味があるので、今はそればっかりです。

目次