11
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

プログラミングにおけるスニペットとは

Last updated at Posted at 2020-11-14

プログラミングをやるために必須のツールの一つにテキストエディタがあります。

コーディングしやすいようにテキストエディタのおすすめプラグインやショートカットなど検索していると、「スニペット」という聞き慣れない単語をよく目にします。

今回はこの「スニペット」について、プログラミング初心者であるぼくが調べてまとめてみました。

あくまで初心者が調べたことなので、中級者以上の方からみると間違った認識かもしれませんが、お気づきの方はご指摘いただけると嬉しいです。

結論:プログラミング版の辞書登録機能

PCを頻繁に使う人であれば単語の辞書登録機能って使ったことありますよね?

「あ」と打ったら「ありがとうございました。」と出るように事前に登録しておけば、

「あ」と打ってtabキーを押せば「ありがとうございました。」と出せるやつです。

スニペットは、この辞書登録機能のプログラミング版です。

スニペット(snippet)は「断片」という意味で、プログラミングではソースコードやテキストの一部を指すそうです。

下記は、RubyのフレームワークであるRuby on Railsで使うテンプレートエンジン「html.erb」で使用するスニペットを登録したものです。

erb.json
{
	"embedded Ruby": {
		"prefix": "erb",
		"body": [
				"<% $1 %>"
		]
	}
}
コード内の言葉 意味
embedded Ruby スニペットのタイトル
prefix 短縮語
body 短縮語を入力してtabキーを押すと変換されるコード

こんな感じで登録しておくと、余計なキー入力を減らせて、ミスも減り、コーディングの時短になるので、積極的にスニペットを増やしていきたいですね!

おまけ:Visual Studio Codeでスニペットを登録する方法

現在ぼくが使用しているテキストエディタ「Visual Studio Code」で、上記のhtml.erbのスニペットを登録する方法をお伝えします。

ちなみにPC環境はMacです。

1.Visual Studio Codeを開き、左上の「Code」→「基本設定」→「ユーザースニペット」の順にクリック。
スクリーンショット 2020-11-14 16.41.30.png

2.「erb」をクリック。
スクリーンショット 2020-11-14 17.26.04.png

このようにerb.jsonが開けました。
スクリーンショット 2020-11-14 17.26.26.png
上記のようにスニペット登録すれば、短縮語を入力するだけで長いコードなども簡単に入力することができます。

参考資料

VSCodeにコードスニペットを登録して効率的にコーディング!

11
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?