未経験からエンジニア転職をするための最強ロードマップロードマップ

【Git+GitHub教材①】GitやGitHubとは?インストール方法から基本用語の解説、基本的な使い方までを徹底解説

ファド

こんにちは!
PHPのLaravelやJavaScriptでWeb開発をしているフリラーンスエンジニアのファドと申します!

こちらの記事はGit+GitHub教材の第1回目の記事になります。

その他のGit+GitHub教材を学習したい方は下記リンクから直接教材へ飛ぶことができます。

目次

Gitとは

Gitとは、分散型バージョン管理システムのことです。
少しむずかしい言葉で説明してしまいましたが、ざっくりいうとファイルのバージョン管理を簡単にするツールのことです。

スマートフォンなどでも最新バージョンへアップデートするように通知が来たりしますよね。
ただ、一度アップデートをしてしまうと、基本的には古いバージョンに戻すことはできませんし、するとしても手間がかかってしまいます。

しかし、Gitで管理しているファイルやディレクトリであれば、コンピューター上でファイルの編集履歴を管理することができるので、編集前のファイルを残したまま新しく編集したファイルを保存することができます。
そのため、古いバージョンから新しいバージョンまでの管理を簡単にすることができるということです。

エンジニアは日々多くのコードを編集し、サービスをアップデートしていきます。
しかし、アップデートした後に何か不具合が起こった場合は、アップデート前のバージョンへ戻すことなどがよく行われます。

そのため、Gitを使用せずにバージョンを管理しようとすると、コードを編集する前に日付や時刻をつけて変更するファイルを保存しておき、その上で新しいファイルを作成するというようなことをしなくてはなりません。
そのようなことをしていては時間もかかりますし、ヒューマンエラーが発生してしまう可能性がありますよね。
しかし、Gitを使用すると上記のようなことはせずに、効率的にバージョンを管理することができるようになります。

Gitの特徴

次はGitの特徴について見ていきます。
Gitが分散型バージョン管理システムとよばれるのは、以下のような特徴があるからです。

  • 古いバージョンに簡単に戻せる
  • 新旧のファイルを一元管理できる
  • 編集した履歴を複数人で共有できる
  • 複数人で修正した部分を一つに統合できる

以上の特徴からも、Gitはとても便利ということがお分かりいただけたでしょうか。
つまるところ、Gitはバージョン管理の手間とミスを減らし、効率化できるため多くの開発者から愛用されているということです。

Gitの基本用語

では、Gitを実際に使用していく前に基本的な用語について学んでいきましょう!
もし、Gitの教材を進めている中でわからない言葉が出てきたときは、こちらの基本用語を改めて確認してください。

リポジトリ(repository)

リポジトリとはファイルやディレクトリを保存しておくための貯蔵庫のことです。
Gitにおけるリポジトリは以下の2種類に分かれています。

リポジトリ名説明
リモートリポジトリ特定のサーバー上に設置して、複数人で共有するリポジトリ
ローカルリポジトリユーザーごとに配置され、手元のPCで編集できるリポジトリ

それぞれのユーザーが手元のPCにあるローカルリポジトリで作業を行い、作業内容を共有するときにリモートリポジトリへ公開するという使い方になります。
リモートリポジトリを介して、作業内容を共有することができるので、他のユーザーの作業内容を把握することも可能になります。

ブランチ(branch)

ブランチとは、ファイルの編集履歴を分岐させて記録していく機能のことです。
英語でブランチはという意味があるので、枝分かれさせるイメージを持っていればOKです。

Webサービスやソフトウェア開発において、バグの修正や機能追加などのファイル編集作業は、複数のユーザーが同時に行うことも少なくありません。
並行して行われる作業を正確に管理するためにGitにブランチという機能が用意されています。
これがGitのバージョン管理を効率的にし、ヒューマンエラーを減らすためにもっとも活かされている機能とも言えます。

コミット(commit)

コミットとは、ファイルやディレクトリの編集作業をローカルリポジトリに記録するために必要な操作のことです。
コミットを実行すると、ファイルを編集した日時を記録したファイルが生成されます。
コミットを実行するごとにファイルが生成され、時系列順に並んで格納されるので、ファイルを編集した履歴やその内容を確認することができます。

