2
1

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-04-14

スクリーンショット 2023-04-14 23.02.32.png

スクリーンショット 2023-04-13 19.32.01.png

ファッ!?

カービィを修正しよう!!

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

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

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

1.カービィのコードをGitHubから受け取る

GitHubにあるカービィのコードを、保存したいPCのフォルダで以下のコマンドを実行します。
実行すると、指定したフォルダにカービィのコードが現れます。

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

名称未設定ファイル (1).jpg

2.ローカルでブランチを切り替える

次に受け取ったカービィのフォルダにて、以下のコマンドを実行します。
ブランチを切ると言う作業です。

git checkout -b fix

名称未設定ファイル (2).jpg

3.カービィのコードを修正する

コードを修正します。いわゆるコードを書き書きする開発の部分です。
こんな感じで修正しました。
スクリーンショット 2023-04-14 23.26.54.png

名称未設定ファイル (5).jpg

4.git addする

修正が終わったらファイルをインデックスに送ります。
今は特に意味とかは考えなくて良いです。次の段階の準備とでも考えておいてください。

git add kirby.html

名称未設定ファイル (3).jpg

5.git commitする

インデックスをローカルリポジトリに送ります。
この部分では、自分のコードを世に送り出す前の準備として、コメントをつけることができます。
どういう変更を行なったかという内容は詳しく書きましょう。

git commit -m '悲しきモンスターを、美しきモンスターに修正'

名称未設定ファイル (4).jpg

6.git pushする

いよいよ自分の修正を世に送り出します。
いろんな人が自分のコードを見れるようになります。

git push origin fix

名称未設定ファイル (6).jpg

7.PullRequestする

流れを見てもらうとわかる通り、自分が送ったブランチと、元のブランチには差分が発生しています。
その差分を見比べて、どちらが良いかを管理者や他の人に判断してもらう行為をPullRequestと言います。
名称未設定ファイル (7).jpg

8.mergeされる

差分を見比べて、元のブランチより、自分が送ったブランチの方が良いと判断されるとmerge(結合)されます。
自分の修正したファイルがmainブランチとなり、今後の参考ファイルとして扱われるようになります。
名称未設定ファイル (8).jpg

9.開発終了

mergeが完了した場合は、自身の修正したコードがmainブランチになります。
以下のコマンドでmainブランチを最新の状態にしましょう。

git checkout main
git pull origin main

ここまで来れば、再度修正を行いたいときは 2.ローカルでブランチを切り替える からスタートして...の繰り返しになります。

まとめ

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

補足

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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1