【もう】スニペット機能を活用してコーディング業務を効率化!【繰り返さない】

乗組員的EC探査録

みなさん。こんにちは。
ロケッツ4号機です。
  
  
コーダーにとって「エディタ」は仕事の相棒であり、パートナー。
みなさんも自分好みのエディタを使用されているかと思いますが、自分はここ2〜3年「Atom(アトム)」を愛用しています。
  
  
そこで今回!Atom の「スニペット」機能を使って爆速コーディングを実現する方法をご紹介します。
※DreamweaverやSublime Textにも同様の機能がありますので、それらのエディタをご使用の方は各自のスニペットを編集してください。
  
  

▼目次

スニペットとは?
便利なスニペット一覧
さいごに
  
  

■スニペットとは?

コーディング作業において、同じようなコードを書くシーンが多々あるかと思います。
たとえば「コメントアウト」やCSSの「メディアクエリ(media query)」、さらにはJSなどの代入式・・・。
こういった「繰り返し書く機会のある」コードを、いちいち書かずに呼び出す機能を「スニペット」と呼びます。
  
  
スニペットとは「断片」「端切れ」という意味の言葉らしいですが、コードの断片をスニペットとして登録しておくことで、
次回からのコーディングをより効率的に短縮して行うことができるのです。
  
※Atomではメニューバーから「スニペット」を選択するとsnippets.csonファイルが開きますので、そちらのファイルを編集してください。
  
  
百聞は一見にしかず。
実際にスニペットを使用しているシーンがこちら。
  
  

  
  
いかがですか?
このように、自分がよく使用するコードを辞書登録機能のようにして呼び出すことができるのです。
  
  
ではつぎに例として、自分が個人的にスニペット登録しているコードの一部をご紹介します。
  
  

■便利なスニペット一覧

では、自分が実際に登録しているスニペットをいくつかご紹介します。
  
  


HTML編

  

見出し(コメントアウト/HTML版)

<!--///////////////////////////////////
     title
///////////////////////////////////-->

  
  

jQuery

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

  
  

ulリスト

<ul>
  <li><a href="#">hoge</a></li>
  <li><a href="#">hoge</a></li>
  <li><a href="#">hoge</a></li>
</ul>

  
  

jQueryプラグイン(ex.Slick.js)

※よく使用するjQueryプラグインの標準コードを登録しておくと便利

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script type="text/javascript" src="slick/slick.js"></script>
<div class="slick">
  <div><a href="#"><img src="#" alt=""></a></div>
  <div><a href="#"><img src="#" alt=""></a></div>
  <div><a href="#"><img src="#" alt=""></a></div>
</div>
<script>
$("document").ready(function(){
	$('.slick').slick({
		autoplay: true,
		autoplaySpeed: 2500,
		speed: 800,
		dots: true,
		arrows: true,
		draggable: true,
		swipe: true,
		centerMode: true,
		centerPadding: '10%',
		variableWidth: true,
    responsive: [
    {
      breakpoint: 768,
      settings: {
        centerMode: false,
        variableWidth: false,
      }
    }
  ]
	});
});
</script>

  
  


CSS編

  

見出し(コメントアウト/CSS版)

/****************************
  hogehoge
****************************/

  
  

メディアクエリ

@media screen and (max-width: 480px) {
  .hoge{
    color:red;
  }
}/* @media screen and (max-width: 480px) */

  
  

clearCSS

.cl{display: block; min-height: 1%;}
.cl:after{clear: both;content:".";display: block;	height: 0;visibility: hidden;}
* html .cl{height: 1%; /*\*//*/height: auto;overflow: hidden;/**/}
.clears {clear:both;}

  
  

IE10以上に適用

※こういった、忘れやすいコードを登録しておくといちいち探さなくて済む

@media all and (-ms-high-contrast: none){
  .hoge{
    color:red;
  }
}

  
  


JavaScript編

  

即時関数(jQuery)

(function ($) {
  console.log('hogehoge');
})(jQuery);

  
  

即時関数02(jQuery)

※別バージョンの即時関数も登録しておくと、いざというときに便利

$(function(){
  console.log('hogehoge');
});

  
  

.scroll()

※scrollの他にもonやready、eachなど自分のやりやすいデフォルトの形で登録しておくと便利

$(window).scroll(function() {
  if ($(this).scrollTop() > 800) {
    console.log('aaa');
  } else {
    console.log('bbb');
  }
});

  
  

userAgent

こういった、パッと書けない&出てこないコードを登録しておけるのがスニペットの良さ

if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){ //PCのみ
  console.log('pc');
}else if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)) { //スマホのみ
  console.log('sp');
}

  
  

■さいごに

いかがでしたか?
エディタの「スニペット」機能を活用することで、同じコードを繰り返し書く必要がなくなり、コーディングの効率化に繋げることができます。
  
とくにありがちなのは、JSプラグイン設置時のコードがわからず公式サイトを参照してしまい、無駄な時間を費やしてしまうシーンですが、いちどスニペットに登録しておけば一発でコードを書くことができるようになります(プラグインの仕様が時折変更することがありますので、その際は随時確認するようにしてください)。
  
それでは、今年も残りわずか。良きコーディングライフをお楽しみください。
  
  

ECの運営でお悩みの方!ロケッツに「ほぼ丸投げ」してみませんか?

ECサイトのコンサル・制作・運用業務に10年以上携わっているチームが、最短の成功法則を多角的に提案・実行・検証まで一貫して行います。
今後さらに拡大し、兆規模になっていくEC市場。
現在その中心にある大手ECモールの最新ノウハウと実行方法を熟知しており、常に最善のEC運営を実現していきます!

乗組員的EC探査録
シェアする
コンサルロケッツステーション
タイトルとURLをコピーしました