今回は、多くの方が使われているコードエディター「Visual Studio Code」のユーザースニペット機能を紹介します。
ユーザースニペット機能とは、よく使うコードを予め登録しておいてショートコードで呼び出せる機能です。
私がWeb制作を始めたころは「何度もコードを書いて覚えるんだ！」と毎回ベタ書きしていました。
慣れないうちはそれも良いかもしれませんが、クライアントワークの中で何度も何度も同じコードを書いていると「こ、これは効率が悪すぎる…」と感じるようになり、新しくチャレンジすることやより重要なことに時間を割けるように効率化するべく、ユーザースニペットを活用するようになりました。
何度も書いて覚えたコードが増えてきた初学者さんには、ステップアップにおすすめの機能です。
もくじ
ユーザースニペットとは
ユーザースニペットとは、よく使うコードを予め登録しておいてショートコードで呼び出せる機能です。
VSCodeのユーザースニペット機能では、ソースコードやタグからよく使うテンプレートまで普段コーディングでよく入力するテキストを登録しておくことができます。
簡単なコードでも何度も一から書いていると少しのことですが、積み重なると多くの時間を費やすことになりますが、よく使うコードを予め登録しておけば、タイプミスも防げてコーディングだけでなく、開発全体の効率を高められるでしょう。
ユーザースニペットの登録手順
VSCodeでのユーザースニペットの登録手順を紹介します。（Mac）
① スニペット登録用の.jsonファイルを開く
①-１. 設定メニューを選択する
左下の「⚙」マークから設定メニューを開き「ユーザースニペット」を選択します。
①-２. 登録する言語を選択する
検索ボックスに表示されるスニペットファイルの一覧から登録するスニペットの言語を選択して、スニペット登録用の.jsonファイルを開くまたは作成する。
② スニペットを登録する
ファイルを開くとコメントアウトされたテキストに記入例が書かれているので、それにそって登録していきます。
コメントアウトされたテキストは消しても問題ありません。
②-１. 基本のフォーマット
ユーザースニペット登録の基本の書き方は次の通りです。
複数行に渡るコードを登録する場合は、1行ごとにダブルクォーテーション「”」でくくり、配列形式で記入していきます。
複数のスニペットを登録する場合は、カンマ「,」で区切って追加していきましょう。
{
"スニペット名-1": {
"prefix": "スニペットを呼び出すためのショートコード",
"body": [
"出力するコードやテキスト 1行目",
"出力するコードやテキスト 2行目"
],
"description": "スニペットの説明文" // 任意
},
"スニペット名-2": {
"prefix": "スニペットを呼び出すためのショートコード",
"body": [
"出力するコードやテキスト 1行目",
"出力するコードやテキスト 2行目"
],
"description": "スニペットの説明文" // 任意
}
}②-２. 実際に登録してみる
今回は、Webサイトによく実装するグローバルナビの雛形をスニペットに登録してみましょう。
スニペット名は「Global Nav」、雛形を呼び出すためのコードは「gnav」にして、”body”に出力したいコードを書いていきます。
{
"Global Nav": {
"prefix": "gnav",
"body": [
"<nav>",
"\t<ul>",
"\t\t<li><a href=\"$1\">$2</a></li>",
"\t\t<li><a href=\"$3\">$4</a></li>",
"\t\t<li><a href=\"$5\">$6</a></li>",
"\t</ul>",
"</nav>"
]
}
}さて、出力するコードの中に「$」や「\t」などの文字列が出てきましたが、こられもコーディング効率アップの手助けとなる機能のひとつです。
どんな機能があるのか確認していきましょう。
◎「$n」でカーソル移動もコントロール
「$n」はスニペットを出力したときのカーソル位置を指定することができます。
スニペットを出力したらまず「$1」の位置にカーソルが移動し、Tabキーで「$2、$3…」と順に移動します。
入力が必要な箇所に指定して置くとカーソル移動の手間が省けて、スムーズに作業できますね。
また「${1:デフォルト値}」のようにデフォルト値を指定して置くおくができます。
◎「\t」でインデントを入力
「\t」はタブを1つ挿入します。
出力するコードでネストされている要素など、インデントが必要な箇所に入力しましょう。
◎「\」でエスケープ
出力するコードの中にダブルクォーテーション「”」が含まれる場合は、バックスラッシュ「\」でエスケープしましょう。
今回の例では、href属性の「”」を「\”」と書いてエスケープ処理しています。
②-３. 登録したスニペットを出力してみる
登録したスニペットがどのように出力されるのか見てみましょう。
次の画像のようにhtmlファイルで「g」と入力するとスニペットの候補が表示され、「gnav」にカーソルを合わせるとスニペットの内容が表示されます。
「gnav」にカーソルを合わせてEnterキーを押すと、次画像のように登録したGlobal Navスニペットが出力され「$1」の位置にカーソルが移動します。
デフォルトで設定しておいたデフォルト値も$1・$3・$5に「https://」、$2に「HOME」と出力されまていますね。
おわりに
今回は、コードエディター「Visual Studio Code」のユーザースニペット機能を紹介しました。
Web制作を始めたころは、修行だと思って「せっせ、せっせ」と何度も同じコードを書いていましたが、様々な言語やツールに触れる中で開発の効率化もスキルアップのひとつだと気がつきました。
スニペットに登録するコードを選定することも学びにつながるので、初学者さんはユーザースニペット機能の活用にもチャレンジしてみてくださいね。
