【新人プログラマ応援】ChatGPT「cssでカービィ描いてみた」【GitHub開発】

![スクリーンショット 2023-04-14 23.02.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387747/029815f6-ef90-8643-458f-48d22ce4f4c8.png)

![スクリーンショット 2023-04-13 19.32.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387747/7af175b6-00e0-7e7a-7c70-60dcc13f1d03.png)

**ファッ!?**

## カービィを修正しよう!!
というわけで、興味本位でChatGPTに有名なキャラクターを描いてもらったらどうなる?と思い立ち「cssでカービィを描けますか？」を質問してみたところ、上記のような**悲しきモンスター**が誕生してしまいました。

ですので今回は、このカービィを**修正プロジェクト**と見立てて、**雑に**GitHub開発フローを解説してみたいと思います。

この記事では、コマンドなどを網羅的に解説することはありません。
あくまで初学者向けに、Git開発の流れを、ふんわりと理解してほしいという趣旨の記事になります。

## 1.カービィのコードをGitHubから受け取る
GitHubにあるカービィのコードを、保存したいPCのフォルダで以下のコマンドを実行します。
実行すると、指定したフォルダにカービィのコードが現れます。
```
git clone https://github.com/koo-ke/GPT_kirby.git
```
![名称未設定ファイル (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387747/4ca311be-6424-9697-39b4-99e66ded659d.jpeg)

## 2.ローカルでブランチを切り替える
次に受け取ったカービィのフォルダにて、以下のコマンドを実行します。
ブランチを切ると言う作業です。
```
git checkout -b fix
```
![名称未設定ファイル (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387747/087e2de1-ba19-5665-264e-7fa15ea61818.jpeg)
## 3.カービィのコードを修正する
コードを修正します。いわゆるコードを書き書きする開発の部分です。
こんな感じで修正しました。
![スクリーンショット 2023-04-14 23.26.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387747/b2443247-22ab-8230-f9f1-4f607593d7c7.png)

![名称未設定ファイル (5).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387747/76005ed6-fb0e-c307-75d9-ae3788dc5894.jpeg)

## 4.git addする
修正が終わったらファイルをインデックスに送ります。
今は特に意味とかは考えなくて良いです。次の段階の準備とでも考えておいてください。
```
git add kirby.html
```
![名称未設定ファイル (3).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387747/d2a45b6b-9311-9bc3-9696-2c17e8fee5d1.jpeg)

## 5.git commitする
インデックスをローカルリポジトリに送ります。
この部分では、自分のコードを世に送り出す前の準備として、コメントをつけることができます。
どういう変更を行なったかという内容は詳しく書きましょう。
```
git commit -m '悲しきモンスターを、美しきモンスターに修正'
```
![名称未設定ファイル (4).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387747/401bebe1-52d8-0aca-8b6b-c71d2e00e06c.jpeg)


## 6.git pushする
いよいよ自分の修正を世に送り出します。
いろんな人が自分のコードを見れるようになります。
```
git push origin fix
```
![名称未設定ファイル (6).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387747/13ec0b11-43b2-9e6f-5457-3aa740857b2e.jpeg)



## 7.PullRequestする
流れを見てもらうとわかる通り、自分が送ったブランチと、元のブランチには**差分**が発生しています。
その差分を見比べて、どちらが良いかを管理者や他の人に判断してもらう行為を**PullRequest**と言います。
![名称未設定ファイル (7).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387747/6529a773-027d-d0a1-9ff9-5e96010d6b1c.jpeg)


## 8.mergeされる
差分を見比べて、元のブランチより、自分が送ったブランチの方が良いと判断されるとmerge（結合）されます。
自分の修正したファイルがmainブランチとなり、今後の参考ファイルとして扱われるようになります。
![名称未設定ファイル (8).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387747/274298ac-7b6b-c25a-747e-a7e721cc62ec.jpeg)

## 9.開発終了
mergeが完了した場合は、自身の修正したコードがmainブランチになります。
以下のコマンドでmainブランチを最新の状態にしましょう。
```
git checkout main
```
```
git pull origin main
```
ここまで来れば、再度修正を行いたいときは **2.ローカルでブランチを切り替える** からスタートして...の繰り返しになります。

## まとめ
いかがだったでしょうか？
僕は業務でGitHubは使用はしていませんが、こんな感じの流れでGit開発を行っています。
かなり色々省いて説明していますので、今後Gitを使った開発を行う場合は、様々な問題に直面すると思いますが、この流れを参考に以降は自分で調べてみてください。

## 補足
このカービィはGitHubにあげていますので、この記事を参考にPullRequestが出せると思うので試したい人はぜひ試してみてください。手足が欲しいなぁ。（ボソッ）

https://github.com/koo-ke/GPT_kirby