初心者がGitHubでJavaScriptのコードを書き換えるまでにやったこと

笹澤さんのところでプログラミング開発の練習をさせていただいている、茨城大学の浅野です。

GitHubなどは全くの初心者であった自分が、GitHubでJavaScriptのコードを書き換えるまでに至った流れを書いておきます。

可能な限りGitHub初心者の人にも伝わる言葉で書くことを目標に頑張ります。

1. そもそもGitHubって何って話から

GitHub（ギットハブ）って何だろうというところから始めます。

GitHubとは...

「GitのHub」です。

怒らないでください。

でもこの認識結構大事みたいで、GitとGitHubってどうやら違うみたいなんです。

1.1. Gitとは「みんなで編集しやすいシステム」

仕切り直して、Gitって何だろうというところから始めます。

Gitとは「みんなで一つのファイルを編集しやすいようにしてくれるシステム」のことです。

ファイルでは説明しづらいので、みんなで小説を書くことを考えてみます。

1.2. 小説をみんなで書くことで考えるGit

Aさん、Bさん、Cさんの3人で一つの小説を書きあげることを考えます。

Aさんが導入の部分を書き上げたとします。

Aさんは「導入」と書かれた封筒に導入の原稿を入れておきました。

次の日にBさんが導入を少し書き直して、自分が書いた本文の原稿と一緒に封筒の中に入れておきました。Aさんが書いた導入は、Bさんによって書き直されてしまったので、もう読むことはできません。

Cさんがその封筒を見たとき、どう見えるでしょうか。

「Aさんが作った導入と書かれた封筒」の中に「Aさんが書き、Bさんが書き直した導入」と「Bさんが書いた本文」が入っていることは、なかなか伝わりにくいでしょう。

また、Aさんが書いた導入を復元することはBさんにしかできません。どこを書き換えたのかを知っているのはBさんだけだからです。

このような「集団で一つの文書を編集する」ことに対して、「誰が何をいつしたのか」を記録しつつ、取り組みやすくしてくれるのがGitという仕組みなのです。

1.3. GitHubとは

改めてGitHubとは何かというと...

GitのHubなわけです。

Hubは「ハブ空港」とか「ハブ配線」とかいうときのハブです。

ハブは中心地とか結節点とかの意味ですね。

いろんな人たちのGitが集まっているWebサービスが「GitHub」なわけです。

2. 開発環境を導入する

それでは早速GitHubを利用するときに使うものをインストールなどしていきます。

2.1. 使うもの

1.Node.js

Javascript プログラムを開発するのに必須なプログラムです。
https://nodejs.org/ja/

2.Git

ソースコードを管理するのに必要なプログラムです。先述したGitという仕組みを利用するのに必要なものです。
https://git-scm.com/

3.Visual Studio Code

ソースコードを書くエディタです。プログラミングを書く専用のメモ帳のようなものです。
https://code.visualstudio.com/

4.Sourcetree

必ず必要ではありませんが、2のGitはそのままでは使いにくいので、簡単に作業を行うためのソフトです。（個人的には必須。）
https://www.sourcetreeapp.com/

3. 実際にGitで作業する

さて、上記のソフトを用いてGitHubにあるJavaScriptのコードを書き換えてみたいと思います。

先に断っておくと、詳細な工程ではありません。あくまで「初心者がGitHubでJavaScriptのコードを書き換えるまでにやったこと」であることに注意です。

作業の手順

1.コードをGitHubから自分のパソコン内に複製する

①GitHubの「clone or download」のタブでURLをコピー
②コマンドプロンプトで「git clone -b develop ①のURL」と実行

これで自分のパソコン内に複製されます。

2.自分のパソコン内でコードを書き換えてみる

①Visual Studio Codeで先ほど複製したフォルダを開く
②フォルダ内のコードを書き換えてみる

これで自分のパソコン内のコードを書き換えました。

3.一時保存する

①Sourcetreeで自分のパソコン内のフォルダをAddする
→Addすると、変更が加えられたときに「やらないといけないリスト」みたいな感じでまとめてくれます。

4.変更した内容はどんな内容なのか記録する

①作業ツリーの中からインデックスに追加（＋ボタン）
②下の空欄に変更内容を書いて、コミットする

5.自分のパソコン内のコードでGitHubのコードを置き換える

①プッシュタブから、GitHubのコードを置き換える。

これで一連の流れは終わりです。

4. さいごに

書いてみると全然分かりやすく書けなかったです。(笑)

でもこうして詳しいことがわからなくても、JavaScriptのコードをGitHubというWebサービスを通じて書き換えることができると、「分からないことが分かるようになる」と思います。

それであれば、あとは調べたり勉強するだけです。

環境の導入など、最初の第一歩の手助けになれば幸いです。