Github and git チュートリアル
EngineではGithub（ギットハブ）をふんだんに利用して活動をしていきます。そして、そのためにはある程度Githubとgit(ギット)についての知識がなくてはいけません。 このページを読むことでGithubとgitについて簡単に知りましょう！
みなさんが今利用しているWebサイトはGithubというサイトで、このサイトは一言で表すと人々がソフトウェアを構築するための手段です。
Githubには様々な機能があります。その中の主な機能として以下の3つを紹介します。
- プログラムのソースコードをサーバーにアップロードし、他人と共同に編集したりすることができる。（gitプロバイダーとしての機能）
- 他の人のソースコードを修正したりして、世界中のソフトウェアをより良いものへとしていく。（OSSプラットフォーム）
- プログラミングに関わること以外についてでもタスクを整理したり、資料（まさに今見ているWiki）を作成したりと、組織管理としての機能
gitプロバイダーとは、ソースコードをサーバーにアップロードしたり、それをダウンロードしたり、他の人と共有できるようにしたりできるようにする機能を提供するサービスのことです。
有名どころでは Github以外に
があります。これらはどれも前述のgitプロバイダーとしての機能を持っています。感覚的にはGoogleドキュメントのプログラミング版だと思っていただいても差し支えないかと思います。
OSS(オーエスエス)とはオープンソースソフトウェア(Open Source Software)の略でプログラムのソースコードを公開していることを表します。また、中には世界中のコントリビューター（協力者）にプログラムのバグ報告や修正プログラムなどを出してもらって管理されているものもあります。EngineでもPython版Linebotにコントリビュートしたことがあります。OSSのプラットフォームはgitプロバイダーであれば兼ね合わせていることが多いです。
Githubには組織管理機能があり、Engineはまさにその組織となっています。組織の中でも様々なことができますが、知っておいて欲しいこととして、組織内にチームを作ることができます。Engineのチームとは違いますが、Engineのチームと対応しているものもあるはずです。
具体的には@ycu-engine/coreのようにするとcoreチームに所属しているチームのことを示すことができます。オリエンテーションで説明した質問の作成の仕方でも関係者に@ycu-engine/coreがあったはずです。@ycu-engine/coreにはEngineの中でのプログラムリーダー的な人が所属していて、受け取った質問を適切な人に割り振ったりするための役割などを持っています。
そのほかにもいろいろ機能はありますが、今回はここまででいいでしょう。
gitとはソースコードなどの変更履歴などを管理するバージョニングソフトウェアです。つまり、いつどこで誰が何をどのように変更したのかというのを記録・管理してくれます。これによって複数人で共同に開発することが容易になります。
gitにはリモートとローカルの2つの世界が存在しています。リモートとはGithubのようなサーバー上のソースコードのことで、ローカルとはあなたのPCの中にあるソースコードのことです。リモートのソースコードをローカルにダウンロード（pull）したり、ローカルのソースコードをリモートに（push）したりすることができるようになります。
それでは実際にリモートにあるソースコードをpullして、そのファイルを編集した後にリモートへpushしてみましょう！
今回編集するのはEngineの公式HPです。ここにあなたの情報を反映させましょう。
Githubでgitを利用するには主に2通りの方法があります。
-
Github Desktopを利用して視覚的にgitの操作をする - gitコマンドを入手してターミナル（黒い画面）からgitの操作をする
2の方法は追加のアプリなどが不要で中級者〜上級者以上は主に2の方法を使いますが、初心者が使うには少し難しいのではじめのうちは1のGithub Desktopを利用することをお勧めします。
以下のURLからGithub Desktopを入手してください！
まだGithubのアカウントを持っていない場合は、以下のURLからGithubのアカウントを作成してください！Githubは社会に出た後も利用するサービスになる場合がほとんどなので、メールアドレスは学校メールではなく個人メールがお勧めです。
アカウントが作成できた場合は、「自分のアカウント名」と共にSlackで管理者に連絡してください。 Engineへの招待を送ります！
プログラムは普通のメモ帳などでも書くことができますが、プログラムを書くための専用のエディターを使うことをお勧めします。
エディターは色々なものがありますが、EngineではVisual Studeio Code(略してVSCode)の利用を推奨しています。ほかに好きなエディターがある場合は構いませんが、理由がない場合はVSCodeを利用するといいでしょう。
EngienのHPのソースコードは https://github.com/ycu-engine/ycu-engine.github.io にあります。EngineのHPはGatsbyjsというJavaScriptのフレームワークで作成されており、細部を変更するにはJavaScriptの知識が必要です。今回は自分の情報を追加するだけなので、手順通りに行えば問題ありません。
メンバーの情報がある場所は、src > data > members.tsというファイルです。このファイルをみると他のメンバーの情報があることがわかるでしょう。今回はここに自分の情報を付け足します。
Node.jsとは、JavaScriptという言語をパソコンで動作させるためのソフトウェアです。インストールについてはProgateのインストール方法がわかりやすいのでそれを参考にしてみてください。
手順通りにして、Node.jsがPCにインストールされた後はyarnというソフトウェアを入手します。EngineのHPはyarnというツールを利用しています。
ターミナル or コマンドプロンプトで以下を実行してください。
npm install -g yarnその後
yarn -vとして1.22.10などと表示されれば問題ありません。
あれ、さっきはリモートのソースコードをローカルにダウンロードすることをpullって言わなかったっけ？と思った君、正解です。正解なんですが、一番初めにソースコードをダウンロードするときはそっくりそのままcloneするという意味で、最初はcloneという動作を行います。
準備段階でインストールしたGithub Desktopを開いてください。
以下の画像のようにするとcloneすることができます。URLにはhttps://github.com/ycu-engine/ycu-engine.github.ioを入力してください。
gitにはbranch(ブランチ)という概念があります。
branchはそれぞれの作業を同じ別の軸として切り離して、作業が完了したりした段階で元の軸に合わせることを可能にすることができます。こうすることで、それぞれが同時にソースコードを変更しても他の人に上書きされるといったことをなくすことができるようになります。
Github Desktopを使うと簡単にbranchを作成することができます。したの画像の指示に従って、branch名を入力する箇所にはfeature/add-member-<自分の名前>としてください。
create branchを押せばbranchが作成され、自動的にそのbranchに切り替わります。
その後したの画像の通り、Open in Visiaul Studio Codeを押すことでエディターが開きます
するとVisual Studio Codeが開くので、画像のようにターミナルを開いてyarnと入力し実行してください。
すると、自動でインストールが進むのでそのまましばらく待ちましょう。
src/data/member.tsを開いてください。
Engineのサイトでは名前の不適切な名前をできないようにメンバーの名前一覧とメンバーの情報は分けて保存されています。まずは、自分の名前を名前一覧に追加しましょう！
次はメンバー一覧に自分の名前を含めその他の情報なども加えましょう。ファイル下部のmembersという場所に自分の情報を付け加えてください。
また、画像の内容以外にもTwitterやGithubなどのソーシャルアカウントの紐付けや、自己申告で自身のスキルセットを書いたりすることができます。具体的にどうゆう情報を加えられるかについては、export interface Member {で始まる箇所を確認してみてください。
ここまでできたらファイルを保存しましょう。
- MacOSの方は
⌘ + S - Windowsの方は
Ctrl + S - もしくは、下の画像のようにやっても構いません。
ここまでの変更をgitの変更履歴に追加しましょう。gitの変更履歴に追加することをcommit（コミット）するといいます。Github Desktopを開いてください。
pushが完了すると、Create Pull Requestというボタンに変わるので、ボタンを押してPullRequest（プルリクエスト、PRと略されることもある）を作成する。
Pull Requestとは、自分が新しいブランチで行った変更を元のブランチに取り込んでもらうための依頼のことです。EngineのHPではPull Requestを送ったあとに変更内容についてレビューしてもらう必要があります。レビューすることで既存のHPが壊れてしまうことをできる限り防ぐことができます。
ボタンを押すと、ブラウザが立ち上がるので画像のように適宜変更してください。
レビューしてもらうまでしばし待ちましょう。
レビューでOKをもらった後はmerge(マージ)しましょう！mergeとは変更内容をもとのソースコードに取り込むことです。
今回のGithubとgitを利用した流れはその他のプロジェクトについても同様なので、是非覚えていってください！
今後自身の情報を変更したい場合は今回と同じ手順で自分の情報を書き換えてPull Requestを作成しましょう！