一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】

エンジニアT

11年前

※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。

気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！

スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。

Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための機能が備わっていますので、使わない手はありません！

スニペットの登録方法

Sublime Textの場合

Sublime Textのスニペットは以下のようなxmlファイル（拡張子は.sublime-snippet）で構成されています。

showjQueryのshowメソッド

それぞれのパラメータには以下のような値を指定します。

content – 表示される内容です。 <![CDATA[...]]> で全体を囲む必要があります。
tabTrigger – 展開前の記述です。
scope – スニペットが有効になる言語を指定します。省略すると特に制限なく使用可能になります。
description – スニペット一覧に表示されるコメントです。

なお、jQuery関連のスニペットなどでは「$」をエスケープシーケンス（環境に応じて「\$」「¥$」と表記する）を使用する必要があることにご注意ください。

メニューの「Preferences > Browse Packages」を選択するとファイルの保存先の「Packages」ディレクトリが自動的に表示されます。このディレクトリ以下であればどこに保存してもスニペットとして使用可能になりますが、「User」ディレクトリ以下などにまとめておくのがよいでしょう。

参考：Sublime Textの公式サイトのSnippet関連ページ

Dreamweaverの場合

「ウィンドウ > スニペット」で上のようなスニペットの管理画面が立ち上がります。それぞれの項目を指定し、登録すれば使用可能になります。Dreamweaverではスニペットの管理画面の呼び出しだけでなくそれぞれのスニペットに対してショートカットキーを設定できるので、頻繁に使用するスニペットにはショートカットキーを設定しておくとよりスピードアップにつながります。

これらのアプリケーションには最初から様々なスニペットが登録されていますので、まずはそれらを活用し、使い勝手をさらに良くするために自分で追加登録するというのが良いでしょう。

以下、ご参考までに弊社のマークアップエンジニアが登録しているスニペットの一部をご紹介します。モックアップ作成のための記述をまとめておいたり、簡単な処理をすぐ使えるように登録しておいたりとスニペットの使い方は人それぞれですので、ぜひとも自分なりの使い方を究めてみてください！

※下記のスニペットには、${1:selector}など複数のプレースホルダを指定するSublime Text用の記法を使用しているものがあります。該当するスニペットでは、設定ファイル中の記述を「展開前」、ソースコードに呼び出した際の記述を「展開後」として併記してあります。

HTML : head編

Favicon

apple-touch-icon　立体加工あり

apple-touch-icon　立体加工なし

viewport（Landscape時サイズ固定、拡大・縮小無効）

OGP

HTML : body編

jQuery.min – CDN

ダミー画像（placeholdit）最小指定

ダミー画像（placeholdit）詳細指定

※参照：PLACEHOLD.IT(http://placehold.it/)　ダミー画像をホスティングしてくれるサービスです。

jQuery Mobile テンプレート – CDN




Title

Twitter Bootstrap テンプレート ver.2.3.2 – CDN




Bootstrap 101 TemplateHello, world!

参照：http://www.bootstrapcdn.com/

CSS編

media queries – 画面幅480px以下場合の指定

@media screen and (max-width: 480px) {
 
}

media queries – 解像度2倍のディスプレイ用の指定

@media only screen (-moz-min-device-pixel-ratio: 2),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
 
}

コメントアウト（大）

/* ===============================================
#
=============================================== */

コメントアウト（小）

/* #
----------------------- */

JavaScript編

jQuery – .on

/* 展開前 */
\$("${1:selector}").on('click',
function(){
    
}
);
/* 展開後 */
$("selector").on('click',
function(){

}
);

jQuery – .animate

/* 展開前 */
\$("${1:selector}").animate({
    '${2:property}' : ${3:value}
},${4:speed},'linear');

/* 展開後 */
$("selector").animate({
    'property' : value
},speed,'linear');

jQuery – .attr

/* 展開前 */
\$("${1:selector}").attr('${2:property}','${3:value}');

/* 展開後 */
$("selector").attr('property','value');

setTimeout

setTimeout('func()',1000);

function func(){
}

setInterval

setInterval('func()',1000);

function func(){
}

クエリーを取得するスクリプト

var query = location.search;
query = query.slice(1);

if(!query){
    /* no query */
} else {
    
}

乱数を発生させるスクリプト

var randomNum = Math.floor( Math.random() * 10 );

User AgentからAndroid、iOSを判別

var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('iPad') > 0) {
 
/* iPhone, iPod, iPad */
 
} else if (navigator.userAgent.indexOf('Android') > 0){
/* android */
}

User AgentからIEのバージョンを判別

var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();
if (userAgent.indexOf("msie") > -1) {
if (appVersion.indexOf("msie 6.0") > -1) {
/* IE6 */
}
else if (appVersion.indexOf("msie 7.0") > -1) {
/* IE7 */
}
else if (appVersion.indexOf("msie 8.0") > -1) {
/* IE8 */
}else{
/* after IE9 */
}
}else{
/* not IE */
}

Canvasの使用準備

/* 展開前 */
var cv = document.getElementById('${1:idname}');
if ( ! cv || ! cv.getContext) {return false;}
var ctx = cv.getContext('2d');
 
/* 展開後 */
var cv = document.getElementById('idname');
if ( ! cv || ! cv.getContext) {return false;}
var ctx = cv.getContext('2d');

それにしても最近のテキストエディタは賢いですよね…。この記事を書いたのを機に、使っていない機能やプラグインに便利なものがないかどうか、改めて見直してみたいと思います。