grunt.loadNpmTasksをpackage.jsonから自動で読み込む

node.js

grunt.loadNpmTasksをいちいちGruntfileに追加するのが面倒だったので、以下のように書こうと思ったのだけど。

Gruntfile.coffee
pkg = require 'package.json'

for key of pkg.devDependencies
  grunt.loadNpmTasks key if /^grunt-/.test key # or /^grunt-contrib/

多分普通の人の環境なら意図した動作になる……のだけど、私の管理しているリポジトリではgrunt-cliをグローバルにインストールせずリポジトリごとのローカルにインストールして使っているので、この記述だとgrunt-cliまで読み込まれてしまう。
まあちょっと正規表現書き換えれば良いだけなのだけどなー。もしくはグローバルにgrunt-cliをインストールしてしまうか。それが普通なんだし。

/^grunt-(?!cli)/

とかね。

Jadeでループ出力

Jade

Jadeで静的なリストなどをループで出力したい場合、以下のように書くとできるみたい。

doctype 5
html
  head
    meta(charset="utf-8")
    title jade
  body
    ul
      - for (var i = 0; i < 5; ++i) {
        li
          img(src="//placekitten.com/100/100",width="100",height="100",alt="cat")
      - }

ハイフンの位置を気をつけないとかも。最初、以下のように書いてしまったので。

    ul
    - for (var i = 0; i < 5; ++i) {
      li
        img(src="//placekitten.com/100/100",width="100",height="100",alt="cat")
    - }

これだとulの配下にliは入らずに、ulと同じレベルにliが入ります。


連番idを付加したい場合は、

img(id="#{i}",src="...")

で良いみたい。

img##{i}(src="...")

はさすがに駄目だった。

Snow Leopardでnodebrewを使ってnode.jsがインストールできなかったのを修正してもらった

node.js Mac

Snow Leopardの環境にnode.jsをインストールする必要があって、バージョン管理したいわけではないのだけどターミナルからインストールするのが楽なのでnodebrewを使ってインストールしようとしたら、インストールに失敗したのですが。

どうもunameを実行したときに出力されるアーキテクチャがi386で、nodebrewはi686という文字列で判断していたらしく、そのせいでインストールできなかった模様。
というわけで修正してもらったのでした。やったね。

9月のまとめ

misc

だんだんと気温も低くなってきて過ごしやすくなってきた一方、ときどき寒い日もあり……
という感じで9月も終わってしまいました。あと今年も2ヶ月とは。なんか去年と比べて成長してない気がしてきた。

やったこと

  • 新潟から東京に引っ越しした
  • YAPC::Asia Tokyo 2013に参加した
  • ltsv.jsのver.0.7.0をリリースした
    • ブラウザでも動作するようにした
  • Mochaのxitについて書いた
  • ClosureLinterが落ちるコードについて書いた
  • Grunt関連について書いた
    • grunt-bower-taskでプロジェクトルートにライブラリを配置する方法
    • grunt-contrib-watchでlivereloadをする方法
  • CodeIQについて書いた
    • 転職について
    • 「Restricted Words」での自分の解法
  • JavaScriptのMVCフレームワークをいくつか試した
    • 試して学ぶBackbone.js入門を読んで試した
    • knockout.jsを試した
    • ドットインストールの「AngularJS入門」を観て試した


今月は大体こんな感じ。9月に入ったらまあまあ落ち着くだろうと踏んでいたのですが、初めての引っ越しでてんやわんやでした。全然落ち着かなかった。
今もまだ部屋がめちゃくちゃだったりするのだけど……
でもあと数週間もすれば慣れてくる……と思う。思いたい。


それよりもちょっと精神がダメージ受けてるというか。なんだか寂しい感じがする。
以前にも（3,4年くらい前？）人恋しくなったことがあったのだけど、そのときは数週間くらいですぐ治った。今回もすぐに治ってくれるとうれしいのだけど、3,4年でいろいろあったしどうかなあと。


とかまあ、それどころじゃなくてスキル上げていかないと住む場所すらなくなってしまうので、勉強会とか今まで以上に参加したりとかアウトプットしたりとか、いろいろしていけば紛れるし、治るんじゃないかなーと。
てか作ろうとしてたやつ早く作らないと今年が終わってしまうなあ。早く作ろう。

ドットインストール AngularJS入門

dotinstall JavaScript


より。


backbone.jsとknockout.jsを少しやってみて、angular.jsもちょっと気になったのでドットインストールで勉強してみたり。
なんかこう、未だにMVCってよくわかってないんだけど（Viewだけはわかる、かな）尚更わからなくなった感じ。
jQueryだけでごちゃっと書いちゃうとメンテがあああというのはわかるのだけど。って書いててちょっとわかったかも。


あ、既存のサイトのコード見てみればいいのかな。ミニファイされてなければまあまあ読み取れそうだし、得られることが結構あるかも。

knockout.jsの練習

JavaScript

