まずは開発するフォルダを作ります。今回は「portfolio」というフォルダでプロジェクトを管理するとして作っていきます。
使用するエディタはVisualStudioCodeです。
フォルダの作成ができたらCLIで該当箇所に移動します。私はMacを使用しているのでCLIはターミナルになります。
ターミナルからcdでフォルダへ移動します。
ローカルリポジトリを作成する
下記のコマンドでローカルリポジトリを作成できます。
git initこれで作成ができました。初期の設定ではこのコマンドによってmasterというブランチが作られます。
なお、Macではターミナル上に「hint」という一覧が表示されますが、特に何か操作をする必要はありません。
ディレクトリ内を確認するとgitファイルが作成されているのが確認できます。
ls -aローカルリポジトリの状態の確認
下記のコマンドで現在の状態を確認することができます。
git status初期状態では次のように表示され、コミットがされていないこととuntracked(まだファイルを追跡されてない)状態であることがわかります。
//ターミナルでの表示
On branch master
No commits yet
Untracked files:
(use "git add <file>..." to include in what will be committed)
.eslintrc.cjs
.gitignore
README.md
index.html
package-lock.json
package.json
public/
src/
tsconfig.app.json
tsconfig.json
tsconfig.node.json
vite.config.ts
nothing added to commit but untracked files present (use "git add" to track)ステージングエリアへの登録
ステージングはまだ仮登録のような状態です。コミットまでしないと作業状態のデータは残ってないので注意すること。
ステージングへの登録方法は下記のものがあります。
//ファイル一つを登録
git add index.html
//現在のディレクトリ配下のすべてのファイルを追加
git add .
//「subFolder」ディレクトリの全てのファイルを追加
git add subFolder
//「subFolder」ディレクトリの「index.html」ファイルを追加
git add subFolder/index.htmlgit add .は作業ディレクトリ内のすべての変更をインデックスに追加します。更新されていないもの（変更がないファイル）はステージングされません。変更したものだけを全てアップしたい場合はこれを使うといいですね。
ステージングに登録してstatusを確認するとターミナル上で以下のように表示がされます。
On branch master
No commits yet
Changes to be committed:
(use "git rm --cached <file>..." to unstage)
new file: .eslintrc.cjs
new file: .gitignore
new file: README.md
new file: index.html
new file: package-lock.json
new file: package.json
new file: public/vite.svg
new file: src/App.css
new file: src/App.tsx
new file: src/assets/react.svg
new file: src/index.css
new file: src/main.tsx
new file: src/vite-env.d.ts
new file: tsconfig.app.json
new file: tsconfig.json
new file: tsconfig.node.json
new file: vite.config.tsファイルをコミットする
ステージングにあげたファイルをコミットします。
「ステージング → コミット」この流れで作業した内容が登録されます。コミットのコマンドは下記です。
git commitするとVisual Studio Codeで自動的に下記のような表示がされます。
# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# On branch master
#
# Initial commit
#
# Changes to be committed:
# new file: .eslintrc.cjs
# new file: .gitignore
# new file: README.md
# new file: index.html
# new file: package-lock.json
# new file: package.json
# new file: public/vite.svg
# new file: src/App.css
# new file: src/App.tsx
# new file: src/assets/react.svg
# new file: src/index.css
# new file: src/main.tsx
# new file: src/vite-env.d.ts
# new file: tsconfig.app.json
# new file: tsconfig.json
# new file: tsconfig.node.json
# new file: vite.config.ts
#
そしたら1行目にコミットの要約をつけましょう。「ナビゲーションを作成した」「APIからデータを取得して表示できるようにした」など作成した機能ごとにタイトルをつけます。
1行目に作業内容のタイトル
2行目は空白
3行目以降は詳細を書くという感じです。
ReactのVite開発環境の構築
ReactをViteで開発したかったため作成しました。
# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# On branch master
#
# Initial commit
#
# Changes to be committed:
# new file: .eslintrc.cjs
# new file: .gitignore
# new file: README.md
# new file: index.html
# new file: package-lock.json
# new file: package.json
# new file: public/vite.svg
# new file: src/App.css
# new file: src/App.tsx
# new file: src/assets/react.svg
# new file: src/index.css
# new file: src/main.tsx
# new file: src/vite-env.d.ts
# new file: tsconfig.app.json
# new file: tsconfig.json
# new file: tsconfig.node.json
# new file: vite.config.ts
#Visual Studio Codeで表示されていたファイルを閉じるとターミナル上でも下記のように表示がされます。
[master (root-commit) 6ff40cc] ReactのVite開発環境の構築
17 files changed, 3584 insertions(+)
create mode 100644 .eslintrc.cjs
create mode 100644 .gitignore
create mode 100644 README.md
create mode 100644 index.html
create mode 100644 package-lock.json
create mode 100644 package.json
create mode 100644 public/vite.svg
create mode 100644 src/App.css
create mode 100644 src/App.tsx
create mode 100644 src/assets/react.svg
create mode 100644 src/index.css
create mode 100644 src/main.tsx
create mode 100644 src/vite-env.d.ts
create mode 100644 tsconfig.app.json
create mode 100644 tsconfig.json
create mode 100644 tsconfig.node.json
create mode 100644 vite.config.tsstatusを確認するとステージングエリアにあったファイル一覧がなくなりました。コミットが完了しました。
On branch master
nothing to commit, working tree clean過去の作業履歴を確認するには(コミット履歴の確認)
git logコマンドをすることで確認できます
git logするとこのように表示がされます。コミットした時のタイトルとその詳細が表示されます。
commit 6ff40cc93fbafd22c24e24d7d37df3dbbae47016 (HEAD -> master)
Author: HalRockShop <abcdefg1234@gmail.com>
Date: Wed Jul 10 08:05:34 2024 +0900
ReactのVite開発環境の構築
ReactをViteで開発したかったため作成しました。