【初心者向け】難しいコマンド操作なし Git・Githubの導入方法
Github というツールはご存知でしょうか。 Microsoft 傘下のソフトウェア開発のプラットフォームであり、ソースコードをホスティングすることができます。「ソフトウェア開発」とありますが、平たくいうとフォルダ・ファイルをクラウド上で管理ができて、チーム内でプロジェクト共有・テキストベースのファイルなら更新時に比較したりコメントしたりできるツールです。
2020-07-05
Githubというツールはご存知でしょうか。
Microsoft傘下のソフトウェア開発のプラットフォームであり、ソースコードをホスティングすることができます。
「ソフトウェア開発」とありますが、平たくいうとフォルダ・ファイルをクラウド上で管理ができて、チーム内でプロジェクト共有・テキストベースのファイルなら更新時に比較したりコメントしたりできるツールです。
IT業界にいれば知らない人はいないほど空気のように使うツールですが、なかなか他業界にいると触れる機会は少ないのではないでしょうか。
かくいう私も、前職・前々職ともIT業界以外の産業で働いていましたが、名前を聞いたことはあっても使い方や、何が便利なのかは全くわかっていませんでした。
一部コマンド操作もあり、若干とっつきにくい印象はありますが、使えるようになると「ファイル・プロジェクト管理」が圧倒的に楽になるので、今回はできるだけわかりやすく導入方法についてまとまてみました。
個人利用であれば、無料でもほぼすべての機能を十分すぎるほど使えるので是非試してみてください！
Git事前知識
Gitでの管理は単純にファイルを保存するだけでは、Githubにアップロードすることはできません。Git特有の工程を踏む必要があります。「なんでそんな面倒なことをするの」と思うかもしれませんが、慣れると気にならなくなります。
今回の説明でGit用語？がいくつか出てくるので、事前に説明しておきます。
ステージング
コミットする変更内容を選択するといったイメージです。ファイル全体を指定することもできるし、ファイルの一部のみ選択も可能です。
コミット
ステージングにより選択された変更内容を**、**Gitのログとして正式に保存します。あくまでローカル保存のためGithub上には反映されていません。
プッシュ
コミット内容をGithubに反映させます。webブラウザ上のGithubサイトからファイルの変更履歴閲覧やコードレビューを行うことができるようになります。
Githubの新規登録方法
以下公式サイトにアクセスし、右上にあるSing upボタンから登録を開始します。
遷移したページから、ユーザーネーム・Eメールアドレス・パスワードを新規登録します。
※ パスワードは「15文字以上」 または 「8文字以上で英文小文字・数字を含む」
更に次のページに遷移するとユーザー属性を登録するページに移動しますが、ここはさほど重要ではないので、自分に近い属性を選択しておけば問題ありません。
ここまで、登録するとEメールアドレスでの最終確認となります。
登録したEメールアドレスにGithubから登録確認メールが来ていると思います。
Verify email addressから登録を完了させましょう。
これでGithubへの登録は完了です！
簡単ですね。ショッピングサイトより登録が楽かもしれません。
ローカルPCでGit管理を導入する
ここからが本番です。Gitによるプロジェクト管理方法は様々な方法があるのですが、今回はなるべく手軽にできる方法としてVisual Studio Code（vscode）を使ってコマンド操作をなるべく省いて行います。
vscodeはIDE（統合開発環境）と呼ばれる、平たくいえば「プログラムが書きやすい多機能テキストエディタ」だと考えてもらえば相違ないかと思います。また、開発元がMicrosoftのためGithubとの相性も良いです。
慣れればコマンド操作でもOKですが、私自身 実際の開発でもvscodeの画面で操作することが多いのでそこは個人の好みになります。
以下、公式サイトから無料でダウンロードできます。
ダウンロードが完了したら、vscodeで管理したいプロジェクトのフォルダを開きます。
（vscodeのアプリを立ち上げ > メニューバー > File > Open > プロジェクトフォルダ選択）
今回はサンプルとしてtest_projectという名前のプロジェクトフォルダを新規作成し、README.mdファイルの更新管理をしていきます。
それでは、Git管理を始めましょう。vscodeには最初からGit機能が付属しているので、左のメニューバーから○と線が分岐している？ようなアイコンをクリックします。
すると左のフォルダ画面がSOURSE CONTROLに変わります。Initialize Repositoryボタンをクリックしましょう。これでGitの初期設定が完了です。
Initialize Repositoryボタンをクリックするとファイルが表示されるようになります。
ファイルをクリックすると、ファイルの差分が表示されるので変更が間違いないか確認しつつ、ファイルの右に操作アイコンが表示されるので「+」をクリックします。
これでコミットするファイルが選択された状態（ステージング）にファイルを変更したことになります。
※ 「+」の左横の←をクリックすると、ステージング状態からファイルを外すことができます。
それではコミットをしてみましょう。
ファイルの上にフォームがあるので、そこにコミットメッセージを記述します。コミットメッセージはなくてもコミットできますが、基本的には「履歴を追いやすくする」＋「チームメンバーにどんな変更を行ったのかを共有する」ために、残しておく必要があります。
コメントを書き終わったら、フォーム上のチェックマークをクリックすることで、コミットが完了します。
これでコミットが完了しているはずですが、本当に保存がされているのか不安ですよね。
Gitには過去の履歴を見る機能もあります。vscodeで履歴をみるためにはプラグインを導入する必要があります。
左端のアイコンメニューから、箱が崩れ落ちたようなアイコンをクリックしましょう。
フォームで「git history」と検索し、インストールを行います。
Gitに戻ると、新たにログのアイコンが追加されているのが確認できます。アイコンをクリックするとそれまでのコミット履歴を確認することができます。
Githubにコードをアップロードする
これまでの工程でローカルPCでコミット履歴の管理ができるようになりました。
いよいよ今度はGithubにプロジェクトコードをアップロードしていきましょう。
最初にGithub上からレポジトリ（プロジェクトフォルダ）を作成します。
「Repository name」にプロジェクト名を記述します。Public（全世界に公開）・Private（特定のアカウントしかみれない）を選択します。最初公開が不安であればPrivateで作成しても問題ありません。
レポジトリの作成が終わると、ローカルコミットをGithubにプッシュする方法の説明ページに遷移します。以下画像のピンク枠内のURLをコピーしておきます。
vscodeに戻り、キーボードでctrl（cmd）+ shift + P を押し、コマンドパレットを開きます。
コマンドパレット内で git add remoteを検索しクリック。先程GithubでコピーしたURLを貼り付け、nameをoriginにする。これでプッシュ先のGithubレポジトリを登録することができました。
後はGithubにコミットをプッシュするだけです。
Gitのメニューを表示し、「…」から「Push」を選択します。
初回プッシュ時には以下のようなメッセージが表示されますが、いずれも「Yes」でOKです。
The branch ‘master’ has no upstream branch. Would you like to publish this branch?
Github上にmasterブランチがありません。作成しますか？
The extension ‘GitHub’ wants to sign in using GitHub.
vscodeのGithub拡張機能を使うにはGithubにサインインする必要があります。
自動でブラウザでGithubが開くので、「Authorize github」をクリックします。
完了すると、先程のローカルコミットがGithub上に反映されているのを確認することができます。
まとめ
今回は導入に必要最低限のGit・Githubの機能しか説明しておりません。
Git・Githubは奥が深いので、本格的に使いこなすには多くのことを学ぶ必要がありますが、今回の説明で「導入は簡単そうだしとりあえずどんなものか使ってみようかな」と思っていただけると幸いです。
一度導入すれば、色々と「ああしたい、こうしたい」が出てくると思うのでその都度調べて使い方を学んでいけばOKです。
また、コマンドで操作したいという方は、よく使うgitコマンド一覧も以下記事にまとめたので参考にしてみてください！