Line 1: Error: Invalid Blog('by Esehara' )

または私は如何にして心配するのを止めてバグを愛するようになったか

>> Zanmemo

あと何かあれは 「esehara あっと じーめーる」 か @esehara まで

yeomanを使って簡単なjquery pluginを作ってbowerに登録する

はじめに

前までは、どちらかというとAPIよりの開発をすることが多く、あんまりフロントエンドのことを気にかけることがあまりなかった。とはいえ、それを知らないのもアレだろうと思ったので、yeomanを使ってみることにした。

とはいえ、何かを作るにしても、「何を作りたいか」という題材が必要かな、と思ったので、そういえば昔にjquery-kabukiというのを作ったときに、やたらと文字をピカピカさせる部分だけ流用されていた。

文字列を気軽にピカピカさせることには本当に一部の需要があるらしく、エコシステムの勉強がてら、その辺について調べることにした。ちなみに、最終的に出来たのは、下のものになる。

yeomanについて

いわゆる「フロントエンドの雛形全般を作るためのツール」といったほうがいいかもしれない。yeomanのgithub pageを見れば、どういうものの雛形を作ってくれるのかがわかる。例えば、angularやbackboneの雛形も作ってくれる。概要としては、下の記事がわかりやすいかもしれない。

静的なHTMLサイトなんかを作るためだけに、こういう雛形を作るようなモノを使う理由というのが、いまいちピンとこなかったりした時もあったんだけど、改めて触れてみると、現状として、どういう構成がモダンなのか、というのがはっきりと分かったりする。

いまフロントエンドで何かをやろうとすると、通常grunt + bowerという組み合わせになると思うのだけど、これらを一から定義して何かやろうとすると、すごく学習コストがかかるので、雛形から逆算して勉強することはいいことかもしれないと思ったりした。

今回の場合だと、generator-jqueryを使うことで、jquery pluginのひながたが出来る。これらのgeneretorは、nodejsのパッケージマネージャであるところの、npm経路でインストールする。もし、一つだけ不満があるとするなら、パッケージとして、npm install -g generator-jqueryとするのはどうなのか、と思うけれど、些細なことかもしれないので、あまり気にしないことにしている。

generator-jqueryの雛形で面白かったところ

generator-jqueryの雛形で面白かったところは、ある関数の引数をオプション的に指定したい場合、擬似的にオブジェクトを渡したりする。例えば下のような感じ。

var foo = {bar: 100};
foobar(foo);

で、以前までは、そのオブジェクトにキーが存在しない場合をわざわざ調べてセットしなおす、みたいな泥臭い関数を定義していたりしたのだけれど、下の書き方で簡潔にかけることが分かった。

var default = {bar: 100};
var hoge = function(options) {
  options = $.extend({}, default, options);
};

もしかしたら常識的なことかもしれないけど、こういう使い方ができることを始めて知って「へー!」とか思ったりしていた。

github pagesをwebappで二階層にする

ただ、このgenerator-jqueryは便利な一方で、だいたいこういうpluginとかは、現状としてGitHubにまかせることのほうが多い気がする。そして、基本的にはブラウザ上のことだから、挙動を確認できるサンプルページが欲しいと思う。だけど、困ったことにgenerator-jqueryは、その辺については考慮がされていない。

yeomanの公式サイトにはGitHub pagesの作り方が書いてあって、要するに普通は、distをgit subtreeするという方法を取るらしい。そこらへんに関しては二重に定義して、シンボリックリンクを作ればいいだろうということで解決している。

例えば、今回のjquery-pikapikaだと

/jquery-pikapika/
/jquery-pikapika/statics/

といった感じで二階層にし、statics配下でgenerator-webappを使うようにした。

ただ、気をつけなければいけないのは、シンボリックリンクでも適切にbuildはされるんだけど、generator-webappのjshintの設定として、"use strict"が指定されていないと弾く、という設定があって、ただgenerator-jqueryだと、その辺が考慮されていないため、そのままbuildしようとすると、そこで引っかかってしまう。

なので、jshintの設定ファイルであるところの、.jshintrcから該当する設定を消していたほうがいいとは思う。

bowerに登録する

あとは、エコシステム絡みで言うと、フロントエンドだとbowerというものがあるらしい、ということを恥ずかしくも知ったので、下の記事を読みながら勉強したりした。

つまり、フロントエンドも、こういうものを利用して、パッケージ管理しようというっぽい。知人がbowerに登録されていると便利だよ～といっていたので、その登録もしたりした。

まとめ

というわけで、改めてyeomanを使ってみて、便利でいいな、と思う。あと、自分が割とアップデートしていなかった知識なので、世の中進歩しているな、と単純に思った。

こういう雛形は、ベストプラクティスみたいなものが詰まっているので、ここから「どういう風な構成を作るものなのか」ということをリーディングしていくと、今のフロントエンド事情とか分かっていいのかなと思ったりした。

最近は、MEANというのもあるようだし。