mosya
mosya Business はこちら

GitHub入門 - ソースコードをGitHubにアップロードするまで

この記事は駆け出しエンジニア向けの記事です。すでにGitHubの使い方を知っていると言う方はこの記事を読む必要はありません。

GitHubとは

まず、GitHubとは何かについておさらいです。GitHubとは、Gitというソースコードを管理する仕組みがあるのですが、
その仕組みを利用して、さまざまな人が自由にソースコードを公開、もしくは非公開で管理できるようにするためのサービスです。
OSS(Open Source Softwere)という自由にソースコードを改変したり再配布したりすることが認められた無償のソフトウェアなどもGitHubでよく公開されていたりします。
また、ソースコードを表には公開せず、仕事としてチームでソースコードを管理するためにGitHubを利用するケースも多いです。
このように仕事で使うケースもあれば、個人で何か開発する際にも使うので、エンジニアであれば、GitHubは必ず登録しておいた方がいいでしょう。
GitHubの他にもGitを利用したサービスとして以下のようなサービスがあります。

今回は、GitHubに絞って話を進めていきます。

GitHubへの登録

まず、GitHubのアカウントを作りましょう。
以下のURLにアクセスして、メールアドレスを入力し、「Sign up for GitHub」をクリックします。

https://github.com/

GitHubの指示に従って登録作業を進めましょう。最後料金について選択がありますが特に理由がなければFreeプランを利用しましょう。
Freeプランでも十分な機能が利用できますし、僕自身フリープランを利用しています。

GitHubにSSH keyの登録

次にGitHubにSSH keyを登録します。SSH keyと聞くと難しく聞こえるかもしれませんが、遠隔にあるサーバーと自分の端末との通信をするための仕組みで、
外部に通信内容が漏れても大丈夫なように暗号で通信し、その暗号を解くための鍵(key)がSSH keyです。
この鍵を自分の手元で生成し、GitHub側にも登録しておくことでお互いに通信を暗号化し、複合することが可能になります。

鍵は、ターミナルというコマンドベースのアプリを使って生成することができます。
Macであれば、lunchpad経由でターミナルを見つけることができます。

lunchpadを開いたら、検索バーに「ターミナル」と入力してみましょう。

ターミナルが表示されたら、ターミナルをクリックし、開きます。
そこに以下のコマンドを入力してみましょう。

ssh-keygen

すると、id_rsa.pubというファイルが生成されるのでこれをGitHubの以下のページで登録します。

https://github.com/settings/keys

また、~/.ssh/configを作成しその中に以下の記述をしましょう。
id_rsaの部分には作った秘密鍵のファイル名が入ります

Host github github.com
  HostName github.com
  IdentityFile ~/.ssh/id_rsa
  User git

Sourcetreeをインストールする

次にGitのクライアントアプリをインストールしましょう。
このアプリを利用することで、気軽にGitHubや他のGit管理サービスにコードをアップロードすることができます。
おすすめはSourcetreeです!
SourcetreeはMacユーザーでもWindowsユーザーでも利用できますし無料です。

Sourcetreeをダウンロードしたら 環境設定>アカウント より以下の画像のようにアカウントを追加します。

レポジトリを作成する

レポジトリとはファイルの変更履歴を管理したい単位になります。1プロジェクトごとに1レポジトリ作るケースもあれば、
サーバーサイドとフロントエンドを分けてそれぞれ1レポジトリずつ作るケースもあります。
早速レポジトリを作ってみましょう。

まずはGitHubのサイトに戻ります。

https://github.com

画面の左上に「Create repository」というボタンがあるのでこちらをクリックします。

レポジトリ名を決めレポジトリを作成しましょう。
レポジトリが無事作成できたら、GitHub上のレポジトリと自分の端末をリンクする設定をしましょう。

GitHubにて作ったレポジトリに移動し、緑のCodeボタンをクリックします。そこからクローンするためのURLをコピーしましょう。
この際に必ず、SSHタブを選択してください。

ターミナルにコピーしたURLを使って以下のように打ち込みます

git clone コピーしたURL

するとGitHub上のレポジトリにいつでもソースコードをアップできるディレクトリーが端末内に作成されますので、そのディレクトリーに移動し、ファイルを作って編集してみましょう。

編集すると変更点がSourcetree上に表示されますので、変更内容を記述して右下の「コミット」ボタンをクリックしましょう

最後に、Sourcetreeの上部のツールバーの「プッシュ」をクリックすれば無事ソースコードがGitHub上で更新されます。

Authored by

筆者の写真

Godai@steelydylan

Webサービスを作るのが好きなWebエンジニア。子供が産まれたことをきっかけに独立し法人化。サービス開発が大好き。
好きな言語はTypeScript。

ReactやTypeScriptなどの周辺技術が学べる
オンライン学習サービスを作りました!

詳しくはこちら
mosya

mosyaはオンラインでHTML,CSS,JavaScriptを基本から学習できるサービスです。現役エンジニアが作成した豊富なカリキュラムに沿って学習を進めましょう。

© 2023 - mosya. All rights reserved.