WebDesigner's Memorandumウェブデザイナーの備忘録

.gitignoreに含めた方がいいファイル・フォルダが一覧でまとまっている「gitignore.io」

.gitignoreに含めた方がいいファイル・フォルダが一覧でまとまっている「gitignore.io」

Gitを使っていると、ファイル変更の管理には含めたくないファイルが出てきます。
よくある例でいくと、下記のようなファイル・フォルダです。

  • Node.jsのnode_modulesフォルダ
    • 中のフォルダ数が大量で、数千ファイルをGit上で管理することになってしまう
    • package.jsonを共有して、npm installをすれば全員同じnode_modulesが生成されるので管理する必要がない
  • ビルド後のdistフォルダ
    • 管理してしまうと、余計なコンフリクトの原因になってしまう
    • ビルドすれば同じ結果になるので、管理する必要がない

こうしたファイル変更の管理に含めたくないファイル・フォルダは.gitignoreというファイルに入力しておくと、無視するようになってくれます。

サイトから利用する

gitignore.io

gitignore.ioにアクセスすると、ページ中央に検索ボックスがあるので、ここに言語やフレームワークなどのキーワードを入力して「作成する(Generate)」ボタンを押せば、そのプロジェクトで.gitignoreに入れておいた方がいいファイルがリストアップされます。

.gitignoreの結果

あとはコピペで.gitignoreに追加すればOKです。

ターミナルから利用する

コマンドラインツールが用意されているので、インストールすればターミナルでコマンドを入力してそのまま.gitignoreを生成してくれたりもします。

ドキュメントページを見てコマンドを実行すればインストールできます。
例えば、macOSのZshの場合は下記コマンドを実行するだけです。

echo "function gi() { curl -sLw "\n" https://www.toptal.com/developers/gitignore/api/\$@ ;}" >> \
~/.zshrc && source ~/.zshrc

これで、ターミナル上で「gi」コマンドが使えるようになります。

使い方は追加したいディレクトリに移動して、giの後にキーワードを入力して、最後に「>> .gitignore」を入力するだけです。
(複数キーワードの場合は,(カンマ)で区切る)

gi Vue,Nuxtjs >> .gitignore

ちなみにgi Vue,Nuxtjsだけだと、ターミナル上に.gitignoreに追加した方がいいファイルがリストアップされるだけです(ブラウザでの表示と同じで、.gitignoreは生成されない)。

「>> .gitignore」を入力しなかった場合の結果

ちなみに、入力できるキーワードの一覧を見たい場合はlistを使用します。

gi list

gi listの結果

これですべてのキーワードが表示されます。

gitignore.ioは「とりあえずこれを設定しておけばOK」という設定をすぐ生成できるので、はじめてのプロジェクトにはもってこいです。

また、なんの言語・フレームワークを使うときにどんな設定をしていたか、わざわざ覚えておく必要や抜け漏れの心配もなくなります。
逆に毎回同じ設定しか使わない人は、ずっと流用で済むので出番は少なそうですが……

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね