Github はじめの一歩 -Bracketsでも使えるようにしてみた-

#はじめに

これは、今までGitに触れる機会が無かった私がGitの基本を身につけるために行ったことの備忘録です。
インストールなどの画像を撮り忘れてしまい、一部は外部記事の引用となっていますが、ご了承ください。
環境は以下の通り

- OS：Windows10
- Git Ver.：2.28.0.Windows.1
- エディタ：Brackets

#手順

1. 基本的なコマンドを学ぶ
2. Gitのアカウントを作成し、リポジトリを作成する
3. Gitをインストールする(Windows10）
4. Git Bashの設定をする
5. ローカルにリポジトリを作成する
6. Gitにファイルをアップロード(push)する

##おまけ

- Brackets Gitをインストールする
- Brackets Gitの使い方
- Git BashのデフォルトエディタをBracketsに設定する

# 1.基本的なコマンドを学ぶ

Gitでは基本的にターミナルでコマンドを実行して操作します。
Git独自のコマンドのほか、基本的なファイル操作を行うコマンドラインの知識も必要です。
今回は以下のサイトを使ってコマンドの学習を行いました。
[Progate｜コマンドライン](https://prog-8.com/languages/commandline)
[Progate｜Git](https://prog-8.com/languages/git)
重要なコマンドは以下の通り

## ディレクトリ、ファイルを操作するコマンド

```
pwd
```

カレントディレクトリ（現在操作しているディレクトリ）を表示します。

-------

```
ls
```
カレントディレクトリ内のファイルやディレクトリの一覧を表示します。

-------

```
cd <ディレクトリ名>
```
指定したディレクトリに移動します。絶対パス、相対パスどちらも使用できます。
ディレクトリ名を省略するとホームディレクトリに移動します。（作業フォルダーとは違うため注意）

-------

```
mkdir <ディレクトリ名>
```
ディレクトリを作成します。

-------

```
rmdir <ディレクトリ名>`または`rm -fr <ディレクトリ名>
```
指定したディレクトリを削除します。

-------

```
touch <ファイル名>
```
空のファイルを作成します。拡張子まで指定する必要があります。

-------

```
mv <変更前ファイル名> <移動先ディレクトリ名>
```
ファイルを指定したディレクトリに移動します。
移動先ディレクトリ名にファイル名を入力すると名前を変更することができます。

-------

```
cp <コピー元ファイル名> <コピー先ディレクトリ名>
```
ファイルをコピーします。名前を変更する場合はファイル名を入力します。

-------

```
rm <ファイル名>
```
ファイルを削除します。

## Gitを使う上で基本となるコマンド

```
$ git config --global user.name <ユーザー名>
$ git config --global user.email <メールアドレス>
```
ユーザー名とメールアドレスを設定します。

-------

```
git init
git remote add origin <URL>
```
リポジトリを作成します。

-------

```
git clone <URL>
```
指定したリポジトリを自分の環境へダウンロードします。

-------

```
git add <ファイル名>
```
指定したファイルをインデックスに登録します。
ファイル名は`*.html`など柔軟な指定ができます。

-------

```
git commit -m <メッセージ>
```
変更した内容についてのメッセージを記録します。

-------

```
git status
```
現在作業しているローカルリポジトリの変更状態などが表示されます。

-------

```
git diff
```
変更内容を確認します。

-------

```
git log
```
コミットされた履歴を表示します。

-------

```
git push origin master
```
リモートリポジトリにアップロードします。

-------

```
git pull origin master
```
リモートリポジトリからダウンロードします。

# 2.Gitのアカウントを作成し、リポジトリを作成する

[TechAcademyマガジン｜今さら聞けない！GitHubの使い方【超初心者向け】](https://techacademy.jp/magazine/6235)
上記ページを参考に「[Github](https://github.com)」にてアカウントを作成します。
フリープランでも非公開のリポジトリを作成することができるので大丈夫です。
今回は非公開のテストリポジトリを作成しました。

# 3.Gitをインストールする（Windows10）

[Progate｜【Windows】Gitの環境構築をしよう！](https://prog-8.com/docs/git-env-win)
上記サイトを参考にGitをインストールします。
ダウンロードは「[Git for Windows](https://gitforwindows.org)」から。
画像を撮り忘れてしまいました。

# 4.Git Bashの設定をする

Git Bashを使いやすくするために設定をしていきます。

## 作業ディレクトリの設定

Git Bashのアイコンを右クリックし、プロパティを表示します。
![2020-08-17_17h58_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/688078/ac82ce7a-87e8-6212-bf68-48a0c477d347.png)
1. リンク先に`--cd-to-home`というコマンドオプションがあるので、削除します。
2. 作業フォルダーに起動時に移動したいフォルダーを入力します。(画像ではD:\git)
変更できたらOKボタンをクリックします。

## ユーザー名とメールアドレスの設定

Gitbashを起動して、コミットしたときに表示される名前とメールアドレスを設定します。

```
$ git config --global user.name "ユーザー名"
$ git config --global user.email "メールアドレス"
```

## Git Bashのウィンドウやフォントの設定

使いやすいように見た目を設定します。
![2020-08-17_17h58_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/688078/2f251f11-f742-2e0f-edb5-5764284661f1.png)
ウィンドウの左上を右クリックしてオプション画面を表示します。

![2020-08-17_18h07_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/688078/3470b1d6-4357-43fe-f10b-43d593d13da2.png)
Looksから画面や文字の色などを変更します。
Themeから好みのものを選んでかんたんに変更することもできます。

![2020-08-17_18h24_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/688078/01766b97-debb-1ea8-2327-00966d3e177e.png)
![2020-08-17_18h01_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/688078/6ebdc175-1149-1167-b754-09c96f43a0b4.png)
Textからフォントや文字のサイズを変更できます。
自分の見やすいフォント、サイズを選択します。

![2020-08-17_18h01_37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/688078/38c1c342-b627-e56c-4632-3c4df6b36c80.png)
Windowでは、起動時の画面サイズを変更することができます。
Default Sizeで数字を設定して変更します。

変更した結果を見るにはApplyボタン、設定を終了するにはSaveボタンをクリックします。

#5.ローカルにリポジトリを作成する
Git Bashで設定した作業フォルダにローカルリポジトリを作成し、移動します。
今回はtestディレクトリを作成しています。

```
mkdir test
cd test
```

testディレクトリに移動したら、Github上に作成したリモートリポジトリに表示されているアドレスをコピーして
以下のコマンドを実行します。

```
git init
git remote add origin <URL>
```
URLの部分は""で囲うようにしてください。

## Git Bashでコピペをする
Git Bashでコピーするには`Shift + Insertキー`を押します。
Git Bash上では通常のアプリケーションとショートカットキーが違うので注意してください。

## Git initを取り消す
間違ってgit initしてしまった、上手くいかないためgit initからやり直したい場合には`.git`ディレクトリを削除します。

```
rm -rf .git
```

#6.Gitにファイルをアップロード(Push)する
ローカルリポジトリ上に**hello.html**というファイルを作成した上で、Githubのリモートリポジトリにアップロード（Push）します。
最初に、変更したファイル（今回は作成したhello.html）をインデックスに登録します。

```
git add hello.html
```

インデックスに登録することで、変更したファイルを変更履歴とともにアップロードできるようになります。
続いて、変更した内容をリポジトリに記録するためコミットをします。
今回はhello.htmlを作成したことを記録します。

```
git commit -m "add hello.html"
```

ファイルが追加されているか確認するには、以下のコマンドを使用します。

```
git status
```
コマンドを実行すると変更されたファイルは赤字で、addされたファイルは緑字で表示されます。

準備ができたらいよいよアップロード（Push)します。

```
git push origin master
```

Github上で確認をして上手くいっていればhello.htmlが追加されていることが確認できると思います。

Githubの基本的な使い方は以上です。

# おまけ

主に使っているエディターBracketsでGitを使えるようにしました。
これらの作業はGitをインストールした後に行ってください。

## Brackets Gitをインストールする
拡張機能マネージャーから「Brackets Git」を検索し、インストールします。
URLからインストールする場合は以下のページからできるかもしれません。
[Brackets Git | Github](https://github.com/brackets-userland/brackets-git)
わたしの環境では上手く行きませんでした。

## Brackets Gitの使い方
Bracketsで作業したいフォルダーを開きます。
右のサイドバーにある以下のボタンをクリックすると下部にBrackets Gitのウィンドウが表示されます。
![2020-08-18_18h20_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/688078/520f044a-92a6-cbcf-d8d9-28c715ce1557.png)

`init`ボタンでgit initが、`clone`ボタンでgit cloneがかんたんに行えます。
また、以下のボタンをクリックするとGit Bashが起動するのでそちらから最初の設定をすることもできます。
![2020-08-18_18h26_55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/688078/9d0badbc-8824-724a-3b3c-a49b51390a54.png)
個人的にはGit Bashから行う方がわかりやすいかなと感じます。

### Brackets Gitからgit initする
initボタンをクリックするとメニューボタンが表示されるようになります。
右側に`▲－`というボタンがあるのでクリックし、最初の画面に`origin`、次の画面でURLを入力するとリモートと紐付けすることができます。

### Brackets Gitからgit cloneする
cloneボタンをクリックすると以下の画面が表示されます。
![2020-08-18_18h40_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/688078/fc6fe59f-32fb-931d-f887-81611a78bbbf.png)
各欄を入力してOKをすればクローンが可能です。

### Brackets Gitからプッシュする
ファイルが変更されると、以下のように変更されたファイルがリストアップされます。
![2020-08-18_18h48_52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/688078/279c8f23-86ef-bb5f-9a26-666a505b6c89.png)
一番左端のチェックボックスでgit addするファイルを選択し、Commitボタンをクリックするとメッセージ入力ウィンドウが表示されます。
ウィンドウの上部には変更点が表示されています。
メッセージを入力してOKボタンを押すと以下のようにプッシュできるようになるので、ボタンをクリックしてプッシュができます。
![2020-08-18_18h59_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/688078/4d6b0d32-77e3-4bb5-a3f5-146ac8ca59b6.png)

コミットメッセージには日本語も使用可能でした。

## Git BashのデフォルトエディタをBracketsに設定する
Git Bashから以下のコマンドを実行することで設定できます。

```
git config --global core.editor "brackets --wait"
```

以上、Gitの導入とBracketsでの操作方法でした。