2-4. Cloud9とGitHubの連携(旧)

本章では、Cloud9とGitHubが連携できるように設定します。両者間を連携する設定だけでなく、簡単なGitの操作も説明します。

そもそも何をしようとしているのか

GitHubとCloud9の連携を設定

GitHubとCloud9の連携を設定・・・といきなりいわれてもピンときませんよね。それもそのはず、GitHubやCloud9が何をするものなのか理解しないうちに「両者を連携」といわれても分からないのが当然です。

おさらいをしておきましょう。そもそもCloud9とGitHubは何をするものなのか、そこからです。

Cloud9はプログラムを作って動かす環境
GitHubはプログラムを保存する場所

現役エンジニアが上記を見るとけげんな表情をしそうですが、詳細を説明すると壮大な話になるので、今は上記程度の理解で十分です。

先の章でCloud9 IDEの立ち上げとGitHubのユーザ登録が完了しました。本章では、この２つを連携させます。そしてCloud9でプログラムを作成して、作った物をGitHubへアップするという流れを作るのです。

GitHubへアップすれば講師がプログラムを確認できます。質問があればそのアップされたプログラムを見てアドバイスできます。

（注）GitHubへプログラムをアップすることを、pushするといいます。

基本編で使うリポジトリ

基本編では、以下のGitHubリポジトリ（プログラムの実行に必要なものを全てまとめたもの）を使います。

engineer_basic エンジニアコース基本編　独習用

ローカルリポジトリとリモートリポジトリ

リポジトリ（repository）という英単語は、倉庫を意味します。その名の意味するとおり、プログラミングでもリポジトリといえば実行に必要なもの一式（プログラムの書かれたファイルや画像ファイルなどなど）となります。

リポジトリにはローカルリポジトリとリモートリポジトリがあります。

この場合のローカルとは、自分が開発している環境だと思ってください。よって、皆さんはCloud9で開発をするので、Cloud9にあるプログラミングに必要なファイル等々一式をローカルリポジトリと呼びます。

プログラミングでいうローカルという単語は、一般的に自分のPC内を意味することが多いです。よってCloud9がローカルかというと若干違和感を感じます。

自分の完全なコントロール下にあるリポジトリをローカルリポジトリ、GitHub上にあるリポジトリをリモートリポジトリと理解すれば十分でしょう。

言い方としてはローカルリポジトリで作成したものをリモートリポジトリへpushする、となります。

自分のローカル・リモートリポジトリを作る

基本編の学習に必要な材料は、全て当スクールのリモートリポジトリから取得します。それを自分のリモートリポジトリにアップします。

図で説明します。

まずはGitHubにあるスクールのリポジトリを、自分のCloud9環境にコピーします。これをリモートリポジトリをclone（クローン）するといいます（①）。

cloneすると、GitHubにあるリポートリポジトリ、つまりGitHubにあるスクールのファイル等々が全てダウンロードされます（②）。

次に、自分のGitHubに新たにリポジトリを作ります（③）。

cloneしてきたリポジトリと、自分のリポジトリを関連づけます。これで、スクールのリポジトリの中身があなたのものになり、かつ元のスクールのリポジトリとは関係が切れます。

そして課題を提出するときは、編集したローカルリポジトリをリモートリポジトリにアップします。これをpush（プッシュ）といいます。提出課題をpushして、そしてリモートリポジトリのURLを送ってくださると、スクールのメンターが添削をして返却するというわけです。

Cloud9とGitHubの連携

それでは早速、先ほど解説した手順を実際にやってみましょう！教材のリポジトリをCloneしてみます。

基本編のリポジトリをcloneする

Cloud9へ接続してください。Cloud9への接続方法は「AWSのユーザ登録とCloud9のIDE作成」をご覧ください。

次に、ターミナルの表示を確認してください。こちらです。

ターミナルの表示は、上の図のように以下のようになっているはずです。

ec2-user:~/environment $ 

今後、$（ダラー）マークの後から入力してください。そして、以下のコマンドを貼り付けて、実行してください。

git clone https://github.com/aitechcamp-dev/engineer_basic.git

