【超簡単】独自スニペットコードの登録方法【コーディング効率化】

コーディング業務は時間との勝負です。

コーダーは効率化や時短ができる方法を日々模索しながら作業を行なっているのですが、コーディング効率化の1つの手段として、「スニペット登録」があります。

▼vscodeの「ユーザー スニペット」

スニペット登録を使うと、「頻繁に使うコードをスニペット登録しておいて、トリガーテキストを入力するだけでそのコードを一瞬で出力する」ということができます。

例えば以下の画像のように、「登録したトリガーテキスト」と「Tabキー」を入力すると、あらかじめ登録したコードが自動的に出力されます。

スニペット登録をうまく使えれば、コーディングの大幅な効率化に繋がります。しかし、その登録をする上で、ルールに則った記述が必要だったりして少し面倒です。

今回はそれらルールをイチイチ覚えなくても登録できる方法について紹介していきたいと思います。

便利だけど登録が少し面倒くさいスニペット登録

独自のスニペットコードを使いたい場合は「◯◯.json」にコードを登録する必要があります。

「htmlの独自スニペットコードを使いたい」	html.jsonファイルへのコード登録が必要
「scssの独自スニペットコードを使いたい」	scss.jsonファイルへのコード登録が必要

では、使いたいコードを「◯◯.json」に丸々コピペをすればよいのかというと、そうではありません。

冒頭で述べた通り、いくつかのルールに則った書き方をしないとスニペットを使うことができないのです。

Snippets in Visual Studio Code

It is easy to add code snippets to Visual Studio Code both for your own use or to share with others on the public Extens...

code.visualstudio.com

どこのどのファイルを編集するのか

htmlのコードをスニペット登録する場合は、html.jsonファイルを編集する必要があります。以下の手順でhtml.jsonファイルが開けます。

1. VSCodeのメニューバーにある『ファイル』から『ユーザー設定』の『ユーザースニペット』を選択
2. 検索画面に「html.json」を入力し、『html.json (HTML)』を選択

https://smallit.co.jp/blog/a1785#%E7%8B%AC%E8%87%AA%E3%81%AE%E3%82%B9%E3%83%8B%E3%83%9A%E3%83%83%E3%83%88%E3%82%92%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B

ファイルを開くとコメントアウトされたコードが書かれています。そのファイルを編集すると、スニペット登録ができるという流れです。

{
	// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}

ルールを覚えずにファイルを編集する方法とは

ここからが本題です。

勘の良い人ならとっくに気づかれているかもしれませんが、ルールを覚えずにファイルを編集する方法は「ChatGPTに必要なコードを書いてもらう」です。

以下、僕とChatGPTの会話ログです。

font-family: 'Zen Old Mincho', serif;
		font-weight: 800;
		font-size: 24px;
		letter-spacing: 0.05em;
		line-height: calc(40/28);
		color: var(--title01-color);
		@include mq-min(){
			font-size: 28px;
		}

// ユーザースニペットの設定ファイル（例: scss.json）
{
  "SCSS Snippets": {
    "prefix": "customSnippet",  // スニペットのトリガーとなるキーワード
    "body": [
      "font-family: 'Zen Old Mincho', serif;",
      "font-weight: 800;",
      "font-size: 24px;",
      "letter-spacing: 0.05em;",
      "line-height: calc(40/28);",
      "color: var(--title01-color);",
      "@include mq-min() {",
      "  font-size: 28px;",
      "}"
    ],
    "description": "Custom SCSS Snippet"  // スニペットの説明
  }
}

という感じで、作業者が「各行はダブルクォーテーションで囲む」などのルールを把握していなくても、ChatGPTがルールに則ったコードに編集して、それについての説明もしてくれます。

「複数のスニペットを登録するケース」にも対応

先ほど、ChatGPTに1つのまとまったscssコードを投げて、scss.json用のコードを生成してもらいました。

では、複数のまとまったコードを登録したい場合はどうなるのか？

以下、僕とChatGPTの会話ログです。

position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

// ユーザースニペットの設定ファイル（例: scss.json）
{
  "Centering Snippet": {
    "prefix": "centeringSnippet",
    "body": [
      "position: absolute;",
      "top: 50%;",
      "left: 50%;",
      "transform: translate(-50%, -50%);"
    ],
    "description": "Centering CSS Snippet"
  }
}

// ユーザースニペットの設定ファイル（例: scss.json）
{
  "Custom SCSS Snippet": {
    "prefix": "customSnippet",
    "body": [
      "font-family: 'Zen Old Mincho', serif;",
      "font-weight: 800;",
      "font-size: 24px;",
      "letter-spacing: 0.05em;",
      "line-height: calc(40/28);",
      "color: var(--title01-color);",
      "@include mq-min() {",
      "  font-size: 28px;",
      "}"
    ],
    "description": "Custom SCSS Snippet"
  },
  "Centering Snippet": {
    "prefix": "centeringSnippet",
    "body": [
      "position: absolute;",
      "top: 50%;",
      "left: 50%;",
      "transform: translate(-50%, -50%);"
    ],
    "description": "Centering CSS Snippet"
  }
}

といった感じで、まとまったコードを複数スニペット登録したい場合も、ChatGPTが必要なコードを正確に出力してくれます。もちろん、実際に「VSCodeでSCSSファイルを開いて、customSnippetまたはcenteringSnippetと入力し、Tabキーを押すと、対応するスニペットが展開されます」。

「カーソルの移動順序」にも対応

実は、スニペット登録では「カーソルの移動順序」を指定することもできます。しかし、自分でコードを書くとなると、少しルールの把握が必要です。面倒なので、ChatGPTにコードを書いてもらいましょう。

 <img src="" alt="" loading loading=”lazy”>

// ユーザースニペットの設定ファイル（例: html.json）
{
  "Lazy Loaded Image": {
    "prefix": "lazyImage",
    "body": [
      "<img src=\"$1\" alt=\"$2\" loading=\"lazy\">"
    ],
    "description": "Lazy Loaded Image Tag"
  }
}

という感じで、「カーソルの移動順序」の指定もChatGPTが完璧にこなしてくれました。

まとめ

今回は、「ルールを覚えなくても簡単にできる独自スニペットコードの登録方法」について紹介させていただきました。

もちろん理想は「jsonファイルへの記述ルールを完璧に理解した上でスニペット登録を使いこなす」というところですが、正直、しんどいし、面倒くさいです。

ChatGPTが存在する時代に生まれたことに感謝して、使えるところで使ってどんどん楽をしていきたいと思います。