gitignoreで特定ファイルをGitで無視する方法

Gitを使っていると、Gitでは監視したくないファイルが出てきます。今回はそんな時に使える.gitignoreの設定についてまとめておきます。
.gitignoreとは?
.gitignoreを使うと、Gitで監視しない(無視する)ファイルやフォルダを指定できます。
しかし、.gitignoreは不可視ファイル(ドットから始まるファイル)なのでデフォルトでは表示されません。表示するためには、Finderでcommand + shift + .を押せば表示・非表示の切り替えができます。
基本的に.gitignoreを作成する場所は「.git」フォルダがあるのと同じ階層です(深い階層に作った場合は、より深い階層にある方が優先される)。
.gitignoreの書き方
Gitで監視しないファイルやフォルダを1行ずつ書いていき、上の行から順番に解釈されていきます。
ファイル名を指定して無視
.gitignoreにファイル名やフォルダ名を書くと、階層関係なく、マッチする名前のファイルを無視できます。
.gitignore
style.css階層からファイル名を指定して無視
先頭に「/(スラッシュ)」を付けると、.gitignoreが置かれてあるディレクトリを基準としてファイルの無視ができます。
.gitignore
/style.cssフォルダ内の全てのファイルを無視
末尾に「/(スラッシュ)」を付けると、フォルダとその配下を無視するようになります。
.gitignore
directory/コメント
コメントを書く時は、「#(ハッシュ記号)」を最初に付けるとコメントになります。
.gitignore
# コメントワイルドカード
ワイルドカードという特別な意味を持つ記号を使用する事で、更に楽にファイルの指定ができます。
| 記号 | 意味 |
|---|---|
| * | /以外の全ての文字列にマッチする |
| ? | /以外の1文字の文字列にマッチする |
| [0-9] | 0〜9の数字にマッチする |
| ! | 否定の意味。逆に無視しないという意味になる |
.gitignore
# .pngを無視する
*.png
# file-aやfile-bなどを無視する
file-?
# file-0からfile-9を無視する
file-[0-9]
# fileを無視しない
!/file

resizeイベントを使用する場合は、iOS Safariでの挙動に注意
CSS疑似要素の「:empty」でタグの中身が空のときのスタイルを設定する
Visual Studio Codeのマルチカーソル機能で文字操作を一括で行う
Visual Studio Codeを使ったコード整形方法(Fomatter)
WordPress5.5のサイトマップ機能を無効にする
コーディング時にちゃんと意識したい複数語の連結方法一覧(キャメルケース・スネークケース・ケバブケース)
サイトのPocketに保存された回数や、あとで読まれた回数まで解析できるPocketのパブリッシャーツールの登録方法
Visual Studio CodeをMarkdownエディターとして使用する
Nuxt.jsでコンポーネントを作成してコードの共通化を行う|Nuxt.jsの基本
WordPressで「現在メンテナンス中のため、しばらくの間ご利用いただけません。」の状態でログインできなくなった場合の対処法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
時間に合わせてディスプレイの色温度を調節してくれるアプリ「f.lux」の導入方法
Workspacesの検索ウインドウで使えるコマンド一覧
コーディングで「スペース」と「タブ」のどちらを使えばいいのか?
Path Finder 8の「パスのコピー」の種類とその違いについて
CSSで1行で簡単にスムーススクロールを実装できる「scroll-behavior」プロパティ
売れるウェブサイトは戦略を映している【CSS Nite in Kobe】
CSS Nite in Kobe, vol.53「XDで作るワイヤーフレーム・プロトタイプとサイト制作時のコミュニケーション」に参加してきました
Google日本語入力の基本的な設定項目
Figmaで文字色と背景色のコントラスト比をチェックするプラグイン「Contrast」
ブラウザ × Keyboard Maestroでちょっとした操作をラクにするマクロサンプル