するとGitHubのユーザー名とパスワードの入力を求められるので、ご自身のユーザー名とパスワードを入力してください。
パスワードを入力しても、入力した内容が反映されないので「壊れた」や「バグった」などと思うかもしれませんが、これはそういう仕様なので安心してください。
入力した内容はしっかりと裏側で処理されています。

cloneに成功すると、ファイルツリーに「engineer_basic」というディレクトリができます。これが当校が提供する、学習に使用するファイルやディレクトリです。

ファイルのツリー表示を見ると「engineer_basic」というディレクトリが表示されています。中身を見ると、3-1 / 3-2 / 3-3 … と章ごとのディレクトリに分かれており、さらにその中にcompleteとstudyに分かれています。

studyディレクトリの中には、教材中にあるソースコードを手打ちして確かめられるように、土台となるものが格納されています。いわゆる完全なソースコードから部分的に削除したものといえます。

completeディレクトリは、教材にあるソースコードの完全形が格納されています。studyのコードを編集しても教材通りに動作しない場合は、completeにある正解と見比べて原因を探してください。

GitHubにリモートリポジトリを作る

ご自身のアカウントでGitHubにログインしてください。ログイン後に一番右上のアイコンをクリックすると、プルダウンメニューが現れます。その中に Your repositories があるので、選択してください。以下のようになります。

※筆者のリポジトリ一覧なのでたくさん表示されていますが、皆さんの場合何も表示されません。

Your repositories を閉じた後、画面左寄りのところに「new」というボタンがありますのでクリックしてください。リポジトリの新規作成画面が開きます。

「Repository name」はengineer_basicと入力してください。あとは何も変更する必要はありません。入力できたら「Create repository」のボタンをクリックしてください。

今一つピンときませんが、これでご自身のGitHubリポジトリができました。

自分のリモートリポジトリと関連づける

Cloud9にある自分のローカルリポジトリと、先ほど作ったGitHubのリモートリポジトリを関連づけましょう。

関連付けする方法は、先の画面にすでに書いてあります。「… or push an existing repository from the command line」のところです。若干の編集をすれば使えます。Cloud9のターミナルで、以下のコマンドを実行してください。ただし、一部みなさんのリポジトリごとに固有なところがあるので、ご注意ください。

あと、GitHubに書かれているコマンドとは別に、最初に１つだけコマンドを実行する必要があります。よって実行すべきコマンドは以下４つです。(GitHubユーザ名)と書かれているところは、ご自身のGitHubユーザ名に変えてください。カッコは不要です。

cd engineer_basic
git remote set-url origin https://github.com/(GitHubユーザ名)/engineer_basic.git
git branch -M main
git push -u origin main

エラーらしきメッセージが表示さなければ成功です。

ファイルの変更をpushする（超重要！）

ローカルの編集をリモートへpushします。変更内容をGitHubへアップロードするといえば分かりやすいでしょうか。変更をpushするまでは以下のステップを踏みます。

＜ワークツリー＞
編集してCommand (またはCtrl) ＋ S で保存して・・・の繰り返しの段階です。

＜ステージング＞
変更したファイルをコミット対象に指定した段階です。

＜ローカルリポジトリへコミット＞
変更をローカルレベルで確定した状態です。コミットしたものがpushによりGitHubに送信されます。

＜リモートへpush＞
変更した内容を、ローカルからリモート、つまりGitHubへpush送信します。

pushしたらGitHubに編集内容が送られます。その後は私たちメンター側でも内容を参照でき、レビューやアドバイスが可能になるというわけです。

今後の流れ

今後、以下のように学習を進めてください。

• engineer_basicリポジトリのstudyディレクトリの中身を、学習しながら編集
• こまめにコミット、pushする
• 不明点があれば、pushをしてからslackで質問（URL貼り付け）
• 講師がフォロー

今理解できなくても大丈夫ですのでご安心ください！

基本編で省略したテーマ（応用編で触れる話題）

上記の説明で、GitやGitHubに関して省略したテーマがあります。これらは応用編で扱います。

• ブランチの作成
• GitHub上でのプルリクエスト、マージ
• コミットメッセージのルール