jQueryスニペット集で
WEBコーディング作業効率アップ！

Webサイトのコーディングはある程度時間の掛かる作業です。
出来ることなら一度書いたことのあるコードは何度も書きたくないですよね？
そこで、エディタによっては「スニペット」という便利な機能があるので活用しましょう。

「スニペット」って何？

スニペットには断片や切れ端という意味があり、コーディングにおいては「よく使うコードを登録して再利用できるようにしておくこと」、と捉えてよいでしょう。コードに限らず、メールソフトの署名機能などもある意味スニペットと言えます。
このコード以前どこかで使ったけど、どこにあるか思い出せない…という時や、このコード使えそうだからとっておきたい、ということはよくあると思います。そんな時にスニペットはとても役に立ちます。
各エディタ毎に使い方は異なりますので、詳しいスニペット機能の使い方はエディタの解説書をご覧ください。
もしスニペット機能のないエディタを使用している方も、テキスト形式でコードのバックアップを取っておくことで同じような事ができますので、手動でオリジナルのライブラリを作るのもよいでしょう。
自分の良く使うコードを溜めて使いこなせば時間短縮につながります。

よく使うjQueryスニペット

今回は私が普段のコーディングでよく使うjQuery(javascript)のコードをまとめました。
使用の際はjQueryファイルを読み込んでください。
jQuery：https://jquery.com/
複雑なコードやケースによっては使えないコードなどは極力避けました。

ホバーフェード

class=”fade”のついたタグのマウスオーバー時にフェード効果で少し薄く、マウスアウト時に元に戻ります。
fadeToをcssのopacityにすれば瞬時に薄くなる効果が付けられます。【デモ】

$(".fade").hover(function(){
　　$(this).stop(true,false).fadeTo(100, 0.7);
},function(){
　　$(this).stop(true,false).fadeTo(100, 1.0);
});

<p class="fade"><a href="#">ホバーフェード</a></p>

スムーススクロール

aタグとarea(map)で有効なスムーススクロールです。【デモ】

var scrollSpeed = 1000;
$("a[href*=#] , area").click(function() {
  var $target=$(this.hash);
  var targetY=$target.offset().top;
  $($.browser.opera ? document.compatMode === 'BackCompat' ? 'body' : 'html' :'html,body').animate({scrollTop: targetY},{duration: scrollSpeed});return false;
});

<p><a href="#block1">アンカー1</a></p>
<p><a href="#block2">アンカー2</a></p>
<p><a href="#block3">アンカー3</a></p>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
<div id="block3">Block3</div>

ボックスリンク

class=”boxLink”タグ全体がリンクとして機能します。【デモ】

$(".boxLink").click(function(){
  if($(this).find("a").attr("target")==="_blank"){
    window.open($(this).find("a").attr("href"), "_blank");
  }else{
    window.location=$(this).find("a").attr("href");
  }
  return false;
});

<div class="boxLink">
<h2>ボックスリンク</h2>
<p><a href="https://www.google.co.jp/" target="_blank">Google</a><br />
テキストテキストテキストテキストテキストテキスト</p>
</div>

イメージロールオーバー

imgタグにclass=”ov”をつけると、マウスオーバー時末尾に「_o」がついた画像に切り替わり、マウスアウト時に元の画像に戻ります。【デモ】

var pattern = /(.+)(\.[^.]+$)/;
var picName;
$(".ov").hover(function(){
  picName = $(this).attr("src");
  if(picName.match("_o")=="_o"){
    $(this).attr("src",picName.match(pattern)[1] + "_o" + picName.match(pattern)[2]);
  }
},function(){
  $(this).attr("src",picName);
});

<img src="images/img_over.jpg" alt="" class="ov">

イメージのプリロード

imgPreload関数内に指定した画像を先読みします。イメージロールオーバー等、ロード時には表示しない画像に使うとマウスオーバー時にチラつかなくなります。【デモ】

function imgPreload() {
  for(var i = 0; i < arguments.length; i++){
    $("<img>").attr("src", arguments[i]);
  }
}
imgPreload("images/img_over_o.jpg");

アコーディオン

class=”button”タグをクリックするとすぐ下のclass=”accordion”タグが開き、もう一度クリックすると閉じます。（class=”accordion”は自動で非表示設定になります）【デモ】

$(".accordion").hide();
$(".button").click(function(){
  $(this).next().slideToggle(300);
});

<div class="accordionBox">
<div class="button">アコーディオンボタン</div>
<ul class="accordion">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
</div>

リサイズ

ウィンドウ（ブラウザ）の幅を変える度に実行される命令です。レスポンシブサイトに役立ちます。【デモ】

var windowWidth = $(window).width();
$(window).resize(function(){
  var ww = $(window).width();
  if(windowWidth != ww) {
    //ウィンドゥサイズ変更された際に、実行する内容を記述
    windowWidth = ww;
  }
});

setInterval

ループして実行される命令です。下記設定では1秒おきに実行されます。【デモ】

var count = 1;
function loop(){
  ++count;
  //1秒毎に実行する内容を記述
}
$(".setIbutton").click(function(){
  setInterval(loop,1000);
});

setTimeout

指定した秒数遅らせて実行される命令です。下記設定では1秒後に実行されます。【デモ】

function delay(){
  //指定した1秒後に実行する内容を記述
}
$(".setTbutton").click(function(){
  setTimeout(delay,1000);
});

まとめ

いくつかのjQueryスニペットを紹介させていただきました。今回はjQueryでしたが、もちろんHTMLやCSS等どんなソースも登録できます。もちろんそのまま使えない場合もありますが、そんな時は少し改変して制作中のページに合うコードにしてしまえば一から書くよりずっと早いですよね。また、あくまでスニペットは自分専用のライブラリを上手く利用して作業効率を上げることに意味がありますので、スニペットがないと何も自分で書けないということにならないよう、初心者の方は理解できるまでは丸写しでも良いので自分で打つことをおすすめします。
それでは、効率アップを目指して良いコーディングライフをお楽しみください。

WEBプログラマー ／ O.K