JavaScript で if 文を書くとき必ず波括弧を書くべきと主張しているスタイルガイド

新人さんの JavaScript のコードレビューをしていて、 if 文の本体部分を波括弧で囲っていないコードを見つけた。

おれは本体が一行しかなくても必ず波括弧で囲うようにしており（そのほうがわかりやすいと思っているから）、できればそうして欲しいけど個人の好みを押し付けるのはよくないので、広く支持されているコーディングスタイルガイドの類いで同様の主張をしているものが無いか探した。

Google とか Mozilla とか GitHub あたりのドキュメントを眺めてみたが if 文の波括弧についてはっきり言及している箇所を見つけられずにいたら、該当するドキュメントをいくつか教えてもらった。

• http://contribute.jquery.org/style-guide/js/#spacing
  • if/else/for/while/try always have braces and always go on multiple lines.
• https://github.com/airbnb/javascript#blocks
  • Use braces with all multi-line blocks.
• http://www.jshint.com/docs/options/#curly

追記: あと https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Coding_Style にも載っていた。

Always brace controlled statements, even a single-line consequent of an if else else. This is redundant typically, but it avoids dangling else bugs, so it's safer at scale than fine-tuning.

@kyanny jQueryのコーディング規約などどうですか http://t.co/s3494YA9Ie 「if/else/for/while/try always have braces and always go on multiple lines.」

— ルイボスティー (@hanachin_) June 2, 2014

@kyanny あとはAirbnbとか https://t.co/OKhUJLlfF2 「Use braces with all multi-line blocks.」(権威あるかはわからないですが

— ルイボスティー (@hanachin_) June 2, 2014

@kyanny 『JavaScript: The Good Parts』 の付録 C.7 (とその体現である jslint)、 jslint のよく使われているフォーク版(?) jshint の curly オプションとかですかね http://t.co/PYXLUokXJ9

— Takuto Wada (@t_wada) June 2, 2014

Chromecast SDK で画像を一枚表示する最小限のサンプル

Chromecast を買ったので SDK で遊んでみた。

Happy casting! https://dl.dropboxusercontent.com/u/4289117/cast/sender.html

ソースコードはこちら https://github.com/kyanny/chromecast-demo/tree/master

Google Cast 拡張をインストール済みの Chrome ブラウザで上記のページを開くと、キャストするデバイスを選ぶウィンドウがポップアップする。デバイスを選ぶと我が家の猫の写真が表示されます :)

デモ動画その1: Sender アプリケーション側。右側にあるのは Chrome DevTools のコンソールで、デバッグ用に仕込んだ console.log が流れている（なんか映像がボケてて見づらいけど...）

デモ動画その2: 上記の操作をしたときテレビに写真が表示される様子。 Receiver アプリケーションは Default Receiver を使っているので実装ゼロ。奥さんに協力してもらって撮影したが、テレビ画面の明るさにあわせたら MacBook のディスプレイが光りすぎてしまった。

参考にしたもの: 公式のドキュメントとサンプルアプリケーション。 https://developers.google.com/cast/docs/chrome_sender https://github.com/googlecast/CastHelloVideo-chrome

公式の Developer's Guide は順を追っているもののやや断片的で、全体像が見づらい。何も考えずにコピペしてたらいろいろ動かなくて悩んだ。

一方で GitHub 上にあるサンプルアプリケーションは包括的なぶん盛りだくさんすぎて、必須の実装がどこまでなのかわからず悩んだ。 HTML 側もそれなりに凝った作りになっているので、 JavaScript をコピペするだけですんなり動くものでもなく、苦労した。

あと、 Default Receiver にmedia として画像の URL を渡すときは MIME TYPE も正しく渡してあげないと画面に表示されないので注意。

Play with Capybara from interactive shell

Interactive shell like irb or pry is best friend to learn how to write code in programming language. Playing with Capybara from interactive shell session also very good to get used to Capybara's powerful API.

You can load Capybara from irb/pry console, but it requires some additional setup. Instead of it, just put a prepared executable script and run it from the shell.

$ capybara example.com
including Capybara::DSL in the global scope is not recommended!
Visit to http://example.com

Frame number: 0/2
[1] pry(main)> page.title
=> "Example Domain"
[2] pry(main)> page.has_css?('h1', text: 'Example Domain')
=> true
[3] pry(main)> find(:xpath, '//p[1]').text
=> "This domain is established to be used for illustrative examples in documents. You may use this domain in examples without prior coordination or asking for permission."

This tiny script is build on pry and poltergeist (phantomjs driver of capybara).

Capybara console

jq で条件にマッチするデータ構造だけ出力する

$ curl http://b.hatena.ne.jp/entry/json/?url=http://localhost/ | \
  jq '.bookmarks[] | if .user == "otsune" then . else empty end'
{
  "tags": [],
  "user": "otsune",
  "timestamp": "2013/02/26 16:43:11",
  "comment": ""
}

• bookmarks というキーに Array で各ユーザーのブックマーク情報が入っているので .bookmarks[] フィルタで抜き出す
• | でフィルタをチェインさせる
• if-then-else でマッチさせたい条件を記述する。条件判定部のフィルタはブックマーク情報を表すオブジェクトのコンテキストで評価されるので .user のように指定する
• マッチしたものをフィルタリングせず全部出力するには単に . フィルタを指定する
• if-then-else は else 節が必須だがマッチしない場合は何も出力しなくてよいので empty を使う。空文字列などを指定するのに比べて無駄な出力を減らせる

Book: ステートフルJavaScript ―MVCアーキテクチャに基づくWebアプリケーションの状態管理

ざっと流し読みしたけど、いまいちだった。深く読み込めばもっと得るものもあるのかもしれないが、この本を精読するよりは他の本を読みたい。

JavaScript によるクライアントサイドアプリケーションはステートフルなオブジェクトで構成されるので、状態を持つがゆえにテストもデバッグもしづらいらしい、ならばステートフルを飼いならすためにそれが一体どういうものなのかちゃんと学ぼう、と思い、タイトルにひかれて買ってみた。が、実際にステートについて触れている箇所はあまり多くなく、期待はずれだった。

この本の原題は「JavaScript Web Applications - jQuery Developers' Guide to Moving State to the Client」で、これなら jQuery の話が中心でも仕方ないかな、という気はする。ただ、最初からこういう書籍名だと知っていたらたぶん読もうとは思わなかった。

MVC についての説明で「コントローラーの実装に特別なツールは必要ない」とか言いだして jQuery でオレオレコントローラークラスライブラリを実装し始めたり、リレーショナルでもなんでもないデータ構造へのラッパーを「ORM」と呼んでいたり、微妙だなーと感じるところが多かった。

原著が書かれたのは三年前なので MVC フレームワーク解説のチョイスもちょっと古い。 JavaScriptMVC や Spine について日本語で書かれている文献は少ないだろうから、場合によってはありがたい本なのかもしれない。どちらも興味が無かったので読まなかったが。

JavaScript によるクライアントサイドアプリケーション開発という分野は進歩が激しいので、二、三年前でももう内容が陳腐化してしまうんだな、という学びはあったが、モジュール性を高める設計とか CommonJS への言及とか、扱っているトピックは興味深いだけに、実装がモダンになりきれていないのが残念だった。

ステートフルJavaScript ―MVCアーキテクチャに基づくWebアプリケーションの状態管理