こんにちは。WWGコーダーのもぐらです。

未経験で入社してから、あっという間に一年が経ちます。早いものですね。

今回は、そんな私が普段使っているエディターソフト『Visual Studio Code』のスニペットについてご紹介していきたいと思います。

スニペットとは、あらかじめ決めておいたキーとなる短いコードを呼び出すだけで、実務で頻繁に使うコード群を一瞬で呼び出すことのできる便利な機能です。

任意で決めた名前のコードをたった一行書くだけで、100行に渡るコードも一瞬で呼び出せるのでコーディングのスピードも上がるわけですね。

コーダー歴が浅くても使える＆現場で使っている実用的なものなので、「コーディングで時短したい！」とお考えのコーダー仲間さんのお役に立てたらうれしいです！

目次

1. スニペットの登録方法
2. コンテンツ幅の指定と中央寄せ
3. 背景画像
4. 疑似要素
5. まとめ

まずは簡単にスニペットの登録の仕方をご説明します。とても簡単です。

『ファイル』→『ユーザー設定』→『ユーザー スニペット』を選択して、登録したいファイルの.json拡張子のファイルを開きます。

今回であればscssファイルをご紹介したいのでscss.jsonファイルを開きます。

開いたファイルにスニペットを登録すれば、いざコーディングする際にはもうスニペットを呼び出すことができるようになっています。とても簡単かと思います。

"inner002": {
			"prefix": "inner002",
			"body": [
			   "margin-left: auto;",
			   "margin-right: auto;",
			   "width: 90%;",
			   "max-width: 1280px;",

			],
			"description": "1280pxの中央寄せautoです。"
		  },

コンテンツ幅を指定して、それを中央寄せにするコード群です。

コード群がどういったものなのかを説明するdescriptionの部分ですが、自分さえわかれば良いと思って全然正しくない日本語で記述しています。ご容赦ください…。それにしてもひどいですけどね。

上の画像ではinner002となっている、コード群を呼び出すスニペットの名前もわかりやすくシンプルな命名をすることがポイントです。あまりにもシンプルすぎると他のスニペットとごちゃごちゃになるのでそこだけ気を付けたいですね。既にinner001というスニペットが存在していたので上記のスニペット名は002となっているわけです。

この4行のコードですが、これはかなり頻繁に使うのではないでしょうか。

webサイトのコンテンツの横幅の多くが1280pxになっていて、それを中央寄せにするパターンは多いですからね。

応用編として、もし幅が1280pxでもなく中央寄せでもない場合で、コンテンツ幅が1600pxで右寄せの場合でもmax-widthの部分を1600pxに、margin-rightを0に変えれば簡単に書き換えれます。

一から書くよりかは圧倒的に速く、ミスも減らせます。

二つ目は背景画像のスニペットですね。

		"bgimage01": {
		  "prefix": "bgimg01",
		  "body": [
			"background-image: url(../img);",
			"background-position: center;",
			"background-size: cover;",
			"background-repeat: no-repeat;",
		  ],
		  "description": "背景画像です。"
		},

背景画像を実装する際は大抵この4行を使うのではないでしょうか。

background-imageは当然不可欠だし、background-repeatもno-repeat（繰り返しなし）にすることが大半です。後はデザインによってbackground-sizeの値や、background-positionの値を適宜変えることがあるくらいですね。それでも、上の画像のようなcover,centerで落ち着くケースが多いです。

三つ目は疑似要素のスニペットですね。これも汎用性が高いのではないでしょうか。

		  "giji": {
			"prefix": "giji",
			"body": [
				"content: "";",
				"position: absolute;",
				"width: ;",
				"height: ;",
				"top: 0;",
				"left: 0;",
				"inset: 0;",
				"z-index: 0;",
				"background: #000;"
				

			],
			"description": "疑似要素です"
		  },

毎回、content,position,height,width,top,left,z-index,background～って手書きで書くのは大変ですし、ミスも増えそうですからね。

疑似要素もこれらのコードを書けば大抵完結する事が多いのであるととても便利です。

以上3つとなります。いかがだったでしょうか。

一度スニペットを登録してコードを書くのを省略化してしまえば、本当に楽だしミスも減ります。手書きで全部書いていた頃には戻れません。

スニペットの登録も一見面倒くさそうですが、いざやってみると何も面倒なことはなく、10行以内のコード群であれば数分で終わる事でしょう。

「このコードは今後も使いまわすこと多いかも！」と思ったものは積極的にスニペットに登録していきたいですね。

何か一つでもできることが増えたり、自分の成長が実感できると嬉しいですね。それはこれからもずっとそうだと思います。

これからも驕ることなく貪欲に新しい技術を身に付けていければと思います。

愛知県内から名古屋市を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17　花車ビル南館5F

TEL： 052-890-7007
※ ホームページ制作や活用サポートのお問い合わせはコチラから

もぐら

コーダー

2022年入社。実務未経験ながらも一念発起してWeb業界に飛び込みました。日進月歩の変化の速い業界で日々の勉強が必要不可欠ですが、楽しみながら一人前になるべく頑張っています。