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というのもあるようだし。