作業効率化：VS Codeでスニペットを登録して爆速でコードを入力する方法

HTMLやCSS、JavaScriptを何度も入力していると、「毎回同じコードを書いている」と感じる場面は少なくありません。

例えば、HTMLの基本構造やCSSのメディアクエリ、JavaScriptの関数などは、毎回手入力するよりもテンプレート化した方が効率的です。

VS Codeには**スニペット（Snippet）**という便利な機能があり、短いキーワードを入力するだけで、あらかじめ登録したコードを一瞬で展開できます。

この記事では、VS Codeのスニペット機能の基本から登録方法、活用例まで初心者向けにわかりやすく解説します。

スニペットとは？

スニペットとは、よく使うコードをテンプレートとして登録できる機能です。

例えば「html5」と入力してTabキーを押すだけで、HTMLの基本構造を展開できます。

スニペットを使うメリット

• コーディング時間を短縮できる
• 入力ミスを減らせる
• よく使うコードを統一できる
• 定型コードを書くストレスがなくなる
• 開発効率が大幅に向上する

特に毎日コーディングを行う場合は、大きな時間短縮につながります。

スニペットには2種類ある

VS Codeのスニペットには次の2種類があります。

普段の開発では、自分専用のユーザースニペットを登録する機会が多くなります。

ユーザースニペットを作成する方法

1. コマンドパレットを開く

以下のショートカットを押します。

• Windows：Ctrl + Shift + P
• Mac：Cmd + Shift + P

2. 「Configure User Snippets」と入力

「Configure User Snippets」を選択します。

3. 言語を選択する

例えば次のような言語を選択できます。

• HTML
• CSS
• SCSS
• JavaScript
• TypeScript
• PHP
• JSON

HTML専用なら「html.json」を選択します。

4. スニペットを記述する

例えばHTMLでよく使う画像タグを登録してみます。

{
  "Image Tag": {
    "prefix": "imgtag",
    "body": [
      "<img src=\"${1:image.jpg}\" alt=\"${2:画像}\" width=\"${3}\" height=\"${4}\">"
    ],
    "description": "Image Tag"
  }
}

保存すれば登録完了です。

各項目の意味

スニペットは次のような構成になっています。

{
  "名前": {
    "prefix": "",
    "body": [],
    "description": ""
  }
}

name

管理用の名前です。

自由に設定できます。

prefix

呼び出すキーワードです。

例えば

imgtag

と入力してTabキーを押すとスニペットが展開されます。

body

実際に展開されるコードです。

複数行の場合は配列で記述します。

"body": [
  "<div>",
  "\t<p>Hello</p>",
  "</div>"
]

展開結果

<div>
  <p>Hello</p>
</div>

description

スニペット一覧に表示される説明です。

検索時の目印になります。

プレースホルダーを使う

スニペットでは入力位置を指定できます。

"${1}"

数字が小さい順にカーソルが移動します。

例

"<a href=\"${1:#}\">${2:リンク}</a>"

展開すると

<a href="#">リンク</a>

Tabキーを押すたびに

1. href
2. リンク文字

の順番で入力できます。

よく使われるプレースホルダー

HTMLで便利なスニペット例

ボタン

{
  "Button": {
    "prefix": "btn",
    "body": [
      "<button class=\"${1:button}\">${2:ボタン}</button>"
    ]
  }
}

リンク

{
  "Anchor": {
    "prefix": "link",
    "body": [
      "<a href=\"${1:#}\">${2:リンク}</a>"
    ]
  }
}

pictureタグ

{
  "Picture": {
    "prefix": "picture",
    "body": [
      "<picture>",
      "\t<source srcset=\"${1:image.webp}\" type=\"image/webp\">",
      "\t<img src=\"${2:image.jpg}\" alt=\"${3:画像}\">",
      "</picture>"
    ]
  }
}

CSSで便利なスニペット例

Flexbox

{
  "Flex": {
    "prefix": "flex",
    "body": [
      "display: flex;",
      "justify-content: ${1:center};",
      "align-items: ${2:center};"
    ]
  }
}

メディアクエリ

{
  "Media Query": {
    "prefix": "mq",
    "body": [
      "@media screen and (max-width: ${1:768px}) {",
      "\t${2}",
      "}"
    ]
  }
}

JavaScriptで便利なスニペット例

関数

{
  "Function": {
    "prefix": "func",
    "body": [
      "function ${1:name}() {",
      "\t${0}",
      "}"
    ]
  }
}

addEventListener

{
  "Click Event": {
    "prefix": "click",
    "body": [
      "document.querySelector('${1}').addEventListener('click', () => {",
      "\t${0}",
      "});"
    ]
  }
}

スニペットはファイルごとに分けられる

VS Codeでは言語ごとに管理できます。

例

• html.json
• css.json
• scss.json
• javascript.json
• php.json

言語ごとに整理すると管理しやすくなります。

プロジェクト専用スニペットも作成できる

VS Codeでは、ユーザー全体ではなく特定のプロジェクトだけで使えるスニペットも作成できます。

チーム開発では共通のテンプレートを管理できるため、コードの統一や作業効率の向上に役立ちます。

スニペットを活用するコツ

最初から大量に登録する必要はありません。

次のようなコードから少しずつ登録すると、効果を実感しやすくなります。

• HTMLの基本構造
• ボタン
• リスト
• pictureタグ
• Flexbox
• Gridレイアウト
• メディアクエリ
• JavaScriptの関数
• イベント処理
• よく使うコメント

普段何度も入力しているコードを見つけたら、その都度スニペット化するのがおすすめです。

よくあるトラブル

スニペットが展開されない

以下を確認しましょう。

• ファイルの言語モードが正しいか
• prefixを正しく入力しているか
• Tabキーで展開する設定になっているか
• JSONの記述ミスがないか

JSONのカンマや括弧の閉じ忘れは、よくある原因です。

VS Codeの他の便利機能も活用しよう

スニペットとあわせて、次の機能も活用するとさらに効率よくコーディングできます。

• 「VS Codeとは？初心者向けに基本機能と使い方を解説」
• 「【完全版】VS Codeの基本操作と作業効率を爆発的に上げるショートカットキー一覧」
• 「VS Codeのおすすめ拡張機能まとめ｜開発効率が大幅に向上する定番15選」
• 「設定の同期：異なるPCでVS Codeの環境を完全に一致させる方法」
• 「実践解説：VS Codeの統合ターミナルを使いこなすコマンド操作ガイド」

これらを組み合わせることで、より快適な開発環境を構築できます。

まとめ

VS Codeのスニペットは、よく使うコードを素早く入力できる便利な機能です。

短いキーワードからコードを展開できるため、入力の手間を減らし、ミスの防止や作業時間の短縮につながります。

まずはHTMLやCSSで頻繁に使うコードを登録し、少しずつスニペットを増やしていくと、日々のコーディングがより効率的になります。