jQueryやsccsの「スニペットコードの書き方」を考えてみよう！

jQueryを書いていると毎回長い冗長なコードになってしまい、
「コード自体もできるだけスマートにしたい」 といつも思います。
で、調べていたら **「スニペットコード」**というキーワードがひっかかりました。

#スニペットコードって？

再利用できるように部品化されたコード だと思うといいらしい。
（snippetは断片、切れ端といった意味）

common.js

$(function(){
	$(".testButton").on("click", function(){
		console.log("Hello World!");
		console.log("hogehoge");
	})
})

じゃなく

common.js

var test = function(){
	console.log("Hello World!");
	console.log("hogehoge");
}

$(function(){
	$(".testButton").on("click", function(){
		$test();
	})
})

みたいに書くことを指すのかな？と思います。
「スニペット」という言葉自体に親しみはないけど、こうやってまとまりにして使いまわせるようにするのは普段でもよくやってます。

#スニペットコードを作るときに注意していること

1. 「必要になったら」スニペットコード化する
2. 先に作ったコードをスニペットコード化する際にわざわざ書き換える必要はない
3. 細かくスニペットコード化するとバリエーションが増えたときに良いっぽい

##1.の理由

• 初めからスニペットコードとして書こうとすると失敗することがある
• 同じコードが数回出てきた後につくった方が無駄のないコードになるときがある

はじめから「スニペットコードを書こう！」と意気込むと
「あとあとも使いまわせるような汎用性の高いコードにしたい・・・！」
という欲がでてしまい、１つのスニペットコードのクオリティを上げようと必死になりがち。
でもスニペットコードを作る大きな理由は 再利用できる = コードを書く時間の節約 のはずなので
スニペットコードを作るのに時間をかけると本末転倒になってしまう。（自戒）

##2.の理由

• 作ったスニペットコードと同じコードを探して置き換える時間が無駄

説明不要。
まぁ置き換えた方がコードの見通しが良くなるのは間違いないんですが、
置き換えなくても支障はないはずなのであんまり躍起になって書き換えなくてもいいかなと。
細かい修正って途中でやってしまうと案外時間がかかるので、粗方の作業が済んでからでいいものは後回しにする。
この意識は結構大事だな、といつも後悔しながらフロントのコーディングをしています・・・。

###追記

これは「作業効率」を考えるのであればいいらしいけど、置き換えなければあとあとコードを修正するときに
「スニペットコードの中身を変更したのに意図したところが変わらない！」
というような事故が起きる可能性もあるのであまりよくないかもしれない・・・。

##3.の理由

• 限定的なスニペットコードは限定的にしか使えない
• パッと見てすぐわかる名前のスニペットコードを複数指定する方が要素の想像もしやすい

common.js

var snipetCodeExample--hello= function(){
	var html = "<p>Hello world!</p>";
	$('.hoge').html(html);
	console.log(html);
}
var snipetCodeExample--morning= function(){
	var html = "<p>Good Morning!</p>";
	$('.hoge').html(html);
	console.log(html);
}
var snipetCodeExample--afternoon= function(){
	var html = "<p>Good Afternoon!</p>";
	$('.hoge').html(html);
	console.log(html);
}

$(function(){
	$(".testButton--hello").on("click", function(){
		snipetCodeExample--hello();
	})
	$(".testButton--morning").on("click", function(){
		snipetCodeExample--morning();
	})
	$(".testButton--afternoon").on("click", function(){
		snipetCodeExample--afternoon();
	})
})

これじゃ snipetCodeExample--hello は"Hello World!"と表示したいときにしか使えず、
ほとんど中身は同じなのに"Good Morning!"や"Good Afternoon!"と表示するときに再利用できない。
snipetCodeExample--morning や snipetCodeExample--afternoonも同様。

そこでこんな風にしてみる。

common.js

var rewriteHtml = function(html){
	$('.hoge').html(html);
}
var console = function(html){
	console.log(html);
}

$(function(){
	$(".testButton--hello").on("click", function(){
		var html = "<p>Hello world!</p>";
		rewriteHtml(html);
		console(html);
	})
	$(".testButton--morning").on("click", function(){
		var html = "<p>Good Morning!</p>";
		rewriteHtml(html);
		console(html);
	})
	$(".testButton--afternoon").on("click", function(){
		var html = "<p>Good Afternoon!</p>";
		rewriteHtml(html);
		console(html);
	})
})

こうすると新しく"Good evening!"と表示したいときも rewriteHtml と console を再利用可能。
しかもこの書き方だと **「htmlを書き換えて、consoleに表示してるんだな」**とパッと見てすぐわかる。

#scssでもスニペットコードは有用

jQueryではありませんが、 scssの@mixin も実はスニペットコードなのかなと思います。

index.html

<button class="buttonOrange">buttonOrange</button>

common.scss

@mixin buttonContainer($width:13rem) {
  text-align: center;
  height: 2.5rem;
  width: $width;
  border-radius: 4px;
}

@mixin buttonColor($bgcColor, $shadowColor, $color:white) {
  background-color: $bgcColor;
  color: $color;
  box-shadow:0 4px $shadowColor;
}

.buttonOrange {
  @include buttonColor(orange, brown);
  @include buttonContainer;
}