※ こちらはミツモアAdvent Calendar 2022の14日目の記事です。
こんにちは、インターンとしてミツモアのエンジニアをしている松本です。今年もアドベントカレンダーの季節がやってきました。昨年の記事については ミツモアAdvent Calendar 2021 こちらを見てみてください。
この記事では、エンジニアの作業効率を上げる VSCodeのUser Snippetsという機能について紹介します。
背景
インターン入社当時は本当に一つ一つの作業に無駄が多かったのですが、チームの方々から作業効率を上げる方法について様々なことを教えてもらいました。
そして、その中の一つであるUser Snippetsを使い、よく利用するコードをスニペットとして登録することで作業効率を上げることができたと実感しています。
なので今回は VSCodeのUser Snippetsについて紹介して、以前の私と同じような駆け出しエンジニアや学生インターンの方が一歩前進できるような記事になれば幸いです。
スニペットとは
スニペットとは一般的に「断片」という意味になりますが、IT用語としてはプログラミングなどで再利用可能なソースコードを表します。
スニペットを用意することでよく利用するソースコードを簡単に呼び出して展開することが可能となるため非常に作業効率が上がります。
Reactを使う人なら入れているであろうプラグインのES7に含まれるスニペットもその一つになります。
ES7だとrafce という文字を打って[tabキー]を押すと以下のように表示されます。
import React from 'react'
const ファイル名 = () => {
return (
<div>ファイル名</div>
)
}
export default ファイル名
VSCodeが用意しているUser Snippetsという機能では、このようなイメージでいくつでも独自のスニペットを登録することができます。
User Snippets使用手順
独自のスニペットを登録する手順について簡単に説明します。
1「Code」→「Preferences」→「User Snippets」を選択する。
2 検索欄で登録したいスニペットの言語を入力し、選択する。
どのファイルのスニペットを登録するか選択します。
今回はミツモアで使っているtypescriptを選択していきます。
3 「typescript.json」にスニペットを登録する。
typescriptを選択すると、typescript.json というJSONファイルが作られるのでこのファイルに登録したい独自スニペットを記述していきます。
新たに作成した状態だと、コメントで説明と記述のサンプルが書かれています。
基本的な書き方
ユーザースニペットの登録の構成は以下のようになります。
name：スニペット名 prefix：短縮語 body：展開するコード description：スニペットの説明
この構成を元にJSONで書くと以下のようになります。
"name": {
"prefix": "短縮語",
"body": [
"展開するコード",
"展開するコード",
"展開するコード"
],
"description": "スニペットの説明"
}
descriptionは無くても大丈夫ですが、分かりやすくしたかったら書いておきましょう。
基本的には、「スニペット名」「短縮語」「展開するコード」の3つの構成で登録していきます。
「短縮語」を入力して[tabキー]を押すと「展開するコード」が出てくるようになります。
実際に書いてみる
それでは実際に独自スニペットを登録して実行できるか確かめてみましょう。
今回は初歩的にconsole.log(val)をcl の２文字で展開できるようにスニペットを登録していきます。valはデフォルト値になります。
以下が今回登録するスニペットのJSONコードになります。
"console.log": {
"prefix": "cl",
"body": [
"console.log(${1:val})"
],
"description": "console.log"
}
${1:デフォルト値} のような書き方は、可変値のデフォルト値を指定したい場合に使います。
呼び出し時にはデフォルト値のままで良い場合はそのまま[tabキー]を押し、値を変更したい場合は値を上書きして[tabキー]を押すことで任意の値が指定できるようになります。
その他にも様々な記述に関するルールがあるので公式ドキュメントを参照してください。
Snippets in Visual Studio Code
それでは実行できるか確認してみましょう。
実際にconsole.logがcl + [tabキー] で表示できたら成功です。
まとめ
今回は、 VSCodeのUser Snippetsについてお話しました。
このUser Snippetsを使いこなして、無駄なコーディングを減らすことで爆速コーディングができるようになるかもしれません。
よく利用するコードがあったらスニペットに登録していって、VSCodeをより使いやすい自分だけのエディタにしていきましょう。
最後まで読んでくださりありがとうございました。
最後に
ミツモアでは様々な職種のエンジニアを積極的に採用しています！ ご興味がある方はぜひ気軽に面談しましょう！
