STEP 7 / 10

Git & GitHubで作品をセーブしよう💾

せっかく作ったコード、消えたら悲しいよね。Gitを使えば変更の歴史をセーブでき、GitHubに置けばどこからでも取り出せるし、人に見せることもできる。

💾 Gitってなに?

Gitは、ファイルの変更履歴を記録していく「バージョン管理システム」。ゲームのセーブポイントみたいに、「ここまでの変更」をコミット「ここまでの変更を確定してセーブする」という操作、またはそのセーブポイント自体のことだよ。という単位でどんどん記録していける。あとから「あのときの状態」に戻したり、「いつ・何を変えたか」を見返したりできるようになるよ。

まずはローカルでセーブしてみよう

プロジェクトのフォルダの中で、順番に実行していこう。

1

git init:Gitで管理しはじめる

プロジェクトのフォルダで実行すると、「ここから変更履歴を記録するよ」というリポジトリファイルの変更履歴をぜんぶ保存しておく、プロジェクトの入れ物のことだよ。が作られるよ。

ターミナル
$ git init
2

.gitignoreを作る

pnpm installで入れたパッケージがどっさり集まるnode_modulesフォルダのように、「セーブしなくていいもの」を指定しておくファイル。パッケージはpackage.jsonさえあればいつでも再インストールできるので、Gitに含める必要がないんだ。pnpmでプロジェクトを作ると、最初から.gitignoreが用意されていることが多いよ。なければ作っておこう。

.gitignore
node_modules
dist
3

git add:変更をステージにのせる

コミットする前の「準備」。どの変更をセーブに含めるか選ぶ作業だよ。

ターミナル
$ git status
 今の変更状況を確認
$ git add .
 変更ぜんぶをステージにのせる
4

git commit:セーブする

ステージにのせた変更を、メッセージつきで記録するよ。

ターミナル
$ git commit -m "自己紹介ページを作成"
コミットメッセージのコツ:「何を」「なぜ」変えたかが後で見てわかるように書こう。"更新"だけだと、あとで見返したときに何がなんだかわからなくなっちゃう。「ヘッダーのリンク切れを修正」のように具体的に書くのがおすすめだよ。
GitHubに置いてみよう

GitHubは、Gitのリポジトリをインターネット上に置いておける「みんなの本棚」。バックアップになるし、ほかの人に見せたり、いっしょに開発したりもできるようになるよ。かんきょう準備のページで入れたGitHub CLI(gh)を使っていこう。

5

gh auth login:GitHubにログインする

まだログインしていなければ、先に済ませておこう(くわしくはかんきょう準備のページを見てね)。

ターミナル
$ gh auth status
 ログイン済みか確認できる
6

gh repo create:リポジトリを作る

GitHub上に新しいリポジトリを作って、いまのフォルダとつなげるよ。

ターミナル
$ gh repo create my-first-page --public --source=. --remote=origin
my-first-pageの部分がリポジトリの名前になるよ。好きな名前に変えてOK。--public--privateにすると、自分だけが見られる非公開リポジトリになる。
7

git push:GitHubに送る

ローカルに貯めたコミットを、GitHub上のリポジトリに送信するよ。

ターミナル
$ git push -u origin main

これでGitHub上に自分のリポジトリができあがるよ。gh repo view --webでブラウザから見てみよう。

ブランチとPull Request

複数人で開発したり、実験的な変更を試したりするときは、ブランチ本編(main)とは別に、安心して試せる「分岐した作業ライン」のことだよ。を使うのが定番の流れだよ。

8

git switch -c:ブランチを作る

いまの状態から分岐して、新しい作業ラインを作るよ。

ターミナル
$ git switch -c feature/profile-card
 「feature/profile-card」という名前のブランチを作って移動
9

変更してコミットしたら、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でコミットしながら育てていったよ。特別なことはしていない、ここまで紹介してきた流れそのもの。今度はきみの番だよ。

準備ばんたん!🐤✨

これで、コードを書いて、セーブして、公開するところまでの一連の流れが身についたね。次は、いよいよTypeScriptに入っていこう。

TSを学びにいく →