僕がShibuya.jsに参加してきたたったひとつの理由

Mar 9, 2011

今日は仕事を抜けだして、JavaScript の勉強会「Shibuya.js」に参加してきました。今回のテーマは「JavaScript でのテスト」ということで、@t_wada の t は Test の t として有名な和田さんはじめ、そうそうたるスピーカーの方々のありがたいお話を聞けて幸せでしたー。感謝！

ちょっとまて。

僕の仕事はそもそもサーバサイドで JavaScript とか一切書いてないし、JS に限らずそもそもテストとか書いてない。間違いなくあの場で僕が一番の場違い参加者だったでしょう。じゃあなんでそんな僕が、補欠者数が参加者数を上回る人気イベントにわざわざ参加したのかって？

これくらい未知の領域でも勉強会行くのは怖くないよ！

新卒準備カレンダーに限らず、勉強会いいよいいよと言われてますね。でもやっぱりなかなか勉強会に行くというのは最初は腰が重いもの。自分がわかるのなんて ◯◯ しかないし、◯◯ の勉強会なんてそんなにやってないし、やっててもなんかすごそうな人しかいないし。。。とかを言い訳にしてまぁいいやと思ってた時代が僕にもありました。

でも、興味のあることだったら今たとえ大した知識がなくても飛び込んでみるといいですよ。僕が今回 JavaScript を選んだのは当然理由があります。真面目な話、今まではブラウザで動く言語というだけだったのが、サーバサイドにも、クライアントアプリケーションにもどんどん広まりつつあります。否が応にも JavaScript の相手をする時期は近いなぁという感覚と、何度かチャレンジしてはうまく書けず終わっていった JavaScript をそろそろ書ける様になりたいと思っていたところだったので、たまたま Twitter で ATND の告知を見たときにこれは行くしか無い！と思ったわけです。

ところがどっこい、アジェンダに書いてあることがさっぱり分からない。これは行ってもなんにもわからないんじゃないか。。。そう思いましたが、恥を恐れず突撃してみました。そう、こんなレベルでも勉強会って行けるんだよ！と書くためにぃぃ！

phantomjs 入れてみた

JS でのテストについてみなさんかなり分かりやすく話して頂いたので、初心者でも理解できました(マジ)。ブラウザのテストってどうやるんだろうと思ってましたが、ガチで実際のブラウザを使ったテストとかもあるんですねー。ホント IE とか IE とか IE とか IE とかさえ無ければいいのにですね。

そして t_wada さんの発表を聞いて、phantomjs というのが熱そうだなと思いましたのでさっそく手元の Mac にいれてみました(CentOS は Qt4.7 の rpm がみつからなかったのでとりあえず保留)。

Mac に入れるのは相当簡単で、下記のページに従って Xcode、Qt の順で入れた後に、qmake してあげるだけ。git ないとか言う人はさっさと homebrew で入れましょう。

$ git clone git://github.com/ariya/phantomjs.git && cd phantomjs
$ qmake -spec macx-g++ && make

BuildInstructions – phantomjs – Build Instructions – Project Hosting on Google Code

では、さっそく動かしてみましょう。phantomjs というのは要はコマンドラインから起動できるブラウザなので、適当に URL を与えると HTML を取得してくれて、さらにその上で JavaScript を動かすことができるらしいです。こちらのコードをそのままお借りしてみました。感謝。

[~/js]$ ./phantomjs/bin/phantomjs.app/Contents/MacOS/phantomjs google_search.js riywo
"id", "title", "url"
http://www.google.co.jp/extern_js/f/CgJqYRICanAgCyswRTgALCswWjgALCswDjgALCswFzgALCswJzgALCswPDgALCswUTgALCswCjgAQB0sKzAWOAAsKzAlOM-IASwrMEA4ACwrMEE4ACwrME04ASwrME44ACwrMFQ4ACwrMGk4ACwrMBg4ACwrMCY4ACyAAjaQAjI/Ywg0O5q6xFI.js:5 SyntaxError: Parse error
0,"りーお＠DeNA (riywo) on Twitter","http://twitter.com/riywo"
1,"","http://twitter.com/riywo"
2,"riywo","http://twitter.com/riywo"
3,"As a Futurist…","http://blog.riywo.com/static/"
4,"riywo.com - INDEX","http://riywo.com/"
5,"退学して就職した2009年をやっと振り返ってみた - As a Futurist...","http://blog.riywo.com/2010/01/02/085255"
6,"はてなブックマーク - riywoのブックマーク","http://b.hatena.ne.jp/riywo/"
7,"riywoさんのプロフィール - はてな","http://www.hatena.ne.jp/riywo/"
8,"Under "As a Futurist..."","http://riywo.tumblr.com/"
9,"riywo Presentations","http://www.slideshare.net/riywo"
10,"riywo on USTREAM: This is riywo's channel..","http://www.ustream.tv/channel/riywo"
11,"Flickr: riywo's Photostream","http://www.flickr.com/photos/riywo/"
...

[phantomjs] コマンドラインから Google 検索の全結果をスクレイピングして CSV 形式に保存するやつ – laiso

なんか SyntaxError とか Twitter が 3 つくらいでてますが、とりあえずいい感じっぽいですね！

懇親会はクックパッドならでは！

そういえば書き忘れましたが、今回会場はあの有名なクックパッドさん！何と勉強会やってるうしろには巨大なキッチンがあって、そこで懇親会用の料理を作ってましたよ！懇親会ではそれをおいしく頂きました。クックパッドさん感謝！

ぼっちで突撃したのでどうしようあわわと思ってましたが、@t_wada さんや@sugyan さんや@deeki さんにお話させて頂き、生きた心地がしましたありがとうございます。やー、JS やらんといかんね。。。

まとめ

勉強会は、行き始めると、すぎゃんさんのヒッチハイクじゃないですが、割と単身で突撃とかもできるようになるんですが、最初が腰重いですよね。でも「この勉強会ならいけるかも、あ、でも気づいたら定員埋まってる。。じゃあいいや。。」とか繰り返してるといつまでたっても行けないです。興味あると思ったら、今の知識は関係なくとりあえず行ってみるのがいいです。何回か行ってれば勉強会ってのがなんとなく分かってきて、ますます行きたくなってきます。

ただし、丁度今日西尾さんがエントリに書かれていた様に、「聞きに来ただけ」じゃみんながハッピーじゃないです。僕が思うにこうやって「行ってきたエントリ」を書くのが一番お手軽で後にもつながる「Give」じゃないかなと思います。

焼畑農業をやめるために—新卒準備カレンダー 2011 春 – 西尾泰和のはてなダイアリー

というわけで「ブログを書くまでが勉強会だよね」とか言ってしまったので、これでやっと寝れます。発表者の皆様、会場＆料理の提供頂いたクックパッドさん、参加者皆さん、ありがとうございましたー！