[Work/Class/JavaScript with P5.js/basic]

プログラムをGitHubで管理する

一人で編集する

この項目は「そのプログラムを触っているのが自分一人」という前提．

プログラムをGitHubへ保存・登録する

まず，この授業用のフォルダを作成する．

その中にスケッチ単位のフォルダをさらに作り，前項のhtmlファイルとjsファイルをスケッチフォルダの中に保存する．

現在の実行状態．

GitHub Desktopのメニューから「File」→「New Repository」をするとこのような画面が出る．「Local Path」の「Choose」を選択．

授業用のフォルダ「を含んでいるフォルダ」を選択する．

「Name」には授業用のフォルダ名を入れ，「Initialize this repository with a README」にチェックを入れる．

GitHub DesktopにCurrent Projectとして登録された．これで自分のコンピュータの中のデータベースでは管理ができるようになる．

GitHub.comのサーバに登録する．クラウドに保存するようなイメージ．プロジェクトの名前（ここでは「P5jsDocuments」，Descriptionには「なんのプロジェクトなのか」を記入し，「Keep this code private」にチェックを入れる．チェックを入れないとGitHubのサーバに登録した途端全世界に公開されてしまう．「Publish」でサーバ上に登録される．

https://github.com 上の自分のページを見ると，確かにプロジェクトが登録されている．

その中を見ると，最初のコードを格納したフォルダが存在していて，

中にHTMLファイルとJSファイルが登録されている．ソースコードの中身を見ることもできる．

コードを書き足して，Gitも更新する

先ほどの円を書いた後に，以下のコードを追記して保存する． 

  // グレー
    fill(100, 100, 100)
    // 先ほどの円とは別に円を描く
    ellipse(200, 300, 80, 80);

実行するとこのようになる．

GitHub Desktopに「どこを変更したのか」が表示される．行頭に「-」が付いている赤の行が削除され，行頭に「+」が付いている緑の行が追加されている．左上には「Changes 1」つまり1つのファイルを変更した，という表示が出ている．

「どういう変更をしたのか」を簡潔に書いて，「Commit」する．

「このコンピュータの中」のデータベースに，変更が登録された．GitHubのサーバ上も更新したいため，「Push Origin」（originはサーバ上，という意味）

Pushが終わった．

Webから確認すると，サーバ上もちゃんと更新されている．

別のコンピュータに持ってくる

GitHub.comのサーバ上の状態をそのまま別のコンピュータに持ってくることを「Clone」という．

プログラムコードを別のコンピュータで進めたい場合，まずGithub.comのWebのプロジェクトページから，「Clone or Download」を押して，そのプロジェクトのレポジトリのURLを表示させ，コピーする．

GitHub Desktop上で「File」→「Clone a Repository」をするとこの画面になる．

GitHub DesktopではCloneをする方法が2つある．

1つ目は，「GitHub.com」タブを選択すると，自分のGitHubに保存されているレポジトリ一覧がでるので，選択して，保存したい場所を「Local Path」で選び，「Clone」

2つ目は，「URL」タブに，先ほどコピーしたレポジトリのURLを貼り付けて，同様に「Local Path」で保存したい場所を選び，「Clone」

Cloneすると，指定した位置にちゃんとコードが落ちて来ている．

ちゃんとプロジェクトがGitHub Desktop上にも表示されている．

ここからプログラムを変更したら，先ほどと同様に「プログラムを保存して，変更をGitHub Desktopで確認してCommit→Push Origin」をすれば，GitHubに保存される．

ちなみに一度クローンしてしてGitHub Desktopにそのプロジェクトが登録されていたら，その後は「Fetch origin」もしくは「Pull origin」（GitHubのレポジトリに変更があった場合「Fetch origin」の場所に「Pull origin」と表示される）のみで同期される．「Pull Origin」と「Fetch Origin」は「GitHubサーバ上の変更を，現在作業中のコンピュータに落としてくる」ぐらいの意味で捉えておくと良い．

（正確にはPullは，GitHubのレポジトリの変更内容を取得して，現在自分が変更中の内容と統合する，の意味）

FinderやExploerで確認して，gitのデータベース「.gitattributes」や「README.md」が入っているプロジェクトフォルダがそのコンピュータの中にあるのに，GitHub Desktopに表示されない場合は，GitHub Desktopの「File」メニューから「Add a Local Repository」で，そのプロジェクトフォルダを追加してやれば良い．

南大沢のPC教室の場合は，別のコンピュータを使ったり，コンピュータ自体を再起動するとGitHub Desktopの設定が全部飛ぶので，授業の始まりの時に「Add a Local Repository」をして既存のプロジェクトフォルダをGitHub Desktopに追加し，「Pull origin」をする必要がある．

（もしくは授業ごとに全部消して，授業の始まりにcloneするとか）