backbone.jsの勉強をしようと思っていたのだけど、今作ろうとしている物に対しては大きすぎるという感じがしたので、knockout.jsも勉強することに。
knockout.jsはbackbone.jsよりも軽量っぽい。てかMVVMだからそもそもbackbone.jsと違うアプローチのライブラリなのだけど。
一応、チュートリアルを二つほどやって（訳もわからないまま）、ドキュメントを見ながらまた自分で書いたりしているところ。
以下はそのメモなど。コードはJavaScriptで、あとHTMLを書くのは面倒なのでjadeで書いています。

基本的なところ

index.jade
doctype 5
html
  head
    meta(charset="utf-8")
    title knockout.js
  body
    script(src="http://knockoutjs.com/downloads/knockout-2.3.0.js")
    script(src="../index.js")

こんな感じのjadeテンプレートを用意して、これを加筆・修正していきます。


さっそくindex.jadeに以下を追記。

   body
+    p(data-bind="text: language")
     script(src="http://knockoutjs.com/downloads/knockout-2.3.0.js")


index.jsに以下を追記。

index.js
var profile = {
  name: 'sasaplus1',
  language: 'javascript'
};

ko.applyBindings(profile);

これでブラウザを開くとjavascriptと表示されるんじゃないでしょうか。


ko.applyBindingsにはオプショナルな第二引数があるようで、バインドする対象のDOMを指定することが出来るようです。

index.jade
   body
-    p(data-bind="text: language")
+    p#p1(data-bind="text: language")
+    p#p2(data-bind="text: language")
     script(src="http://knockoutjs.com/downloads/knockout-2.3.0.js")
index.js
-var profile = {
+var profile1 = {
   name: 'sasaplus1',
   language: 'javascript'
 };
+ 
+var profile2 = {
+  name: 'sasa+1',
+  language: 'delphi'
+};
 
-ko.applyBindings(profile);
+ko.applyBindings(profile1, document.getElementById('p1'));
+ko.applyBindings(profile2, document.getElementById('p2'));

とすると、javascript, delphiと表示されます。


あとは面倒なので記事には書かない。

YAPC::Asia Tokyo 2013に行ってきたよ

misc Perl

YAPC::Asia Tokyo 2013に行ってきました。普段Perl書かないのだけど。
あ、あと前職の運用の人にばったり会ったりしました。

1日目

新潟で健康診断を受けてから東京へ。
着いたら17:00過ぎでLTしか聴けなかった……でも懇親会楽しかった + 美味しかったです。
[twitter:@mf_ham]さんに声をかけられたりしました。同い年なのに社会人歴が全然違ったので、歳を取った感じがしたり……
[twitter:@jewel_x12]さんと[twitter:@shogo82148]さんとシーパンオーサー[twitter:@hayajo]さんとお話しました、ってNiigata.pm/NDS常連メンバーですな。Niigata.pm in TOKYO的な。

2日目

2日目は朝から。と言ってもちょっとだけ開始には遅れましたけど。

  • Perlで書く結合テスト
  • git flux - 結果的なブランチ管理
  • フロントエンド向けビルドツールGruntがバックエンド開発でも意外と使える！
  • ランチセッションC
  • ランチセッションD
  • YAPC::Asia Tokyo 2013 特別座談会「Rubyの良いところ語ってください〜そんなPerlで大丈夫か？〜」
  • 本当にあったレガシーな話
  • スマフォアプリ開発を支える認証認可アーキテクチャ
  • PhantomJSによる多岐にわたる広告枠の確実な表示テスト
  • フルテストも50msで終わらせたい〜FreakOutの取り組み〜

を聴きました。

ランチセッション


銀ダラ美味しかったです。

Noder

何故かわからないけどNoderが数名集まっていたりしました。

このあと[twitter:@yosuke_furukawa]さんとお話したり。東京Node学園祭2013で発表するらしいので必見ですねー。


飲み会

クロージングも終わり、HUBへ。大学内にバーだと……と思いながら。
[twitter:@aokcub]さん、[twitter:@shogo82148]さんと[twitter:@kazuph]さんと[twitter:@saisa6153]さんと飲みながら、言語の話とかいろいろ。

ノベルティ

ノベルティ沢山でびっくり！

なかなかの大きさで作りもしっかりしているスカイアークバック（？）が気に入りました。
肩にかけても良し、手に持っても良し。デザインもシンプル。ついでに以前makeboothからもらった、（アイコンがアイコンなだけに目立たない）Twitterアイコンの缶バッジを付けて歩いてました。
ってノベルティのページがあったんですね……YAPC::Asia 2013 パンフレット＆配布ノベルティを全て紹介 | YAPC::Asia Tokyo 2013

感想とか

Perl書いてないので退屈するのかなあと思ってたのですけど、そうでもなかったです。
Perlに関する発表だけではなかったので、楽しめました。


次回のYAPC::Asia Tokyoがあるのか気になるところですが……
次も行きたいなあと思うのでした。