ハンズオンで学ぶGitHubの使い方【初級編】
はじめに
今でこそある程度使い方が分かってきたGitHubですが、初めて使ったときは右も左もわからなかった記憶があります。
イマイチ使い方がわからない方に向け、実際に手を動かしながらGitHubの使い方を学べる記事を書きました。
対象者
GitコマンドやGitはなんとなく分かるけれど、GitHubの使い方、見方がわからない方向け
環境
筆者の環境はこちらです
- Windows10
- WSL2（Ubuntu22.04）
- Git
- GitHub
WSLを利用しているのでMacの方でも同様に使えるかと思います。
また先立ってお伝えすると、Windows環境ではなくWSL環境内で作業していきます。
ハンズオン本編
それではやっていきましょう！！
新しいリポジトリを作成
まずはGitHubに新しいリポジトリを作成します。
GitHubの自分のアカウントページからRepositoriesタブを開きます。
そして右上のNewをポチり。
新しいリポジトリの設定をします。
今回は最小限のリポジトリでいきますので、下記のように設定します。
Repository template
リポジトリのテンプレートは使わないのでNo templateのままにしておきます。
Repository name*
リポジトリ名を設定します。
自分のアカウント内で重複しなければ他の人とリポジトリ名が被っても大丈夫なようです。
今回はGitHubTestという名前のリポジトリ名にしています。
入力欄の下に「リポジトリ名 is available.」と緑色表記されていれば利用可能です。
後で変更可能ですが、変更するとローカルのリポジトリ連携をし直す必要があるので後で変更しないようしたほうが良いです。
Description
リポジトリの説明をここで書けます。
今回は空欄のままです。
Public / Private
リポジトリの公開設定です。
Public：公開
Private：非公開
なので、もし非公開にしたい場合はPrivateにチェックを入れます。
今回はデフォルトの公開にします。
こちらも後で変更可能です。
Add a README file
READMEファイルを作成するかのチェックです。
今回はデフォルトのままチェックは外しておきます。
Add .gitignore
Git管理しないファイルを設定するためのファイルが.gitignoreという名前のファイルです。
あとからでも追加できますので今回はNoneのままにしておきます。
Choose a license
リポジトリのライセンスを設定できます。
今回は配布目的ではないのでNoneを設定します。
上記設定できたら右下「Create repository」をクリックしてリポジトリを作ります。
下記画像の状態になればOKです！
①新しくプロジェクト作成する場合
まず、プロジェクトがなく新しく作成する場合の設定方法です。
表示されているコマンドを元にやっていきます。
作業ディレクトリ作成
ターミナルで操作していきます。
まずプロジェクトの作業ディレクトリを作成します。
作業ディレクトリを作りたいディレクトリまで移動します。
今回は~study/GitHubに作業ディレクトリを作りたいと思います。
mkdir study/GitHub && cd $_
このコマンドを打ってディレクトリ作成と移動をします。
GitHubリポジトリ初期化
それではリポジトリを初期化・設定していきます。
GitHubにうつり、赤い枠線部分を使っていきます。
まず上の赤い枠線です。SSHをGitHubに設定している方はSSH、設定していない方はHTTPSを利用します。
URLが以下のように違います。
# HTTPS
https://github.com/アカウント名/リポジトリ名.git
# SSH
git@github.com:アカウント名/リポジトリ名.git
どちらを利用するかはSSHキーを設定しているかいないかの違いです。
Windows環境でSSHを作成していない方はHTTPS、MacやWSLでSSHを作成している方はSSHの方を選択するようにしてください。
このときURLをコピーするのではなく、赤枠の方をポチッと押すだけにします。
pushでGitHubに反映
2つ目の赤枠の方をコピーしてターミナルに貼りEnterを押すだけで色々やってくれます。
コピーボタンが上記画像のようにあるので、ポチッと押してコピーします。
内容の解説は後ほど。
そしてターミナルにペーストします。
Enterを押せば初期化とpush完了です！
GitHubのページをリロードすると、push出来ているのが分かります。
②既存のプロジェクトを追加する場合
サンプルとしてReactアプリが既に手元にあると仮定します。
~study/github2
├README.md
├node_modules
├package-lock.json
├package.json
├public
└src
leコマンドを打つとこんな感じ。
作業ディレクトリに移動
サンプルでいうとgithub2まで移動します。
なので上記画像と同じ状況ですね。
GitHubリポジトリ追加
GitHubに戻ります。
上項目「①新しくプロジェクト作成する場合」と同様に、HTTPSなのかSSHなのかを選択します。
SSHキーをGitHubに設定していない方はHTTPSを、設定している方はSSHを選択。
pushでGitHubに反映
プロジェクトが存在している場合のコマンドを打っていきます。
画像赤枠がコピーする内容です。右上の青枠をポチッと押すとコピーできます。
ターミナルに戻りペーストしてEnterするとpush完了です！
fatal: Not a git repository (or any of the parent directories): .gitエラー
Gitの初期セットアップが出来ていないときに上記のようなエラーが出ます。
その時はユーザー登録・初期化してからやると良さそうです。
参考：エラー：fatal: Not a git repository (or any of the parent directories): .git 対処方法
コミット履歴を確認する
上記「①新しくプロジェクト作成する場合」で作成した前提で進めていきます。
まず先ほど作ったREADMEファイルをVSCodeなどで開きましょう。
そして中身を好きに書き込んでみてください。
書き込んだらターミナルからステージング・コミット・プッシュまでしてしまいましょう。
GitHubへ戻りページを更新すると、READMEが変わっているのが分かります。
GitHubからコミット履歴を確認してみましょう。
GitHubの画像の赤枠「2 Commits」をポチッと押してみてください。
するとmainブランチのコミット履歴が見れます！
コミットは「巻き戻せるセーブデータ」みたいなものです。
こまめに取ることで、やり直したいときや何をやったかがわかりやすくなります。
例として個人開発したミニアプリのコミットメッセージをお見せするとこんな感じで見ることが出来ます。
こまめなコミットとコミット内容がわかるメッセージを心がけましょう！
設定を変更する
それではここで、リポジトリの設定内容を変更する方法をご紹介します。
リポジトリページのSettingsタブを開きます。
作成時に「後で変更できます」と記載した部分をどこで変更できるのか見ていきましょう。
リポジトリ名
リポジトリ名はSettingsタブのGeneralにあります。
赤枠を変更しRenameボタンを押すと変更可能です。
公開 / 非公開
SettingsタブのGeneralの一番下にあります。
一番下にあるDanger Zoneの中にChange repository visibilityの項目があります。
そこのChange visibilityを押すと色々確認画面がでてくるので、ポチポチ押したあとに公開⇨非公開や非公開⇨公開に変更できます。
リポジトリが公開状態なのか非公開状態なのかは、ページ一番上のリポジトリ名の右に🔏マークの有無で分かります。
マークが有るものは非公開状態、無いものは公開状態です。
その他
.gitignoreは少し難しい話になるので今回は割愛しますが、ざっくり説明すると「Git管理しないものを設定する」ファイルです。
ここに記載されたものはGitから管理が外れるというものです。
おわりに
画像付きでGitHubの基礎的な使い方をご紹介しました。
ブランチを分けたりプルリク・マージ・コンフリクトの対処法は次回「中級編」で出来たらいいなと考えています。
ご拝読ありがとうございました。
Discussion