スポンサーリンク

【Git&GitHub&VScode】ソースコードを管理する

【Git&GitHub&VScode】ソースコードを管理するGit
【Git&GitHub&VScode】ソースコードを管理する
スポンサーリンク

GitとGitHubでソースコードを管理する時の手順です。エディタはVScodeを使用します。

現場で利用経験が無い方が多いので説明用にまとめました。

ソースコードを管理する理由とは?

一人で開発してリリースまでする場合はバージョン管理ツールを使って管理する必要はないかも知れませんが、複数人だとでどうでしょうか。

開発する人数が多ければ多いほど、誰がソースコードを追加や変更したのかがわからなくなってきます。例えば何かしらの不具合が起きた時に、変更点が履歴として残っていれば簡単に修正したり戻すことができるでしょう。

そこで必要となるのがソースコードを管理するためのバージョン管理ツールです。変更した内容を管理することで開発をスムーズに行うことができます。

前提条件

Gitがインストールされていること

version確認のコマンドです

git --version

コマンドプロンプト、もしくはターミナルを開いて確認する。versionが返却されたらインストールされています。

C:\Users\takus>git --version
git version 2.24.1.windows.2

GitHubの登録が完了していること

GitHub Japan
GitHubはソフトウェア開発のプラットフォームです。GitHubには8000万件以上ものプロジェクトがホスティングされており、2700万人以上のユーザーがプロジェクトを探したり、フォークしたり、コントリビュートしたりしています。

VSCodeをインストールしていること

Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code edito...

手順

  1. GitHubにRepositoryを作成する
  2. gitconfigの設定をする
  3. git clone(GitHubで管理しているrepositoryを複製する)
  4. GitHubにソースコードをpush(アップロード)する

GitHubにRepositoryを作成する

GitHubのヘッダー画面で「New」を選択

入力が完了したら「Create repositroy」を選択してください

各項目について説明します。repositoryを作成した後でも変更可能です。

Repository name : repositoryの名前

Description : repositoryの説明

Public or Private : repositoryの認可設定

Publicは誰でも閲覧可能。Privateは本人と許可されたユーザしか見れません。

initialize this repository with : 以下の内容は必須ではありません。選択しなくても問題ないです。

Add a README file : 管理しているソースコードの説明書となります。

インストール方法や、使い方などを記述します。

Add .gitignore : ソースコードの管理対象の設定

.gitignoreに記述したファイルは管理対象外となり、Git Hubにpush(アップロード)しなくなります。

Choose a license : ライセンスの種類

基本的にはMIT licenseで問題ないです。

ソースコードを管理するためのrepository(保管場所)が完成しました。

こちらのRepository(保管場所)にローカルで管理しているソースコードをpush(アップロード)していきます。

完成したrepositoryはこんな感じで表示されます。

gitconfigの設定をする

GitHubにpush(アップロード)できるようgitconfigの設定をする。

OSによってgitconfigの場所が変わりますが、Windowsの場合は以下のディレクトリにユーザ名とメールアドレスを設定する。誰がpushしたかを判別するためのものです。

Windows環境でデフォルトだと場所は以下となります。

C:\Users\[ユーザ名]\.gitconfig
.gitconfig
[user]
name = ユーザ名
email = メールアドレス

git clone(GitHubで管理しているrepositoryを複製する)

Code」を選択してから「https://github.com/TokutyTok/React-Code-Collection.git」URLをコピーする。

ソースコードを管理するディレクトリを作成する。

mkdir C:\repos

ターミナルにてGitHubのrepository(保管場所)をローカルにclone(複製)する。

git clone https://github.com/TokutyTok/React-Code-Collection.git

VScodeだとこんな感じのログが出ます。

作成したディレクトリに複成できていたらOK

GitHubにソースコードをpush(アップロード)する

今度はローカルに複製したrepositoryに変更を加えてGitHubのrepositoryにpush(アップロード)してみます。

README.mdに当ブログのURLを追加してみました。

赤枠の部分が①となっていますが、何かしらの変更があればこちらに集計されます。今回はREADMEを変更したので1ファイル変更されているということです。

+」を選択してましょう。ステージング(コミットしたいファイルを指定)されます。

READMEにブログのURLを追加」コミットコメントを追加しましょう。

コミット」を押下する。

変更の同期1↑」もしくは「・・・」を選択してから「プッシュ」を押下する。

変更の同期1↑」を押下した場合は以下のダイアログが出ますが、今回は「OK」で問題ないです。

今回は詳しい説明はしませんが、開発者が一人ではなく複数の場合は注意した方が良いです。プル(最新のソースを取得とマージをする)してからプッシュ(アップロード)を行っている。※ソースコードの競合が起こる可能性があります。

GitHubのrepositoryを確認してみましょう。無事にpushされました。

おすすめのUdemy講座

GitでおすすめのUdemy講座を紹介します。

Git: もう怖くないGit!チーム開発で必要なGitを完全マスター

GitHub Flowでのバージョン管理を学べるため現場で即役立つ内容となっています。

Gitの基本的な内容も網羅しているのでおすすめです!

ちゃんと学ぶ、Git/GitHub・SourceTree講座(Win/Mac対応・コマンド対応)

Gitを学ぶ上でクライアントソフトを使うメリットは視覚的にわかりやすいことです。

現場によってはSourceTreeなどのクライアントソフトを使用することもあるので知っておいて損はないと思います。

タイトルとURLをコピーしました