2-4. Cloud9とGitHubの連携

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

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

GitHubとCloud9の連携を設定

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

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

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

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

先の章でCloud9 IDEの立ち上げとGitHubのユーザ登録が完了しました。本章では、この２つを連携させます。

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

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

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

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

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

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

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

リモートリポジトリのクローン

GitHub上に存在するリモートリポジトリを自分の環境にコピーすることができます。
このことをクローン（clone）といいます。

Cloud9とGitHubの連携

それでは早速、教材のリポジトリをCloneしてみます。

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

まずはGitHubにログインしてください。
ログインできたらこちらにアクセスし、Generate new tokenをクリックしてください。

すると表示が切り替わるので以下の画像の赤枠で囲われた部分を画像と同じようにしてGenerate tokenをクリックしてトークンを生成しましょう。

トークンの生成が完了すると以下のような画面に切り替わります。
赤枠で囲った部分がアクセストークンになります。
クローンする際にアクセストークンが必要になるので、いつでもコピーできるようにメモ帳などに貼り付けておきましょう。(クローン毎にアクセストークンが必要なわけではありません)
※ アクセストークン完了画面を再読み込みするとアクセストークンを確認できなくなるので注意してください。

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

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

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

ec2-user:~/environment $ 

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

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

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

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

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

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

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

今後の流れ

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

• aitechschool_webリポジトリのstudyディレクトリの中身を、学習しながら編集
• 不明点があれば講師に質問

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