Githubの始め方|1人で練習するための準備

Saturday, October 2, 2021

最近すこぶる体調が良いHayatoです。

Gitを使うからにはGithubも使えるようになりたい!という人になるべく簡潔に使い方と始め方を書いていこうと思います。

  • GitとGithubはどういう関係なの?
  • どういう仕組みなのかいまいち理解してない
  • まずはとりあえずGithubが使える環境を準備したい

という疑問や要望に応えていけるように書いていきます ^^

下手したら学校でも必修科目になるんじゃないか?というくらい重要度が増しているものなので今のうちに学んでおきましょう ^^/

Githubとは

Githubとはgit(バージョン管理システム)を使ってプロジェクトのファイルなどをクラウド上で管理するためのウェブアプリです。

そう、

  • Git = バージョン管理システム(ツール)
  • Github = Gitを使ったプロジェクト・ファイル管理アプリ

です。ほかにも「Gitlab」や「Sourcetree」などもGithubと同じようなウェブアプリです。

さらにGithubにはプロジェクトのタスク管理やコミュニケーションの機能などもあります。

Gitを使ってローカルPCでやっていたことをクラウド上でやろう、というのがGithubの目的の1つです。

gitについては別の記事で簡単に解説しているので、気になる人は読んでみてください :)

Githubのしくみ

Githubはネット上にあるWindowsの「エクスプローラー」やMacの「ファインダー」の高性能版みたいなもので、複数人でファイルをアップロードしたりダウンロードしたりできます。

Githubと接続してファイルをやりとりするためには

  • ローカルのPCにGitをインストールする
  • GitにGithubのどのオンラインフォルダーと接続するか設定
  • 必要に応じてファイルのアップロードやダウンロードをする
  • GitがGithubのフォルダーとローカルPCのフォルダーの中身が一致するようにバージョン管理してくれる

という具合にローカルとクラウドのファイルの整合性を保つようになってます。

Githubのアカウントをつくる

Githubは無料でアカウントをつくって利用できます。

いくつかの制限はありますがそれでも十分すぎるくらいの機能があります。

GithubからSign Upでアカウントをつくることができますが、行けばわかると思うのでやり方は省略します >_<

Githubの始め方

ここまではいいんですよ。問題はここからどうすれば理解して使えるようになるのかです ^^;

僕もそうでしたが同僚もみんな大苦戦してます >_<

ただ一つ言えることは、「ファイルとかメチャクチャになっていいから使いまくれ!」です。

もちろん本番じゃなくて練習用のプロジェクトでですよ ^^;

やっている間に段々と仕組みがわかってきます。では早速やってきましょ >_<

ターミナルでもできるんですがわかりずらいのでVS Codeを使っていきます。

  1. Githubで新しいプロジェクトの準備
  • 1.1. Githubで新しいプロジェクトをつくる
  • 1.2. CloneボタンからURLをコピー
  1. VS CodeでGitの設定とプロジェクトファイルのダウンロード
  • 2.1. VS Codeでテスト用のフォルダーを開く
  • 2.2. VS Code内のターミナルでgitのアカウント設定をする
  • 2.3. git cloneでGithubからリポジトリをダウンロードする

1.Githubで新しいプロジェクトの準備

Githubのアカウントを作ると以下のようなページになります。

Githubログイン後のページ

Githubログイン後のページ

このページで「Create repository」をクリックすると新しいリポジトリをつくることができます。

リポジトリ(repository)は要はフォルダーのことです。ひとつのフォルダーを1つのプロジェクトのためだけに使うのが一般的な使い方になります。

1.1.Githubで新しいプロジェクトをつくる

「Create repository」をクリックすると以下のようなページになります。

新しいリポジトリの作成

新しいリポジトリの作成

ここで

  • Repository Name(プロジェクト名)
  • Public / Private(他の人に見えるようにするかどうか)
  • Add a README file(チェックしましょう)
  • Add .gitignore(とりあえずチェックなし)
  • Choose a license(とりあえずチェックなし)

の設定をして「Create repository」をクリックすれば完了です。

1.2.CloneボタンからURLをコピー

新しいリポジトリができたら以下のようなページになります。

リポジトリページ

リポジトリページ

これがGithubでよく見る画面になります ^^

いろんな機能があって説明すると長くなってしまうので、とりあえずリポジトリ(フォルダー)の中に入っているファイルの一覧だと思ってください。

さきほどチェックを入れた「README.md」というファイルが最初から入っており、リポジトリの名前がファイルないに書かれています。

このREADME.mdの内容が下の方でプレビューされています。

さて、次にやることは

  • 緑の「Code」のボタンをクリック
  • ポップアップにHTTPSのURL(https://….)があるのでコピーする
URLのコピー

URLのコピー

このURLを使ってGithubからローカルPCにリポジトリを丸ごとダウンロードします。

2.VS CodeでGitの設定とプロジェクトファイルのダウンロード

つぎにリポジトリを自分のPCにダウンロードします。これを「クローン(clone)」と言います。

2.1.VS Codeでテスト用のフォルダーを開く

まずはVS Codeを起動して、好きなフォルダーを開きます。

すると↓のような画面になるかと思います。

VS Codeを起動

VS Codeを起動

2.2.VS Code内のターミナルでgitのアカウント設定をする

VS Code内のターミナルで以下のコマンドを入力してアカウント設定する(ターミナルが開いていなければ「Ctrl + Chift + `」)

$ git config user.name YOUR_NAME
$ git config user.email YOUR_EMAIL
gitアカウント設定

gitアカウント設定

2.3.git cloneでGithubからリポジトリをダウンロードする

つぎにさきほどGithubでコピーしたURLをgit cloneします。

git clone コピーしたURL

僕のリポジトリの場合は「git clone https://github.com/hayato-one/test-git.git」です。

git cloneでダウンロード

git cloneでダウンロード

これでGithubからリポジトリをダウンロードすることができました ^^/

長くなってきたので次回の記事で練習スタートです :)

まとめ

Githubでのリポジトリのつくりかたと、ローカルPCにダウンロード(clone)する方法について解説しました :)

もろもろの登録は一度やればずっと使えるのでパスワード等なくさないようにしましょう >_<

cloneした場合にはフォルダー内に「.git」フォルダーがコピーされて自動的にgitを使えるフォルダーになります。

あとはいろんなコマンドを通してgitとGithubを使うところを、「Git Graph」を使って視覚的に解説していこうと思います ^^

それではごきげんよう ^^/


記事をシェア・Likeしてくれると ^_^ です!


comments powered by Disqus