.gitignoreに含めたいファイルをpushしていたら反映されない

## はじめに
あまり遭遇しない状況だったので知りませんでした。気になった方は読んでみてください。

## 状況
1.&nbsp;「.env.development.local」ファイルを間違ってpushしてしまっていた:scream:

2.&nbsp;githubのリポジトリから削除する前に、「.gitignore」ファイルに「.env.development.local」ファイルを追加しておこう:expressionless:
<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769195/71ab6dc2-3fd5-ca77-5cbf-f0189cdf7f2e.png">


3.&nbsp;うーん、パスは正しいはずなのに、エクスプローラーに反映されない...:disappointed_relieved:
<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769195/3555cfff-614e-5bd9-5ce4-9b3a3ccbda7f.png">
↑反映されたら.envと同じようにグレーアウト（文字が薄く）なるはずが反映されていない

## 反映されない理由
:::note warn
すでにGitに追跡されている。
:::

既にGitにコミットされている場合、.gitignore に追加してもそのファイルは引き続き Git によって追跡されてしまうから。

#### .gitignore ファイルについて
>Git が無視する、意図的に追跡されていないファイルを指定します。Git によってすでに追跡されているファイルは影響を受けません。
[Git - gitignore Documentation](https://git-scm.com/docs/gitignore)  より

:::note info
「.gitignore」ファイルによって、Git に対して特定のファイルやディレクトリを追跡対象から除外するように指示することで、**新たに追加されたファイルやディレクトリがGitの管理対象から外れるようになる。**
:::

:::note info
「.gitignore」ファイルに追加したファイルが**すでにコミットされている場合、それらのファイルはリポジトリ内に残る。**
:::

:warning:<font color="red"> **「.gitignore」ファイルに追記してコミット、pushしても、すでにコミットしているファイルはリポジトリ内に残る。**<font>

## 解決方法
手順 1. Gitの追跡を外す。
手順 2. コミットする。
手順 3. pushする。
手順 4. 「.gitignore」ファイルに記述する。

---
#### 手順 1. Gitの追跡を外す。
```
git rm --cached .env.development.local
```

:writing_hand: ファイル自体が削除されるわけではなく、ローカルにファイルは残る。

#### 手順 2. コミットする。
```
git commit -m "remove .env.development.local from git tracking"
```

:writing_hand: 追跡から外すので、追跡から外したファイルの git add は不要。
:writing_hand: git rm コマンドを使用すると削除の変更が自動的にステージングエリアに追加される。


#### 手順 3. pushする。
```
git push origin （ブランチ名）
```
:writing_hand: githubのリポジトリから、「.env.development.local」が消える。

#### 手順 4. 「.gitignore」ファイルに記述する。
↓「.gitignore」ファイルに「.env.development.local」を加えて、保存すると反映された。
![reflected_file.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769195/88f6ec09-2a6e-2e5d-5ef7-fe34e4937d21.png)
今後、「.env.development.local」はGitに追跡されず、リポジトリにも残らない。

## 解決方法　補足
**■ echo '（ファイル名）' >> .gitignore** で直接書き込む場合 :arrow_down:
```
git rm --cached （ファイル名）
echo '（ファイル名）' >> .gitignore
git add .gitignore
git commit -m "コミットメッセージ"
git push origin (ブランチ名)
最後「.gitignore」ファイルを保存
```
* git rm --cached （ファイル名）したら、ステータスが「U」(untracked)になる。
* echo '（ファイル名）' >> .gitignore　で、直接「.gitignore」ファイルに書き込む。
* git add .gitignoreで、 「.gitignore」ファイルのステータスがM(Modified)になり、追跡したくないファイルのステータスがD（Deleted）になる。
* 最後「.gitignore」ファイルを保存したら、反映される。

**■ echo '（ディレクトリ名）/' >> .gitignore** で直接書き込む場合 :arrow_down:

:::note info
git-rmコマンドで作業ツリーとインデックスからディレクトリを削除する場合、
<font color="red">-rオプションが必要。</font>


:::
-rオプションは、ディレクトリとその中に含まれるすべてのファイルおよびサブディレクトリを再帰的に処理するために使用される。

```
git rm --cached -r（ディレクトリ名）
echo '（ディレクトリ名）/' >> .gitignore
git add .gitignore
git commit -m "コミットメッセージ"
git push origin (ブランチ名)
最後「.gitignore」ファイルを保存
```
ちなみに、
--cachedもオプションのため、「-r」と「--cached」の並びは、
git rm --cached -r（ディレクトリ名）
git rm -r --cached（ディレクトリ名）
どちらでも処理できる。

> git-rm - 作業ツリーとインデックスからファイルを削除する

> git rm [-f | --force] [-n] [-r] [--cached] [--ignore-unmatch]
	  [--quiet] [--pathspec-from-file=<ファイル> [--pathspec-file-nul]]
	  [--] [<パス仕様>…​]

[Git - git-rm Documentation](https://git-scm.com/docs/git-rm)より

## <余談 その１> 「.gitignore」ファイルの書き方
以下、エクスプローラーの並びと「.gitignore」ファイルを見比べてください:eyes:

:black_medium_small_square:**エクスプローラーのフォルダの並び**
<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769195/1dee5367-af45-6491-ea87-d8828bb94893.png">
:black_medium_small_square:**「.gitignore」ファイル**
<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769195/71ab6dc2-3fd5-ca77-5cbf-f0189cdf7f2e.png">

「node_modules」「.vercel」「.next」はディレクトリです。
「node_modules」だけ「/」の記述がありません。

:::note info
**node_modules/ と書くと、**
"ディレクトリ「node_modules」を指定して、そのディレクトリとその中のすべてのファイルを無視してください。
の意味になる。"
→**ディレクトリを無視したい時の書き方**
:::
:::note info
**node_modules と書くと、**
"ファイルやディレクトリに関係なく、「node_modules」という名前のすべてのファイルとディレクトリを無視してください。"
の意味になる。
:::

ですので、「.gitignore」ファイルへの正しい書き方は以下になります。
```
node_modules/
```
## <余談 その２> 改行とコメントも直接入力したい場合

通常、ファイルの最後はこんな感じ。
<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769195/25fbf413-7ee3-7b58-3494-f8e5acf2e415.png">

そのため、何も考えず以下を打ち込むと、
```
echo 'public/' >> .gitignore
```
<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769195/805ea9cb-897a-38c5-7246-21ddf3341f21.png">

こんなつもりではなかった...:disappointed_relieved:　となるので、
改行とコメントも入力したい場合、
```
echo '' >> .gitignore
echo '# public' >> .gitignore
echo 'public/' >> .gitignore
```
<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769195/32c45c3a-41b4-b0c9-c914-9b8f102398be.png">

という事で、改行とコメントも直接入力したい場合は以下を使いましょう:writing_hand:
```
echo '' >> .gitignore
echo '# （コメント）' >> .gitignore
echo '（ファイル名) or (ディレクトリ名)/'  >> .gitignore
```
## 参考
[Git - gitignore Documentation](https://git-scm.com/docs/gitignore) 
[Git - git-rm Documentation](https://git-scm.com/docs/git-rm)
[【Git】.gitignoreが反映されない時の対応備忘録 - 株式会社GOAT](https://goat-inc.co.jp/blog/2634/)
[Gitignoreが動作しない時の対処法｜Kinsta®](https://kinsta.com/jp/knowledgebase/gitignore-not-working/)
[gitignore/Node.gitignore at main · github/gitignore](https://github.com/github/gitignore/blob/main/Node.gitignore)