ワークツリーとインデックス

ワークツリーとは、ユーザーが編集している作業中のディレクトリのことです。

インデックスとは作業場所であるワークツリーと保存場所であるローカルリポジトリの間にある中間領域のことです。

Gitの仕様上、ワークツリーで編集したファイルをコミットしたい場合は、一度インデックスに登録しなければなりません。
編集したファイルをローカルリポジトリへコミットする前に一度インデックスへ登録して仮置きしておくようなイメージです。

ワークツリーからリポジトリに直接保存するとミスが増えますし、効率が良くありません。
というのも編集作業を行うファイルは、一つだけとは限りませんし、編集した複数のファイルを一つひとつ確認してコミットするのは、作業的にも非効率ですからね。

コミット予定のファイルをインデックスに仮置きしておけば、後からまとめて確認した上でコミットできるので、編集したファイルのコミットし忘れなどを防ぐことができます。

そして、コミットしたくないファイルをインデックスに仮置しなければ、コミットするときにはインデックスされているファイルのみコミットされるので、余分なファイルを含めずにコミットできるというわけです。

プッシュ(push)

プッシュとはローカルリポジトリにあるファイルをリモートリポジトリに送信し、保存する機能のことです。
いわゆるアップロードに近い感覚です。

クローン(clone)

クローンとはダウンロードをイメージしていただければOKです。
複数人で共有しているファイル(リモートリポジトリ)をまるごと自分のローカル環境(ローカルリポジトリ)に保存する機能ですので、ほとんどの場合Gitで最初に行う作業になります。

マージ(merge)

マージとは複数のブランチを一つにまとめて、完成形に近づけることです。
バグの修正や、機能の追加を行ったブランチを統合するイメージできればOKです。

プル(pull)

プルとは共有されているリモートリポジトリに保存されているファイルの内で、ローカルリポジトリ(あなたのローカル環境)に無いファイルや他のユーザーが更新したファイルのみをダウンロードする機能のことです。

リモートリポジトリのファイルをすべて丸ごとダウンロードするクローンに対して、ローカルリポジトリとリモートリポジトリの差分のみをダウンロードし、更新するのがプルになります。

フェッチ(fetch)

フェッチとはリモートリポジトリからファイルの最新情報を取得してくる操作のことです。
共有されているファイル(リモートリポジトリ)の更新を確認したり、複数人の作業の擦り合わせのために使う機能といえます。
プルとは違い、ローカルのファイルを更新することはありません。

リモートリポジトリのファイルをダウンロードしローカルリポジトリを更新(プル)するのか、ファイルの更新があったかどうかを確認するのか(フェッチ)といった違いがあります。
また、プルはフェッチとマージを同時に行う機能といえます。

何も確認せずにプル(フェッチ+マージ)をしてしまうと、あなたがローカルで編集したファイルと同じファイルが更新されていた場合、エラーが出たりします。
フェッチは、それらを未然に防ぎ、複数人で同じファイルを編集しているときでもお互い干渉しないようにするための機能というわけです。

Git操作の流れ

Gitの流れは、誰かが共有しているファイルをクローン(後述)して、ワークツリーで作業したファイルをインデックスに一度仮置きし、まとめてローカルリポジトリに登録(コミット)する。
ローカルリポジトリにコミットしたファイルを全体に共有するために、リモートリポジトリにプッシュするというのが基本的な流れになります。

これでGitの基本用語の説明は以上です。
言葉だけでは分かりづらいところもあるかと思いますが、実際に使用しながら理解を深めていきましょう!

Gitをインストール

※すでにGitをインストールされている方はこちらの手順は不要です。
ターミナルで以下のコマンドを実行し、Gitのバージョンが確認できればインストール完了しています。

$ git --version
git version 2.27.0

まだの方はこちらからGitのインストールを行いましょう!

インストール後にターミナルで以下のコマンドを実行し、Gitのバージョンを確認できればインストールは完了です。

$ git --version
git version 2.27.0

GitHubにファイルをアップロード

今回はGitとGitHubを実際に使用して、Webアプリケーションのバージョン管理を行っていきます!
まずは、Gitをより便利に使用するためにGitHubの登録を行いましょう!

