Git & GitHubで作品をセーブしよう💾
せっかく作ったコード、消えたら悲しいよね。Gitを使えば変更の歴史をセーブでき、GitHubに置けばどこからでも取り出せるし、人に見せることもできる。
💾 Gitってなに?
Gitは、ファイルの変更履歴を記録していく「バージョン管理システム」。ゲームのセーブポイントみたいに、「ここまでの変更」をコミット「ここまでの変更を確定してセーブする」という操作、またはそのセーブポイント自体のことだよ。という単位でどんどん記録していける。あとから「あのときの状態」に戻したり、「いつ・何を変えたか」を見返したりできるようになるよ。
プロジェクトのフォルダの中で、順番に実行していこう。
git init:Gitで管理しはじめる
プロジェクトのフォルダで実行すると、「ここから変更履歴を記録するよ」というリポジトリファイルの変更履歴をぜんぶ保存しておく、プロジェクトの入れ物のことだよ。が作られるよ。
$ git init
.gitignoreを作る
pnpm installで入れたパッケージがどっさり集まるnode_modulesフォルダのように、「セーブしなくていいもの」を指定しておくファイル。パッケージはpackage.jsonさえあればいつでも再インストールできるので、Gitに含める必要がないんだ。pnpmでプロジェクトを作ると、最初から.gitignoreが用意されていることが多いよ。なければ作っておこう。
node_modules dist
git add:変更をステージにのせる
コミットする前の「準備」。どの変更をセーブに含めるか選ぶ作業だよ。
$ git status 今の変更状況を確認 $ git add . 変更ぜんぶをステージにのせる
git commit:セーブする
ステージにのせた変更を、メッセージつきで記録するよ。
$ git commit -m "自己紹介ページを作成"
"更新"だけだと、あとで見返したときに何がなんだかわからなくなっちゃう。「ヘッダーのリンク切れを修正」のように具体的に書くのがおすすめだよ。
GitHubは、Gitのリポジトリをインターネット上に置いておける「みんなの本棚」。バックアップになるし、ほかの人に見せたり、いっしょに開発したりもできるようになるよ。かんきょう準備のページで入れたGitHub CLI(gh)を使っていこう。
gh auth login:GitHubにログインする
まだログインしていなければ、先に済ませておこう(くわしくはかんきょう準備のページを見てね)。
$ gh auth status ログイン済みか確認できる
gh repo create:リポジトリを作る
GitHub上に新しいリポジトリを作って、いまのフォルダとつなげるよ。
$ gh repo create my-first-page --public --source=. --remote=origin
my-first-pageの部分がリポジトリの名前になるよ。好きな名前に変えてOK。--publicを--privateにすると、自分だけが見られる非公開リポジトリになる。
git push:GitHubに送る
ローカルに貯めたコミットを、GitHub上のリポジトリに送信するよ。
$ git push -u origin main
これでGitHub上に自分のリポジトリができあがるよ。gh repo view --webでブラウザから見てみよう。
複数人で開発したり、実験的な変更を試したりするときは、ブランチ本編(main)とは別に、安心して試せる「分岐した作業ライン」のことだよ。を使うのが定番の流れだよ。
git switch -c:ブランチを作る
いまの状態から分岐して、新しい作業ラインを作るよ。
$ git switch -c feature/profile-card 「feature/profile-card」という名前のブランチを作って移動
変更してコミットしたら、pushしてPRを作る
ブランチの上で作業してコミットしたら、そのブランチをGitHubに送って、プルリクエスト「この変更を取り込んでください」とお願いする、GitHub上のレビューつきの提案のことだよ。略してPR。(PR)を作るよ。
$ git add . $ git commit -m "プロフィールカードを追加" $ git push -u origin feature/profile-card $ gh pr create --fill
gh pr create --fillを実行すると、コミットメッセージをもとにPRのタイトルと説明文を自動で用意して、GitHub上にPRを作ってくれるよ。
$ gh pr view --web 作ったPRをブラウザで開いて確認
🐤 このサイトも同じ流れで作られたよ
「ひよこーど」自身も、pnpmでプロジェクトを作り、ファイルを書き、Gitでコミットしながら育てていったよ。特別なことはしていない、ここまで紹介してきた流れそのもの。今度はきみの番だよ。