「あ、これコピペしたコードや」を防ぐ！プロジェクト別スニペット管理術｜現場で使える実践テクニック

こんにちは！

今日は「プロジェクト別スニペット管理術」について解説します。

「あ、これコピペしたコードや」という失敗

僕も経験あるんですけど、プロジェクトが複数進行してるときってほんま危ないんです。
前のプロジェクトで使ったスニペットをそのまま別のプロジェクトに貼り付けちゃって、あとでクライアントから「うちのブランドカラー違う」って指摘されたことあります。
その時は青系のカラー変数が前のクライアントのカラーコードだったんですよ。

現場でよく見るのは、複数のプロジェクトを同時進行してる中堅エンジニアが、グローバルなスニペットフォルダだけに頼ってて、プロジェクト固有の値をうっかり使い続けちゃう現象です。
「時短のためにスニペット使ってるはずなのに、修正作業が増えてる」みたいな矛盾が生まれるんです。

そこで大事なのが「プロジェクト別スニペット管理」という考え方なんです。
これは単なる便利機能じゃなく、ほんまに品質と効率の両立に不可欠な習慣なんですよ。

プロジェクト固有スニペットの作り方

VSCodeを使ってる方がほとんどだと思うんですけど、実はスニペットの管理方法には2つの階層があるんです。

グローバルスニペット vs ワークスペーススニペット

グローバルスニペット（~/Library/Application Support/Code/User/snippets）は、全プロジェクトで共通のコードスニペットです。
これは本当に汎用的なものだけにしましょう。
例えば、基本的なHTML構造とか、よくあるJavaScriptのパターンみたいな感じですね。

一方、ワークスペーススニペットは、プロジェクトのルートに.vscode/snippetsフォルダを作って、そこに言語別のスニペットファイルを置く方法です。
僕のおすすめはこれですよ。
プロジェクトごとに独立してるから、コピペミスのリスクがめっちゃ低くなります。

設定ファイルは.vscode/settings.jsonに以下のように追記するといいですよ：

"[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"snippets.resolveSnippetVariables": true

プロジェクト初期化時にスニペットを仕込む

新しいプロジェクトが始まったら、まず最初に.vscode/snippets そして、そのプロジェクトで使う色、フォント、APIエンドポイント、クラス命名規則などをスニペット化しておくんです。

例えば、プロジェクトのブランドカラーが決まってたら、CSSのスニペットに最初から組み込むんですよ。
こうすることで、色を間違える可能性をゼロにできます。

スニペット整理のコツと運用ルール

スニペットの管理って、実は整理が大事なんです。
乱雑に増えてくと、どのスニペットを使えばいいのかわからなくなるんですよ。

命名規則を統一する

僕がやってる方法は、スニペットの接頭辞を統一することです。
例えば、プロジェクト固有ならproj-とつけるんです。
そうすると、入力時に「proj」と打つだけで、プロジェクト固有のスニペットだけが候補に出てくるんですよ。

ほんま便利なんです。
さらに、言語別で分けるなら、HTMLならhtml-proj-、CSSならcss-proj-みたいにするといいですよ。

README的なドキュメントを残す

これ、よく忘れられるんですけど、プロジェクトの.vscodeフォルダにSNIPPETS.mdというファイルを作っておくといいですよ。
「このプロジェクトではどんなスニペットが用意されてるのか」「どの接頭辞で呼び出すのか」を書いておくんです。
後任の人や、チームメンバーが引き継ぐときにめっちゃ助かります。

実は僕も最初は「ドキュメントなんて必要ないでしょ」って思ってたんですけど、3ヶ月後に同じプロジェクトに戻ったときに、スニペット何があったっけ？って迷子になっちゃったんですよ。
それからドキュメント習慣がついてます。

実装例：実際の現場で使えるスニペット

では、実際のスニペット例を見てみましょう。

CSSカラースニペット（プロジェクト固有）

.vscode/snippets/css-project.jsonにこんな感じで設定します。

{
  "Brand Primary Color": {
    "prefix": "css-proj-primary",
    "body": "color: #2563eb; /* Brand Primary */",
    "description": "このプロジェクトのプライマリカラー"
  },
  "Brand Secondary Color": {
    "prefix": "css-proj-secondary",
    "body": "color: #64748b; /* Brand Secondary */",
    "description": "このプロジェクトのセカンダリカラー"
  }
}

こうしておくと、CSSファイルでcss-proj-primaryと打つだけで、そのプロジェクトのブランドカラーが自動で入るんです。
色を間違える心配がなくなりますよね。

HTML構造スニペット（API統合プロジェクト向け）

APIと連携するプロジェクトだったら、データ属性を最初から仕込むスニペットがあるといいですよ。

{
  "API Response Container": {
    "prefix": "html-proj-api",
    "body": [
      "