[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するとか)