GitHubとは、Gitの仕組みを利用して、世界中の人々が自分の作品(プログラムコードやデザインデータなど)を保存、公開できるようにしたWebサービスの名称のことです。
GitHubはその名の通り、GitのHub(ハブ:拠点・中心・集まり)という意味になります。

GitHubに作成されたリポジトリ(保存庫のようなもの)は、基本的にすべて公開されますが、プライベート設定をすると、指定したユーザーからしかアクセスができないプライベートなリポジトリを作ったりすることもできます。
また、wiki(メモ書き)やタスク管理ツールなど、コラボレーションのための機能も充実しているのが特徴です。

GitHubがどういうものかわかったところで早速アカウントの作成orログインをしていきましょう!

①GitHubアカウントの作成orログイン

下記よりGitHubにアクセスし、アカウントの作成orログインをしましょう!
GitHub公式サイト

また、もしかすると画像の通りの登録画面が出てこない可能性があります。
※Webサービスの見た目はよく変わるため。
その場合は、Githubアカウントの作成と検索してください。
それでもわからない場合は、質問してください!

画面右上のsign upをクリック
※アカウントをお持ちの方はsign inからログインを行ってください。

email(メールアドレス)、password(パスワード)、username(ユーザー名)、y(Githubの情報をメールで受け取る設定)を入力し、ロボット認証を行ってからCretate accountをクリック。

Create accountクリック後、登録したメールアドレスへ登録を完了するためのURLが送付されるので、メールボックスを確認しましょう!

ここからはオプション項目なのでみなさんの使用用途に合わせて登録を行ってください。
また、プランの選択時はfreeプラン(無料プラン)を選択してください。

アカウントの作成が完了し上記の画面に遷移すればOKです!

②リポジトリの作成

アカウントの作成が完了したので、早速リポジトリを作成していきましょう!
※GitHubで作成するリポジトリはリモートリポジトリと呼ばれています。

GitHubアカウントにログイン後Create repositoryをクリック。

今回はtestというリモートリポジトリを作成してみましょう!
Repository name(リポジトリ名)にtestを、Description(リポジトリの説明)にGitHub練習用リポジトリ(入力しなくても可)を入力しCreate Repositoryをクリック。

また、Publicにチェックを入れているので、すべてのGitHubユーザーに対してリポジトリを公開する設定になっています。
Privateとすることでリポジトリの作成者が許可したユーザーのみがリポジトリを参照できる設定にすることも可能です。

上記画像のページに遷移すればリモートリポジトリの作成が完了です!

③自分の端末(PC)にローカルリポジトリを作る

GitHubの方でリモートリポジトリの作成が完了したので、ローカルリポジトリの作成をしていきます!

デスクトップにgit_testというディレクトリ(フォルダ)を作成しましょう!

ディレクトリを作成したらVSCodeでgit_testを開き、画面上部にあるターミナルをクリックし、新しいターミナルをクリック

すると画面の下部にターミナルが展開されます。

今回はこちらでgitの操作をしていきましょう!

git initコマンドでローカルリポジトリを作成します。

$ git init

以下のように表示されたら成功です!

Initialized empty Git repository in ~

~の部分はみなさんのgit_testを作成したパスです。

④ファイルをローカルリポジトリに登録

次に、git_testディレクトリにpush_test.txtという名前のテキストファイルを新規に作成してください。
作成のやり方は自由ですが、下記のように、VSCodeから作成していただいても大丈夫です。

VSCodeの画面左上にあるファイルのアイコンをクリックしファイルを新規作成しましょう!

作成したpush_test.txtをVSCodeで以下のように編集します。

push test!!!

ファイルを編集できたら、編集内容をgit addコマンドにて、インデックスに追加します。
インデックスに追加することでGitで管理する対象のファイルとなります。

$ git add push_test.txt

エラー等何もメッセージが表示されなければOKです!

インデックスの追加を実施したら、ローカルリポジトリに変更内容をコミットします。
コミットにはgit commitコマンドを実行します。

$ git commit -m “pushコマンドの確認”

