【第2回Git準備編】基礎から学ぶJamstack構成のサイト開発

はじめに

こんにちは！Jamstack研究会の柴田です。

メンバーズではJamstackやヘッドレスCMSに取り組むエンジニアを増やすことを目的に「Jamstack研究会」が設立され、Jamstackの勉強会や研究を行っています。そこで得た知識をブログという形で広く共有することにしました。 この連載を通じて、Astro + microCMS + AWSを使用したJamstackなポータルサイトの開発手法を紹介していきます。

今回は第2回ということで、前回の記事では説明しきれなかったNode.jsのバージョン指定から、Gitでリモートリポジトリにプッシュする方法まで紹介していきます。

※前回の記事を読んでいない方は、「【第1回環境立ち上げ編】基礎から学ぶJamstack構成のサイト開発」をご覧ください。

前提

• 本開発ではVisual Studio Code（以下VSCode）を使用します。（他のエディターを使っていただいても問題ありません。）
• 開発にはmacOSを使用しています。（Windowsで実行する際に別途Windows用の手順が必要な場合があります。）
• シェルはzshを使用しています。

STEP1 Node.jsのバージョン指定

プロジェクトで使用するNode.jsのバージョンは固定することができます。
Node.jsのバージョンを固定することで、予期せぬ動作の変更や問題を防ぐことができ、またチームでの開発時に一貫性を確保することができるといったメリットがあります。
実際にNode.jsのバージョンを固定するには、package.json に以下のように記述します。

"engines": {
  "node": "20.15.0"
}

Copy

これで、バージョンの違うNode.jsを使用している場合にnpmコマンドを実行すると警告が出るようになります。

補足

Voltaを使用している場合、package.json に専用の記述を追加することでnpmコマンド実行時に自動で該当バージョンのNodeをインストールできます。

"volta": {
  "node": "20.15.0"
}

Copy

または以下のコマンドを実行することでも同様のことが行えます。

volta pin node@20.15.0

Copy

STEP2 Gitの導入

Gitはバージョン管理システムのことで、ソフトウェア開発プロジェクトでの変更履歴を記録し、複数の開発者が協力して作業するためのツールです。VSCodeにも標準でGitの管理ができるGUIが搭載されていますが、本記事ではターミナルを使用してGitコマンドを実行していきます。

Gitのリポジトリ作成からプッシュまでの流れ

リポジトリの作成からリポジトリへプッシュするには、以下のような流れになります。

1. リポジトリの作成
2. 変更のステージング（インデックスに追加）
3. コミット
4. リモートリポジトリにプッシュ

それでは、それぞれのステップの説明をしていきます

ローカルでリポジトリの作成

1.リポジトリの作成

まず、Gitリポジトリを作成するために、プロジェクトのディレクトリで以下のコマンドを実行します。

git init

Copy

Gitのバージョンが低い場合、デフォルトのブランチ名が master になっていることがあります。
今回使用するCodeCommitでは、デフォルトのブランチ名が main になっているため、デフォルトのブランチ名が master になっていた場合、ブランチ名を修正する必要があります。
ブランチ名をmasterからmainに修正するには以下のコマンドを実行します。

git branch -m main

Copy

2.変更のステージング（インデックスに追加）

変更したファイルをコミット対象としてマークするために以下のコマンドを実行します。

git add <ファイル名>

Copy

全ての変更したファイルをステージングするには、<ファイル名>の部分を「.」で表します。

git add .

Copy

現在のステータスを確認したい場合、以下のコマンドを実行します。

git status

Copy

このコマンドを実行することで次のステータスが確認できます

• git add したが、 git commit されていないファイルの一覧
• 変更があるが、まだ git add されていないファイルの一覧
• Git管理されていないもの（主に新規ファイル）の一覧

3.コミット

ステージングした変更をリポジトリに記録するには以下のコマンドを実行します。
-mオプションをつけることで、コミットにメッセージを付与することが可能です。

git commit -m "コミットメッセージ"

Copy

コミットメッセージを付けるときは、他のメンバーや自分が過去の更新を見返しやすくするために、例えばConventional Commitsを導入してメッセージを一定のフォーマットに統一することが効果的です。
この方法を用いると、「fix」や「feat」などのキーワードを用いて、変更内容をカテゴリーごとに整理することができ、プロジェクトの一貫性が保たれます。

コミットの履歴を確認したい場合は、以下のコマンドを実行すると履歴を確認することができます。

git log

Copy

リモートリポジトリの作成

今回はAWSのCodeCommitにて作業しますが、現在CodeCommitの新規利用の停止がアナウンスされています。※2024年8月7日時点 
そのため、本記事の内容が変更される可能性がありますことをご承知おきください。

1.AWS CodeCommitのリポジトリ画面へアクセス

2.リモートリポジトリの作成
リポジトリの作成ボタンを押します。

すると以下のように情報入力画面に遷移するので、任意のリポジトリ名を入力し、作成ボタンを押します。

ローカルリポジトリとリモートリポジトリの接続

1.リモートリポジトリを追加

ローカルのリポジトリに対してリモートリポジトリを追加します。
CodeCommit上で、作成したリポジトリの詳細画面に行き、URLのクローンから「HTTPSのクローン」を選択してリモートリポジトリのURLをコピーします。

次に、以下のコマンドを実行し、リモートリポジトリを追加します。
リモートリポジトリのURLには先ほどコピーしたCodeCommitのURLを貼り付けてください。

git remote add origin <リモートリポジトリのURL>

Copy

ここで、originとは、リモートリポジトリのアクセス先を指します。
デフォルトではoriginという名前になっています。

2.リモートリポジトリにプッシュ
ローカルリポジトリでコミットした変更をリモートリポジトリに反映させるために、以下のコマンドを実行します。

git push -u origin main

Copy

これで、リモートリポジトリに変更内容が反映されました。

次回予告

第2回目はここまでとなります。
今回はNode.jsのバージョン固定とGitの導入を行いました。Gitを導入することで、開発をより効率的に行うことができ、個人やチームでの開発に大きく貢献してくれるはずです。
Gitには、今回紹介した以外にも特定のバージョンまで巻き戻したり、他人が変更した内容を取り込んだりなど、便利な機能があります。

次回の第3回目は「ESLint, Prettierについて」です。
第3回目の記事も是非ご覧ください。