旧それなりブログの跡地、画像やスタイルやJSなどが壊れてることがあります。

jQueryプラグインを作りつつ開発環境パワーアップ！

2013年7月4日

jQuery ImageIndexer という jQuery プラグインを作成しました。

画像をキーで管理したり、
複数が画像まとまったものの一部を切り取って jQeury 要素として返したり、
というライブラリです。

アイコン集とかキャラチップ・マップチップは大抵 1 枚の画像になっているので、
それをイチイチファイルとして切り取るのが面倒なので作ったという経緯です。

JavaScript 開発環境整備の一環

モノとしては、すぐできちゃうようなものなのですが、
今自分は、JS の、主にテスト周りの開発環境を整備していて、
その練習として色々なことをやってみました。

開発用の環境設定やデプロイ方法・コマンドの使い方などは
全部 README に残しているので、
興味が有ったら是非 GitHub のリポジトリを覗いて下さい。
Issues にコメントくれたり、Pull-Request を発射してくれたりすると大層喜びます。

大体、こんな構成です。

  • mocha – JSテストフレームワーク
  • expect.js – アサーションライブラリ、asset()してくれる
  • Sinon.js – テストダブル用ライブラリ、モックとかスタブとか
  • Testem – テストランナー、CI テストも出来た！複数ブラウザ x jQuery複数バージョン という tox みたいなのもギリギリ出来てる
  • Grunt – 主にビルドに関するタスクランナー
  • grunt-testem – Testem と連携するための Grunt タスク、手で書くと大変です
  • CoffeeScript – 現仕事でも使ってる、もうこれなしにはイキテユケナイ

後は、ついでにこの辺も使ってみました。

RequireJS も使いたかったけど、
JS を 1 枚にまとめた時に動かす方法がわからなくて止めました。

参考リンク

まずはこれらの記事の真似から入りました。あざーす！

require.js 環境で mocha + expect + testem を使った JavaScript テスト
フロントエンドJavaScriptにおける設計とテスト

その他、参考にした記事群です。あざざーす！