-mはメッセージオプションのことです。
メッセージオプションを付けることで、どのような編集内容なのかを記録することができます。
-m """"の中に指定することができます。
ちなみに、メッセージ内容は自由ですが、今回はわかりやすいように「pushコマンドの確認」としています。

成功すると以下のように表示されます。

[main (root-commit) 4d21edc] “pushコマンドの確認”
 1 file changed, 1 insertion(+)
 create mode 100644 push_test.text

これでローカルリポジトリへ変更内容のコミットが完了しました。

⑤リモートリポジトリにpushする

今のままでは、皆さんの端末の中でしか変更が反映されていない状態です。
なので、GitHubでバージョンを管理できるようリモートリポジトリに変更内容を反映させましょう!

ローカルリポジトリに作成したファイルをpushコマンドでリモートリポジトリへ送信してみます。
pushコマンドは、ローカルリポジトリで編集したファイルやフォルダをリモートリポジトリへアップロードするためのものです。

pushで送信する前にgit remote addコマンドを使用して、ローカルリポジトリとリモートリポジトリの結びつけを行います。
※こちらはpushするたびに行う必要はなく、結びつけるために1度だけ最初に行います。

リモートリポジトリのURLは先程GitHubで作成したリモートリポジトリのURLを指定します。
GitHubのリポジトリのURLは通常下記のようになっています。
https://github.com/ユーザーID/test.git
ユーザーIDは、皆さんが設定したユーザーIDのことです。

$ git remote add origin https://github.com/ユーザーID/test.git

git remote addをしたことにより、ローカルリポジトリとリモートリポジトリが結びついたので、git pushコマンドでリモートリポジトリにファイルをアップロードしていきます。
以下のコマンドを実行してください。

$ git push origin main

実行するとGitHubのページに遷移するので、usernameとpasswordを入力し、Authorize githubをクリック

成功すると以下のように表示されます。

Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 264 bytes | 264.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/ユーザーID/test.git
 * [new branch]      main -> main

では、push_test.txtの編集内容がGitHub上で登録されていることを確認しましょう!
https://github.com/ユーザーID/testへにアクセスしましょう!
※ユーザーIDの部分は各自書き換えてください。

上記画像のように先程編集した内容が反映されていればOKです!

これでローカルリポジトリからのGitHubへのファイルアップロードの一連の流れが完了しました!

次の教材

次の教材は下記から簡単に飛ぶことができます!
引き続きプログラミングを楽しんでいきましょう!

あわせて読みたい
【Git+GitHub教材②】Gitを使ったブランチ操作やGit・GitHubを使った本格的な開発の流れを徹底解説 こちらの記事はGit+GitHub教材の第2回目の記事になります。 その他のGit+GitHub教材を学習したい方は下記リンクから直接教材へ飛ぶことができます。 ブランチの操作 続...

プログラミング学習サポートについて

「独学で挫折した。。。」

「一人でのプログラミング学習がしんどい。。。」

「未経験からエンジニア転職をしたいけど何をしたら良いかわからない。。。」

このような悩みをお持ちの方向けに、本教材作成者のファドがMENTAという学習サイトにてあなたのプログラミング学習とエンジニア転職を徹底サポートいたします!

サポート価格はなんと1日あたりたったの約300円!

教材で分からない箇所のサポートはもちろんのこと、本サイトで公開しているすべての課題の解答も公開しております。
また、MENTAで学習を終わらせていただいた方限定で懇意にしていただいている企業さんを紹介することもあります!

なお、サポート内容の詳細は下記の通りです。

  • 目標設定
  • マインドセット
  • オリジナル教材見放題
  • オリジナル課題見放題
  • オリジナル課題の解答見放題
  • 課題コードレビュー
  • 教材への無制限質問
  • 課題への無制限質問
  • ポートフォリオ作成アドバイス
  • 褒めのコーチング

いくつかのプランを用意させていただいておりますので、下記より一度ご覧ください!

あわせて読みたい
【プログラミング学習】1日あたりたったの「300円」のみでプログラミングを学び、最短で転職or稼ぐ!|【ME... プログラミングを学びたいすべての方へこれからの時代は格安でプログラミングを学び、最短で稼げ自己紹介はじめまして!この度はプランをご覧いただき、誠にありがとうござ...

コメント

    この記事が気に入ったら
    フォローしてね!

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

    コメント

    コメントする

    目次