1-7.gitでソースコードを管理する(GitHub)

今パートの目標
環境について
Gitのインストール
GitHubでリポジトリを作成する
developブランチを作成する
まとめ

今パートの目標

前回はDocker環境にNext.js✖️Typescriptのアプリケーションを作成しました。
今回は今まで作成したapiとfrontのソースコードをgit管理し、githubにプッシュしていこうと思います。

環境について

Next.js 14.2.3
Typescript 5
SpringBoot 3.2.0
java 17
git 2.43.0
macOS Sonoma 14.1.1
Docker Desktop 4.18.0

Gitのインストール

mac環境にGitのインストールをするにはHomeBrewを使用するのが簡単です。
以下が参考になります。

【MacOS】Homebrew経由でGitをインストールする方法 - 独学プログラマ

今回達成すること今回は、Gitのインストールとセットアップを行います。MacデフォルトのGitを確認するGitは、Macにデフォルトでインストールされています。スポットライト（Commandスペース）からターミナルを検索し開いてください。タ...

GitHubでリポジトリを作成する

GitHubのアカウントを持っていない人はまず、下記を参考にアカウントを作成します。

リポジトリを作成する

GitHubのアカウントにサインインすると下記のような画面となるため、右上の➕ボタンから「New repogitory」を選択します。

APIのソースコードをGit管理する

Repository nameだけ入力して「create repository」ボタンを押します。
※リポジトリを公開するかどうかは各自選択してください

リポジトリが作成され、次画面で下記のようなコマンドをローカルで実行するように求められます。

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/kuu18/share-favplace-api.git
git push -u origin main

一つずつ実行していきましょう

git init

share-favplace-api %　git init

コマンドを実行するフォルダ配下のファイルをgitで管理を始めるというコマンドです。
.gitという隠しフォルダが作られ、管理されていきます。

.gitignoreファイルを修正する

.gitignoreファイルとは、gitで管理したくないファイルを指定するファイルです。
リモートリポジトリにあげたくないファイルなどを記載します。

HELP.md
.gradle
build/
!gradle/wrapper/gradle-wrapper.jar
!**/src/main/**/build/
!**/src/test/**/build/
dbdata
pgadmin4
gradle

# Package Files #
*.jar
*.war
*.ear

### STS ###
.apt_generated
.classpath
.factorypath
.project
.settings
.springBeans
.sts4-cache
bin/
!**/src/main/**/bin/
!**/src/test/**/bin/

### IntelliJ IDEA ###
.idea
*.iws
*.iml
*.ipr
out/
!**/src/main/**/out/
!**/src/test/**/out/

### NetBeans ###
/nbproject/private/
/nbbuild/
/dist/
/nbdist/
/.nb-gradle/

### VS Code ###
.vscode/

# OS
Thumbs.db
.DS_Store

# Other
*.log
*.swp
*.bak
environment
*.env

git add

share-favplace-api %　git add -A

コマンドを実行するフォルダ配下のファイルをステージングするというコマンドです。
今回は初回のため、全てのファイルをリモートにプッシュしたいため「-A」というオプションを使用しています。

git add README.md

上記の場合、README.mdというファイルをステージングするというコマンドです。

git commit

git commit -m "first commit"

ステージングされたファイルを「first commit」というメッセージでコミットするというコマンドです。

git branch

git branch -M main

デフォルトブランチをmasterからmainに変更するといコマンドです。
これに関してはmasterのままでも問題ないですが以下のような理由があるそうです。

デフォルトのブランチ名がmasterからmainになった理由

git remote add

git remote add origin https://github.com/kuu18/share-favplace-api.git

リモートリポジトリを登録するコマンドです。

git push

git push -u origin main

コミットしたソースコードをリモートリポジトリにアップロードするコマンドです。

上記のようにリモートリポジトリで確認できるようになっていればアップロード完了です。

FrontのソースコードをGit管理する

基本的にはAPIの時と同じです。
Frontの.gitignoreは以下のようになります。

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local
*.env

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts

# other
.config
.npm

developブランチを作成する

ここまででGitHubにソースコードをPUSHできました。
最後にdevelopブランチを作成します。
現在はmainブランチのみができていますが、今後開発する際はdevelopブランチからさらにブランチを切って、改修機能ごとに新しいブランチを作成して開発を行ない、最終的にdevelop→mainにマージするような形で進めていきます。

GitHubのリポジトリページからAPI、Frontともにdevelopブランチを作成します。