2014年総括

mixiやってた頃から毎年こんなのを書いてる気がするので今年も書いてみます。

今年初めて出来たこと

• ガロリアマンドリンオーケストラに所属し東京での音楽活動が出来た
• マンドリン合奏コンクールに出た。コンクールというものに出たのは21年前に出たピティナ以来なので初体験ということにしておく。
• ガチのハッカーがビズリーチにjoinして一緒に仕事した
• 自分のキャリアの中で初めて事業に直接関与しない部署に所属し後方支援の仕事をした（2014/1〜2014/6)
• 社内勉強会で毎週LTするのを3ヶ月続けた
• 新卒に3日でjs + jquery教えるという無謀なことをしたら案の定「早過ぎる」という苦情を新卒から受けて涙目になる
• fluentd + elasticsearch + kibanaを現場に導入してSlow query駆逐に貢献した
• Swiftを触った（βの頃）
• リモートワーク始めて自宅引篭り属性が付与された

職場

• Rubyを学んだ
• CoffeeScriptを学んだ
• Railsを学んだ
• 仕事でRailsを使ってアプリをこしらえた
• GithubでPR駆動開発をした
• RubyMineのキーバインドが使い物にならないのでこの後めちゃくちゃカスタマイズした
• Kotolin勉強会でメガネが似合う某Kotolinアイドルとのじゃんけんに勝利しInteliJ IDEA Ultimateのライセンスをタダでもらった
• 男友達とだけで箱根旅行した

ふね

• 練習のためだけにクソgemを書いたが封印した

今年やろうとしたができなかったこと

• 前職で社内の技術支援の仕事をしていながらほとんど成果を出せなかった
• OSS活動するぜとかgem作るぜとか言ってたが何一つ公開できなかった
• 2014年中に新しいwebサービスを公開しようとしたが何一つ公開できなかった
• Swiftでiphoneアプリ活動再開するぜとか言ってたが何一つやらなかった
• Kotolin書かなかった（しょぼちむさんたろうさんイケメンさんごめんなさいごめんなさい）
• アマチュアギターコンクールに挑戦しようとしたが時間的に余裕が無く参加できなかった
• クラシックギターの独奏レパートリーを常に10曲ぐらいにしようとしたが1曲も増えなかった
• クロスバイクで多摩サイ爆走しようとしたがあまり乗れなかった
• 今年入ってから体重70キロを超えていたことに危機感を覚えて60キロ台に戻そうとしたができなかった

今年の反省点

• 悪い意味で内向的になり過ぎて自分の力だけで成果を出そうとして失敗した局面が多かった
• プライベートで色々やろうとしすぎて中途半端になってプログラミング活動と音楽活動の両立に失敗した
• ブログあまり書けなかった（その分Qiitaは結構書いた）
• 勉強会でほとんど発表できなかった
• 自分の気持ちを落ち着ける時間を蔑ろにしていつも予定を詰め込んでいたせいか心が不安定な時が多く周囲に迷惑をかけた
• プライベートの時間をダラダラ過ごしすぎてしまいプライベート活動に割ける時間が少なかった
• リモートワークで働き過ぎて常に今年10月以降は日常的に疲労感が抜けなくなっていた
• 赤城さんとケッコンカッコカリできなかった
• 食生活悪すぎて大して食べてないのに体重増えすぎた

来年の展望

• 自分がやりたいことを実現するために自分の力だけで実現しようとするのではなく周りをきちんと巻き込む
• プライベートの時間を有効活用することを心がけ、ダラダラニコ動観たりして時間つぶさない
• 何に集中するかを選択して「今やるべきではない」と判断した活動は一切しない
• ヴァイオリン始める
• 1日1日を大事に生きる。気がつけば20代最後の年なのでもはや人生は残り僅か。
• 今時のフロントエンドjsを真面目に学ぶ。まずはAngularjsとgulp入門する（今更感すごい）
• 仕事でのDeveloperProductivity向上のために積極的にできることをする
• 勉強会LTしないなら出ない、出るならLTする
• クラシックギターのソロ曲のレパートリーでネタ曲5曲、ガチ曲5曲の計10曲用意できるようにする
• アマチュアギターコンクール2015のテープ審査に応募する
• gemリリースするぞ！
• Qiitaだけでなくブログを毎週書いてなんでもいいからアウトプットし続ける
• 赤城さんとケッコンカッコカリする
• 青葉ともケッコンカッコカリする

盛岡に引っ越して一ヶ月が経った

一ヶ月が経ったらブログに所感を書こうと思っていたんですが、思いの外書くことがなくて困りましたが、とりあえず生存報告も兼ねて書いてみます。

寒い

「盛岡とは言え10月ならまだそこまで寒かないし東京圏から引っ越してもそこまで気温差ないだろう」と思ったら引越した初日に台風に直撃されたこともありめちゃくちゃ寒く、翌週から普段着てるものにプラス１枚着る生活に。盛岡先輩パネェっす。
最近も日々寒くなりつつ有りますが、まだファンヒーターを出さずとも重ね着で何とかしのいでおるレベルであります。

普段の生活は殆んど変わらない

自宅で仕事してるので当たり前ですがｗ
食事はだいたい自炊、たまに外食。週に１回仕事後にマンドリンオケの練習。そんな感じです。

２つの勉強会に参加しました。

「IWDD」

エンジニア・デザイナー向けの毎月開催されている勉強会で、次回で97回目を迎える歴史の長い勉強会です。

参加者は盛岡市内or近郊？で働くフリーランスのエンジニア・デザイナの方が中心のようでした。

自分は前回の第96回に参加して、簡単な自己紹介のLTのようなもの＋岩手県内のエンジニアコミュニティ事情の情報交換をさせて頂きました。

このブログでも書きましたが、岩手でrubyのコミュニティが無いようだったのでiwate.rbみたいなのを開催したいという野望があったので、今時点での需要調査みたいなものも兼ねてやってみたんですが、

• 岩手県内の勉強会は参加者が少ない
• そのため大体どの勉強会に行っても同じ顔と会うｗ
• iwate.rbも昔あったけど参加者が少なかった
• なのでIWDDでまとめてやるのが早いのでは？

…というような感じだったので、とりあえず次回のIWDDで一枠もらって、私がrubyについて何か語って反応を見てみる予定です。

私もruby歴というかrails歴半年とかそういうレベルなので、とりあえず今まで自分が勉強してきたことのまとめ的な「rubyのここに惚れた」みたいな、渋谷javaでも話したようなネタをまたやってみたいと思いますｗ （そういえば１年半ぐらいのスパンで仕事で使うメインの言語変わってるんですね私）

「いわてTitanium勉強会」

Titaniumのハンズオン+フリートークという構成の勉強会で、今年から始まった新しい勉強会のようです。

こちらの勉強会は参加者の年齢層が非常に若く、今年で28の私が最年長という、何とも若々しいコミュニティで、岩手県立大学の現役の学生、或いは卒業生が中心（というかみんなｗ）でした。

開催しているのは盛岡市内のベンチャーである株式会社チイキットのメンバーで、先日こちらの会社の @isseniumさんと呑んだ時に教えてもらい参加しました。

スマフォアプリはネイティブでiphoneアプリ、androidアプリの両方をちょろっとやったことある程度で、Titaniumは環境構築でハマって挫折した経験しかない私でしたが、流石にハンズオンということもあり変なトラブルにハマることなく定番のTodoアプリの実装を通してTitaniumのAlloyフレームワークの使い方を知る、という内容でした。

初めてTitanium触ってみましたがviewをHTML + CSSライクに書けるのは直感的というか学習コスト低くて良さそうですね。
ただTitanium Studioの最新版が少し不安定なのと重たい(Ecipseベースだから？)ので、みんなどうしてるんかなと思ったらTitanium Studioは使わないで好きなエディタで書いてコンパイルはTitaniumのCLIツールでやる人が多いんだとか。
jsではなくCoffeScriptでロジックを実装する場合もCLIツールでビルドという流れのようなので、gruntでビルドするような場合とかも考えるとエディタとしてTitanium Studio使わない方が自由度高くて良いのかも、という気がしました。

今後について

まだ盛岡でノマドしてないので今月はどこかでやろうかなと。

先月は固定回線の開通が引越し日の４日後とかになってしまったので、それまでテザリングでしのいでいたせいで月初にLTEの7GB制限ギリギリになってしまいとてもノマド出来る状態ではありませんでしたｗ

１１月になって晴れて堂々とテザリング使えるようになったので、仕事に余裕がある時はどこか行ってノマドしようと思います。盛岡市内はタダでWi-fi使える所は少ないのですが、とりあえず王道のスタバで気分転換兼ねてやってみようかなと思います。

不要品処分で役に立ったサービスまとめ

ここ３ヶ月ぐらい盛岡への引越し準備を進めていたのですが、引越しに伴う不要品処分で利用したサービスなどを紹介します

買取・不要品無料回収サービス

バイクランド

• バイク買取サイト
• 一括見積りサイトでまとめて見積もりを出してもらった所、一番査定額が高かった
• 担当者の方が査定額が高くなるポイント・下がるポイントを明確に説明してくれたので金額に納得できた
• 走行距離1万キロで中古で買ったHONDA VTR250 2009年式を買った額の7割ぐらいで買い取ってもらえた

ドクターヘルメット

• バイクのヘルメット買取サイト
• 送料着払い
• 配送用のダンボールをタダで送ってれる
• ２年前に５万ぐらいで買って常用利用してたAraiのヘルメットが1万ぐらいで売れた

ブックリバー

• 古本・DVD・ゲーム等の買取サイト
• 送料着払い
• ダンボールは自分で用意する
• 事前に買い取って欲しいISBNをwebサイトのフォームから送ると１営業日ぐらいで査定額をエクセルシートでメールで送ってもらえる
• ２～３年前に発売されたアニメのBlue-rayとかアメリカのホームドラマのDVDボックスとかをやたら高く買い取ってもらえた

ブックスドリーム 専門書アカデミー

• 専門書・技術書などの買取サイト
• 送料着払い
• 配送用のダンボールをタダで送ってれる
• 依頼すれば書籍毎の査定額を教えてもらえる（今回は使わなかった）
• 高価買取りの書籍リストをwebサイトに掲載しており、実際そのリス トにある商品を買い取ってもらえた所掲載通りの額だった
• 主に技術書やビジネス本を売ったが、普通の古本屋に出すよりは遥かに高く買い取ってもらえた

パソコン回収.com

• ITメディアの記事で取り上げられていたので使ってみた
• 一部の商品は出張買取無料なので梱包不要
• 電話したらやたら回収がかなり混んでいて電話した日から２週間後じゃないと予約できなかった
• 回収日当日の時間指定はできなかった（私は在宅人間なので関係ナシw）
• 15inch液晶とプリンタとXBOX360を無料で回収してもらった

住所移動に伴うサービス

引越れんらく帳

• 電気・ガス・水道・ネットなどの住所移動手続きをネットから一括で出来る東京電力が提供するサービス
• 現住所での利用停止・新住所での利用開始手続きができる（但し提携業者のみ）
• 自分が引っ越す盛岡の業者には対応してなかったので、今使っている電気・水道・ガスの利用停止手続きに利用した

タスク管理

Githubのissue

• 自分の適当なprivate repositoryのissueで管理していた
• メモは全部コメントに残しておいた
• 仕事中に業者から電話がかかってきてちょろっとメモりたい時とか確認したい時に便利だった

その他

24インチのディスプレイとミドルタワーのPC本体を運ぶためにデカい箱を買ったら素材もしっかりしてて良い感じだった

引越しの準備で得た知見

• 一括見積もりサイトを使うと大量の業者から平日の朝からジャンジャン電話がかかってきて最高にめんどくさかったので余程の理由がない限りオススメしない
• ネットの回線を移動させようとしたら前入所者の回線が契約されたままですぐに移動手続きができなくて手続き開始が１０日ほど遅れたので、出来るだけ早めに回線移動の手続きを始めた方がよい
• 郵便の転送サービスは転送が始まるまでに１週間ほどのバッファが発生するので早めに申し込んだ方がよい
• 同じ部屋に３年も住むと意外と要らないものが大量に貯まっていることがあるので定期的に不要品は処分した方がよい
• 単身引越であっても５００キロ以上の長距離移動になると引越し代が凄まじい事になる
• 地方都市限定の話かも知れないが、８月中旬に独り暮らし向けの物件探しをしても殆んど物件がないのでつらい

次回は盛岡から更新します

エンジニアとしての不安

（完全にぼやきですｗ）

エンジニアとして働くようになってからはや3年が経ちます（SE時代の2年半はコード書いてないのでノーカン）。

SE時代に憧れていた「コードを書いて飯を食う」ということが少なからず出来るようになってきてはいますが、それでも毎日自分の出来なさに落ち込むことが多々あります。

前職でも入社直後にDIとInterceptorをフルに使いまくったjavaのコードの追い方が分からなくて全然仕事が進まなくて落ち込んだり、しょうもないバグを埋め込んでリリース当日にパニクったりと色々やらかしてきた歴史があります。

それでもずっと続けていればミスもなくなり出来ることも増え、以前は苦労してやっていたことがラクに出来るようになったりと、成長のようなものを感じることはあります。そういう状態が続くとまぁ気持ちのよいものです。慣れた言語、FW等の環境で全力疾走出来る時ほど気持ちいい時はありません。

しかしエンジニアたるものとしては同じ環境で同じものを作り続ける訳にはいかない訳で、最近、また前職の入社直後のような「前に進めない」壁を感じています。

具体的には、ゼロからwebアプリを設計して作ることが難しいと感じています。考えてみれば今までアーキテクトとしてゼロから基板を作ったことが殆んど無かった。

今は主にRailsで仕事をしていますが、Railsでwebアプリを「とりあえず」作ることは至極簡単です。 java + strtus2より遙かにシンプルで分かりやすい。 すぐに動くものが作れる。 Ruby on Rails Guidesという素晴らしいドキュメントがある。

問題はRailsで作るwebアプリ全体のアーキテクチャで、 どういうルーティングでどういうコントローラを設計するか、 モデル（ActiveRecord::Baseのサブクラスの方）にどこまで業務ロジックを乗せるか、 helperやconcernをどう使うか、などなど。

考え出せばキリがない。考えても考もしっくり来る設計が出来ない。本当にこれでいいのか？という手探り感。 これがどうしても拭えません。

この辺も慣れの問題なのかなぁとは思いますが、今の所はよく分かっていません。 とりあえずRESTで設計することに慣れていないのでRESTの思想を勉強していく必要は感じていますが、それ以上に何が必要なのか。。良く分かりませんが、良くわからない以上は実践で学ぶしかないので今やってるプロジェクトをとにかく進めるしかない。

こういう壁に当たると、自分はよく伊藤直也さんのブログのエントリー「エンジニアの不安と壁」というエントリーを読んで自分を奮い立たせてきたのですが、今は何故かあまり楽観的に考えられないというか、色々と悩ましく考えてしまいますｗ

たまたま９月はやたら忙しくて（勉強会開催、引越の準備や色々調整、マンドリンオケ本番、友人との旅行の幹事、会社の合宿の幹事）肉体的にも精神的にも疲れてるせいか分かりませんが、10月は多少ゆったり出来る事を少しは期待したいと思います。

今更ながらTurbolinksを初めて仕事で使ってみたので色々調べてみた

※このエントリーで使用している検証環境の各種バージョンは下記の通りです。

• Railsのバージョンは4.1.4
• Rubyのバージョンは2.1.2p95
• Chromeのバージョンは36.0.1985.125 m

※このエントリーの最終更新日は2014.8.11です

2013年辺りのRails4について書かれたブログを読むとTurbolinksに関するエントリが結構多いんですね。

ざっとググって１ページ目に来るのがこれらのエントリー。

• Rails4でturbolinksを謳歌するためのまとめ [俺の備忘録]
• Rails - Turbolinksをオフしないためにやった事 - Qiita
• Turbolinks | TECHSCORE(テックスコア)
• Rails 4のturbolinksについて最低でも知っておきたい事 | KRAY Inc

そして同じぐらい目にするのが「Turbolinksをオフにする方法」

• Ruby - Rails 4 で turbolinks をオフにする方法 - Qiita
• Rails4 リンク先のturbolinksを無効にする - ayaketanのプログラミング勉強日記
• rails 4 で turbolinks を無効にする - やまぶろぐ

Railsを使ってなかった頃からtwitterとかでちょいちょい流れてくるTurbolinksの記事を流し読み程度に読んでいたのですが、色んな人が解説エントリを書くほど注目されている一方で、何故か無効にする方法がやたら充実しています。
使っていいのダメなの？？ということが外から判断できないということで、どんな恐ろしい機能なのかとjavaを書きながら横目でチラチラを見守っていたのですが、遂に今の職場で使う機会に巡りあいました。これも何かの運命でしょうか。

で、良い機会ですのでTurbolinksについてじっくり調べてみました。 さらに身を持ってその仕様を体験するためにちょっとした実験をやってみたのでその結果をご紹介します。

なお、本エントリーはRailsでアプリを作る人がturbolinksを使う時に気をつけること、というレベルでまとめたので、Turbolinksの実装の詳細についてはあまり触れていませんが、冒頭で紹介したリンク先の内容に詳しく記述されていますのでそちらを読むとさらに理解が深まると思います。

Turbolinksとは

Githubの本家リポジトリrails/turbolinks · GitHubでは以下のように説明されています。

• Turbolinksはあなたのアプリケーションを早くするよ！
• ブラウザにjs,cssをリコンパイルさせずに現在のページをActiveに保ってbodyとtitleとheadだけを書き変えるよ！
• pjaxと似てるけど、Turbolinksは何も考えずにbodyをガバっとreplaceしてくれるのでサーバ側で特別なことをせずにpjaxを使うのとほぼ同じような恩恵を得られるよ！
• もちろん（現在のページをActiveに保つということは）ブラウザ上でjsの長時間のプロセスを持続することになるので、処理の肥大化やメモリリークに気をつける必要があるけど、あなたがファンキーなことをしなければ多分大丈夫だよ！

要するにページ遷移(GETのみ）を通常のページ移動ではなくajaxで取得したhtmlでbodyを入れ変えるだけの処理に差し替えることで高速化するgemです。 似たようなことをしてくれるライブラリとしてpjaxというjqueryライブラリがあります。

Turbolinksにおけるjsの取り扱い

しかし手放しで何も考えずに入れとけばちゃんと動くというものでもないようです。

• 最初にロードしたページがActive状態であり続ける
• jsのプロセスが持続する

この事実を考慮すると今まで書いていたjsがそのまま動くのかちょっと不安になります。

例えばこんなコードはTurbolinksを使ってるページでもページ遷移毎に実行されるのでしょうか？

<script>
window.onload = function(){
  console.log('nya-n');
});
</script>

window.onloadの実行タイミングはページ全体がロードされた後のはず。 ってことは、最初の１ページ目の表示では問題なくwindow.onloadが発火しそうですが、Turbolinksが有効になっているページでページ遷移した時は動くのでしょうか？ ついでに頻繁に使う$(document).ready

迷ったら実験しましょう。

実験　各イベントはいつ発火するのか

rails4.1.4で簡単なサンプルを作りました。
サンプルコードのリポジトリはこちらです。

$ rake routes
Prefix Verb URI Pattern      Controller#Action
  root GET  /                index#index
 other GET  /other(.:format) index#other

■/views/index/index.html.erb

■/views/index/other.html.erb

■/assets/javascripts/index.js.coffee

rails sして実際にアクセスしてみます。

実験１　 index/indexのURLを指定してアクセス

1. ベタ書きしたjsの即時関数
2. assets配下のCoffeeScriptに書いた$(document).ready
3. ベタ書きした$(document).ready
4. page:change
5. page:update
6. assets配下のCofeeScriptに書いた$(window).load
7. ベタ書きした$(window).load

実験２　リンクをクリックしてindex/otherへページ遷移

1. page:before-change
2. page:fetch
3. page:receive
4. ベタ書きしたjsの即時関数
5. ベタ書きした$(document).ready
6. page:change
7. page:update
8. page:load

実験３　リンクをクリックしてindex/indexへページ遷移

1. page:before-change
2. page:fetch
3. page:receive
4. ベタ書きしたjsの即時関数
5. ベタ書きした$(document).ready
6. page:change
7. page:update
8. page:load

この結果から以下のことが言えます。

• $(window).loadはページの初回表示時のみ実行され、リンクをクリックして遷移した場合は実行されない
• $(document).readyはページの初回表示時のみ実行され、リンクをクリックして遷移した場合は実行されない
• テンプレートファイルにベタ書きしたjsはページ遷移毎に実行される
• テンプレートファイルにベタ書きした$(documebt).readyはページ遷移毎に実行される
• テンプレートファイルにベタ書きした$(window).loadはリンクをクリックして遷移した場合は実行されない

assets配下のCoffeScriptに書いた処理はTurbolinksの管理配下の挙動になり、テンプレートファイルに書いたjsはページ遷移毎にそのまま実行されるようです。
こちらの記事にも書いてありますが、ページ遷移の度にロードされたhtml内のbodyタグ内のjsタグを取得して、新規のjsタグを組み立て再度差し込んで実行させているようです。

処理的には、turbolinks本体のCoffeeScriptを読み込んだ時にAタグをクリックした際にxhrオブジェクトを作ってxhrオブジェクトからリクエストを飛ばす処理をbindしているのですが、ページ遷移時の詳細な挙動はQiitaのこちらの記事に詳しく説明されています。 CoffeeScript側のソースだけなら436行しかないのですぐ読めますので気になる方は一度全部読んでみると良いと思います。実装自体は割と素直に書いてありますので読みやすいです。

Turbolinks導入のメリット

最初に書いたようにTurbolinksを導入することの利点はページロードの高速化です。html全体を再ロードしないため、ブラウザ上での体感速度向上が期待できます。

Turbolinks導入のデメリット

これまで書いてきたjsが動かなくなる可能性が高い

通常のwebページとjsの挙動が大きく変わるためこれまで作ってきたjsが上手く動作しない可能性が高くなります。
これまでRails3で作ってきたrailsアプリケーションをrails4にアップグレードした途端に正しく動かなくなるといったことが簡単に発生します。

ページ遷移してもmetaタグが更新されない

ページ遷移してもCSRF-Token以外のmetaタグが更新されないという挙動になっています。

そのため、普通ページ毎に内容が異なるogタグ等もページ遷移しても更新されません。 しかし、実際にfacebookのいいね！ボタンをクリックしたりした場合においては、フルロードしたコンテンツを各SNSが取得してくれるはずなので問題無いのでは？というようなコメントがついています。DHHも「それが必要なユースケースは聞いたことがない(I haven't heard a compelling use case yet)」とコメントしています。

既存のjsが動かなくなるケース

既存のjsをそのまま使おうとした時にどんな問題が起きるか具体例を上げて説明します。

$(document).readyにイベントをbindする処理を書いてたら最初にアクセスしたページではbindされるが遷移したらbindされない

$(document).readyはリンククリックでのページ遷移では発火しないので、同じjsファイルを読み込んでいるのに「外部リンクから最初にやってきた時しか正しく動かない」ということが起きます。

$(document)に同じイベントが多重bindされて正しい挙動にならない

全ページで読み込むjsで（例えば共有しているテンプレートファイルにベタ書き）即時関数で以下のbind処理を記述したとします。

<script>
$(function(){
  $(document).on('click', '#button', function(){
    console.log('ニャーン');
  })();
});
</script>

で、何度もページ遷移してから#bindをクリックするとページ遷移した分だけconsoleに「ニャーン」と表示されます。猫好きの私歓喜！とか言ってる場合じゃありません。

これが発生する原因は、最初に書いたとおりjsのプロセスがずっと継続するため、$(document)のオブジェクトはページ遷移してもずっと同一のものが生存し続けています。
そのため、ページ遷移する度にbindするようにすると、同一の$(document)オブジェクトに再度bindしてしまうため、何重にも同じイベントがbindされることになります。 私も最初この挙動にハマって小一時間悩みました…。１回のアクションでajaxリクエストが複数回飛んでるっぽい？などの分かりにくい問題が起こります。

なんでみんなオフにしたがるのか？

既存アプリにTurbolinksを導入する場合、「デメリットの方が多くなるケースが多い」ということに尽きると思います。 具体的には * jsをTurbolinksの挙動に合わせて修正するコストが高い * Turbolinksの挙動を正しく理解していないと簡単にトラブルになる * フロントエンドを担当するエンジニアへの負担が大きくなる といった所が問題になりそうです。想像の範囲ですが。

それでもTurbolinksを有効にする場合に気をつけること

urbolinksを使用する際のjs実装について気をつけることについて説明します。

ページ遷移の度に実行したいjsの実装

lightboxやmasonryなどのデザイン系のjQueryプラグインを適用するケースによくある「ページ遷移の度に実行したい」場合。 多重実行されるとやっぱり挙動がおかしくなるので、「複数回実行はさせたくないがページ遷移毎に１回だけ実行したい」という要件になります。

これを実現するにはいくつか方法があります。

1. テンプレートファイルにベタ書きする

毎回実行されることが保証されていますのでテンプレートファイルに記述すれば良さそうです。ただ、jsはassetsで管理してapplication.jsの１ファイルにまとめてロードするというrailsの作法からはちょっと外れる形にはなります（これも厳密に守るのはかなり難しい作法ですが）

2. $(document).readyとpage:loadの両方で実行されるようにassets管理下のjs,coffeescriptに記述する

$(document).readyはページ初回表示時にのみ実行され、page:loadはページ遷移時にのみ実行されます。ページ初回表示時には実行されません。

なので、同じ処理を両イベントでbindしておけば、常にページ遷移ごとに一回だけ実行されることが保証されます。

以下のように記述します。

$(document).on 'ready page:load', -> 
  console.log 'ready and load'

これでページ遷移毎に実行され、かつ一回だけ実行されます。

ただし、ブラウザバックで戻った時にはpage:loadが実行されないので、ブラウザバックで実行されなくて困る処理はpage:changeにbindする必要があります。 しかし、turbolinks使用時にブラウザの戻るボタンをクリックした場合、turbolinksが内部でキャッシュしているpageCacheからページが復元され(turbolinksはURLの書き換え等にhisotry APIを使っています)、pushStateが使えない場合はリダイレクトされる(location.hrefを書き変えてます）ので大体の場合において問題は起きないと思います。

イベントのbind

難しいのはこっちで、いくつか方法が考えられますがどの方法を取るにしても開発チーム内で話し合って決めておく必要があります。 主な関心事としては「多重bind」をいかに防止するかということになりますが、逆に多重bindされても問題がないようにイベントのハンドラを実装しておくというの手です。

まず前提条件としてテンプレートファイルにベタ書きせず、assetで管理されているjs、CoffeeScriptのファイルに記述することが条件になります。
テンプレートファイルにイベントをbindする処理を普通に書くとページ遷移毎にイベントがbindされるので$(document)の場合は上手くワークしません。 テンプレートファイルにjsを書かなければいけないケースはControllerから値を渡すようなケースに限定して、使わないように開発チーム内で取り決めをしておく必要があります。

1.$(document)にbindする場合

ajaxで後からロードするhtmlに対してイベントを定義しておく場合などによく用いられるケースです。

assetでapplication.js１つにjsがまとめられる場合は、$(document).ready内でbindするように記述します。

■/assets/path/index.js.coffee

$(document).ready ->
  $(document).on 'click', '#popup', (e)->
    alert('popup') 
  $(document).on 'hover', '.menu', (e)->
    e.currentTarget.addClass('hovered')

上述の通り初回表示時にのみ実行されるため、初回表示時に$(document)にbindする全てのイベントがbindされその後ページ遷移しても実行されません。
これにより確実に一回だけイベントがbindされます。ページ遷移毎に$(document) にbindするように実装すると上述した通り同じイベントが同じDOMに何重にもbindされて不具合を起こすケースがあります。

イベントのbind自体は$(document)に直接bindするのが一番早いようですし、パフォーマンス的にも問題は起こりにくい方法だと考えられますので、特別な理由が無い限り、イベントのbindは$(document).on({event}, {selector}, {callback})の形式に統一してしまうのが良いのではないかと思います。
参考：高速で安全なjQueryを書くために今できること | Dress Cording

ページごとにjsを読み込む場合は、そもそもturbolinksのページ遷移にならず通常の遷移になるので気にする必要はないですが、turbolinksの恩恵を受けられなくなります。

2.指定のセレクタにbindする場合

$(document).'ready page:load'でbindするようにすればページ遷移毎に実行されますので、これで対応出来ると思います。

こんな面倒なことしてられるか！俺はRails4でも今までどおりに開発させてもらう！という場合

特定のリンク時のみturbolinksで遷移せず通常のページ遷移をするようにする場合

aタグにdata-no-turbolinkという属性を付けます。 例：

<a href="/user" data-no-turbolink>User List</a>

全ページでリンククリック時のページ遷移にturbolinksを使わない場合

gemファイルとturbolinksを読み込んでる箇所をjs,htmlから削除します。turbolinksのソース読み込んだ時にAタグにbindingされるんでそりゃそうですが。
詳しい手順はこちらを参照。

まとめ

以上、簡単ですがturbolinksの挙動と実際に使う場合の注意点について述べました。
文中でも書いたとおり、これまでの色々なweb上でのjsの常識が通じなくなりますので、既存のjsを流用する場合はかなりの手間が必要になります。
またAngular.jsなどのフロントエンドフレームワークを使う場合においても対応が必要なようです。

そのためjsを多用したSPAを作る場合や、開発メンバーが不慣れな場合はturbolinks自体使わないという選択肢もアリだと思います。正直私も最近初めて使ったのですが最初は色々なものが動いたり動かなかったりでなんじゃこりゃと思いました。

ただ、Rails4から標準で有効になっている以上、Railsの作法の一つとして実装されているものだと考えています。
今後のバージョンアップでどうなるか分かりませんが、今後Railsで新規アプリを作っていくのであれば、うまい付き合い方を知っておいた方が結果的にRails Wayの恩恵をより受けられるようになっていくのではないかと勝手に考え、今回の機会にまとめてみました。

【お前のチケット】チーム開発でのチケット改善術【解読不能】

Issue管理システムを使っている開発現場では同僚の書いたチケットに悩まされる以下の様な光景が良く見られます。

事例１「何の目的で作られたのか分からないチケット」

ソースレビューを振られたのでチケットを見てみたら、何を変更したいかは分かるけどこの変更がどういう意味があるのか分からないケース

担当者の対応

作業したメンバーの席まで歩いて行って
「ねーねーこれさー、何のために作ったの？」
「あーそれはですね、まず○○という話がありまして、それで…」
（背景から説明されて１５分経過）

事例２「ソースを全部読まないと何を変更したか分からないチケット」

ソースレビューを振られたのでチケットを見てみたら１０コミットぐらい入れてあるけどチケットの説明が簡素過ぎて何の仕様をどう変更したか（もしくは新規に作ったか）がソースの差分を全部読み込まないと分からないケース

担当者の対応

作業したメンバーの席まで歩いて行って
「ねーねーこれさー、要するに何変えたの？」
「あー、ちょっと待ってもらって良いですか？（いっぱい変えたからすぐ出てこない…）」
（思い出して変更点を列挙するまでに１０分経過）

事例３「意味がわからないチケット」

誰かが切ったチケットを振られたのはいいけど何が書いてあるか分からないケース

担当者の対応

チケットを切ったメンバーの席まで歩いて行って
「ねーねーこれさー、何？」
「あー、これ別のチケットから派生して作られたんで良くわからないっすねー」
「Ａさんが詳しいはずだからAさんに聞いてみましょう」
Ａさん「良く分かんないからＢさんにも聞きましょう」
Ｂさん「いや俺知らんし」

運が悪いとドラクエの如くいろんな人の所にタライ回しにされ１時間近く彷徨うハメになります。

事例４「後になって振り返ると全然分からないチケット」

チケットは正常に処理され、作業者とレビュアーは合意が取れておりすでに本番にリリースされているのに、第三者がそのチケットを読んだだけでは内容がサッパリ分からない。 しかしその修正で障害が発生したので担当者を問い詰めなければいけないケース。

当事者の対応

作業したメンバーとレビューしたメンバーの席まで走って行って問い詰めるが当人達も覚えていなくて全社を巻き込んで泥沼化する
→最悪殴り合いに発展

何が原因か？

Redmine、Backlog、JIRA、GithubといったIssue管理システムを使う最近の開発では、個々のチケットを通じて相手に作業依頼をするケースが多くなります。

口頭やメールで依頼する内容をつらつら書いたりすることなく、Issue管理システム上でチケットの担当者を変更し、Issue管理システムから飛んでくるメールで作業を依頼されたことを周知させている現場も多いのではないかと思います（少なくとも自分が関わった現場ではそうでした）。

そのため、他人に意思を正しく伝えるには、チケットに必要な情報が十分に掲載されている必要があります。
そうしないと上記のように、作業を振られる度にいちいち担当者の所まで行って質問しに行かなければならず、質問しに行ったついでにあれやこれや雑談していると簡単に１０分、１５分を無駄にしてしまいます。チーム内で同じことがどこかで毎日起きていたら間違いなくチーム全体の生産性の低下につながります。（そして何故か問題として取り扱われにくいですコレ）

どうするか

そんな重大な問題を引き起こしかねない一方で、上記の事例は全て「チケットの書き方」をちょっと改善することで大方解決できそうな問題です。

以下に説明する「ちょっとした気遣い」程度のことで、チームの生産性を大きく向上させることが出来ると信じています。

伝わりやすいチケットを書く上で自分が気をつけていること

現職ではGithubをIssue管理に使っていますが、IssueやPullRequestの説明やコメントを書くときに以下のことに気をつけています。

背景、目的、作業内容を必ず書く

簡単でも良いのでこの３点を押さえていれば、プロジェクト内の第三者が読んだ時に困ることは無いと思います。 この３点さえ抑えれば他の事は自ずと導かれてくるはずです。

しかし残念ながらこの３点すら書かれていないチケットを数多く目にし、その度にチケットを切ったメンバーの所に「そもそもコレってどういう話ですか？」という所から問答をスタートしなければならないケースが多々ありました…

例

＜背景＞

ユーザー新規登録画面においてページ離脱率を向上させる施策を実施したい。
そのために入力フォームがどのくらい入力された段階で離脱したかを知る必要がある。

＜目的＞

ユーザーが離脱した時点でどの入力フォームが入力済みであるかを知る。

＜作業内容＞

Google Analyticsのイベントトラッキングで以下のイベントを
トラッキングできるようにjsを仕込む。

TODO:
・入力フォームに入力してfocusが外れた時。未入力時は飛ばさない
(個々のinputタグのnameと入力された文字数をGoogle Analyticsに飛ばす）
・確認ボタンのonsubtmit
・ページ離脱(beforeunloadにbindする)

Redmineを使ってる場合はIssue Templateプラグインを入れてテンプレートとして上記のような項目のタイトルを入れておくと良いと思います。

また、Githubの場合はタスクリストをチェックボックスで作ることができるので、PullRequestの場合は必ず説明文に入れています。

画像で表現できるものは必ず画像を貼る

web画面やスマフォアプリ等でGUIがあるアプリの場合、必ずキャプチャを貼ります。 口で「UserControllerのlistで表示される画面の上から３番目のtableでさ～」なんて言われても分かりませんが、
キャプチャ取って丸つけとけば一発です。百聞は一見に如かずと昔の人は言いましたが今でも通用します。

文章では伝わらないことが画像や絵なら一発で伝わることも少なくありません。面倒臭がらずに画像に頼りましょう。 私はwebのキャプチャを取るためにChromeExtentionのAwesome Screenshotを使っています。
全体キャプチャ・部分キャプチャ・トリミングだけでなく、文字の表示や、四角・丸などで該当箇所を囲んだりといった加工がブラウザ上でできます。最近なんか挙動が怪しいですが、とりあえず使えてます。

あとはMacだったら画面の動作をQuickTimeでキャプチャしてGifアニメにして貼るのもオススメです。

チケットの説明文に書く情報は出来るだけ沢山

バグチケットの場合だと情報が多すぎて困るケースは殆んどありません、というか多分ないです。
バグ調査の情報として載せられるものは何でも載っけましょう。 私の場合は以下をよく載せています。

• サーバサイドのエラーログ
• 問題を引き起こしてるSQL
• 問題が起きている画面のキャプチャ
• 問題が起きた際のmysqlのshow full processlistのログ
• 関連する資料ファイル（Excel,pptなどの外部ファイルがあれば）
• 関連するチケットへのリンク

自分の作業メモをチケット上に残す

実践している人が意外とあまりいないtipsですが、自分がチケットを作ったり実際に作業している際に考え方こと、仕様決定で迷ったことなどをチケット上に残しておくと、レビュアーやテスター対してコミットの意図が伝わりやすくなります。

後で作業者や起票者の「思考をトレース出来る」というのは文章によるコミュニケーションの大きな利点ですので活用しない手はありません。
ただしあまり沢山書くと邪魔になってしまうので、ある程度バーっと書いてからあとで整理しておくのがオススメです。

自分の場合は以下の様なものをチケットに書いています。

• 自分が手を入れている部分の仕様メモ
• 疑問点とそれに対する回答（自分で聞いて回って解決したら回答を付け足しておく）
• 実装中に「これでいいのかな？」と思ったこと（あとでレビュアーにレビュー依頼時に重点的に見てもらうために）
• 設計の意図
• 作業中に作った画面のキャプチャ（作業中は自分が見る用に、レビュー/テスト時はレビュアー/テスターが分かるように）

最後に

こういう話をすると高確率で「めんどくさい」「うちのチームは誰もチケットの内容なんて誰も読まない」 「Face to Faceで十分会話してるから問題ない」とか何とか言われます。

しかし、ちょっとやってみれば分かりますが、チケットを切る際に背景・目的・作業内容の３点を箇条書きにするようにするだけなら、時間は５分もかかりません。

その５分の労力によって、マネージャーや他のメンバーが質問しに来る時間を無くしてチーム全体の生産性を高めてみんな早く帰れるようになると考えれば、業務中にtwitterやfacebookを眺める５分間を差し出すことは十分割に合うことだと思うのですが、どうでしょうか？ｗ

先ず隗より始めよということで、自分からチケットの書き方を変えてみると良いと思います。 別に文句を言う人はいないはずです（多分）

自分も１人で上記のようなことを勝手に始めましたが、段々他の人が真似するようになりました。

リモートワークを始めて３週間が経ったので所感をまとめてみる

７月１日に株式会社ハートレイルズで勤務し始め、３週間ちょっとが経ちました。

最初は色々不安もあったリモートワークという働き方ですが、なんだかんだで上手く回っている気がします。仕事の方もそれなりに貢献出来ていると思いますｗ

このエントリーではリモートワークをして感じたこと、気づいたことを簡単にまとめてみます。

 生活リズムが安定するようになった

朝起きる時間、寝る時間が前に比べて安定するようになりました。

私の平日のスケジュールは大体こんな感じです。

• AM6:00 起床（天気が良ければジョギングor散歩)
• AM6:45～7:30 朝食・シャワー・身支度
• AM7:30～AM8:50 洗濯、掃除、ギター弾く、本読む、提督業務、ネットをダラダラ見る
• AM9:00 自宅で業務開始。hangoutで社員と朝の挨拶、進捗共有、雑談などをしてから業務開始
• PM2:00頃 昼休み。家で適当に作って食べるか外食する。時間が余れば本屋に行って小説や技術書物色したりカフェでコーヒー飲みつつネットダラ見or読書など。
• PM3:00頃 業務再開
• PM7:00～PM8:00 業務終了。日報を提出して（日報共有は弊社が提供するサービス3arrowsを使っています）仕事用のPCをシャットダウン。

退勤後は夕食を食べてネットダラ見してニコ動観て提督業務して本読んだりギター弾いたりコード書いたりとダラダラしてから23:00頃に就寝します。勉強会がある日は早めに切り上げて勉強会に行ったりもします。

ハートレイルズは勤務時間がきっちり決まっている訳ではないのですが、他の社員が勤務している時間帯やお客様の営業時間に合わせると自然と時間が決まってきます。

なので生活リズムは割と固定化されます。また、通勤時間が無くなった分プライベートに充てられる時間も増えたので「帰りが遅くなったけど読みたい本が…今週中に読譜して練習しないとヤバい曲が…試したいライブラリが…提督業務が…」みたいに夜更かしする理由があまり無くなったので、その日の未練を残さずさっさと寝られるようになったためか、寝る時間も固定化してきました。

仕事の生産性が高くなった

前職より１日に書けるコード量が増えた気がします。

色々理由はあると思うのですが、

1. コミュニケーションはオンラインツールを使った非同期コミュニケーションなので作業を中断されるタイミングが減ったこと
2. 自分が作業し易い環境を自分で作って作業していること
3. 職場が静かなので（当たり前ですがｗｗ）

といった所が理由かなーと思います。

1.作業を中断されるタイミングが減った

コミュニケーションには以下のツールを使っています

• 社内コミュニケーション：HipChat, Hangout, Github
• お客様とのコミュニケーション：Backlog

全てオンライン上でコミュニケーションをしていることもあって、オフラインでのMTGや会話と違って同期生が求められません。なので返せる時にレスを返すというスタイルになるので、自分の作業の状況に合わせて対応できます。

もちろんGithubやHipChatでメンションがあったらすぐ分かるようにサウンドを鳴らしたりメーラーのデスクトップ通知はONにしていますが、それでもすぐに反応すべきかどうかをすぐ判断出来るので、人から話しかけられる度に作業が中断する、といったことがありません。

そのため、まとまった作業時間が長く取れるようになったので、結果的に作業効率が上がっているのだと思います。

2.自分が作業し易い環境を自分で作って作業していること

と言っても、盛岡への引越しコストがあるのでそこまでお金はかけてないのですがｗ、今の所こんな感じです。

• PC：会社から貸与されたMacbook Air 13inch
• ディスプレイ：24inch FullHD（BENQG2411HDという５年前に買った古いモデルです）
• キーボード：REALFORCE日本語配列　※前職で使ってたやつ
• トラックパッド：Apple純正品
• 椅子：Ergohuman PRO ottoman　※前から使ってたやつ
• 机：確かコレです
• 癒やし担当：たこルカ、ねんどろいど赤城さん

こんな感じです。

今の所プライベートのPCとディスプレイ、キーボードを共有してるのでELECOMのKVMスイッチ「 KVM-DVHDU2 」を使って切り替えています。

なおこのKVMスイッチは前職の同僚一同から退職時に頂いたものです。このブログ見てるか分かりませんが大活躍しています。ありがとうございます！

引っ越して落ち着いたら前職のオフィスにあったDELLの27inchディスプレイと Wireless Keyboard を揃えたいですが、とりあえずそれまではこれで十分です。

3.職場が静か

独り暮らしなので当たり前ですが、静かですｗ

ただ、個室で仕事するようになって分かったのは、オフィスで他人の雑談が聞こえるのは結構ストレスだったのだなぁということです。割と賑やかなオフィスで働いていたせいかもしれませんが、静かだと集中したい時にスッと集中モードに入れる気がします。

ただ、逆に集中が切れた時とか疲れた時は好きな音楽かけたりも出来ますし、自分の場合、所属しているマンドリンオケの演奏会で弾く曲の練習録音を確認しながら仕事、なんてこともしています。この辺の柔軟性はやはりリモートワークならではといった所でしょうか。業務中にヘッドホンかけて良い職場だったらまた違うでしょうけど、大体の職場はイヤフォン・ヘッドホン禁止でしょうから。

やっぱりたまには寂しくなるｗ

当然課題もあります。

当たり前ですが、要するに引き篭もりスタイルなのでオフラインでの人との交流が圧倒的に減ります。週末のマンドリンオケでの練習ぐらいでしか人と話さない、という週もあります。

なのでたまには寂しくなります。仕事中は全く寂しさを感じませんが、仕事が終わったあとに夜１人で過ごしているとそういうことを感じる時もあります。なので以前より勉強会で人に話しかけることが増えた気がします。コミュ症はコミュ症なりに寂しさを感じるということなのでしょうｗ

リアルな人との交流を持つ機会を増やすことは今の課題でもあります。今は川崎に住んでるのでもうちょっと勉強会とか社会人が集まるコミュニティに顔出してみたりした方がいいんでしょうね。この辺りの情報ももっと探して行きたいところです。

あとは今はずっと自宅で作業していますが、慣れてきてプロジェクトが忙しくなければコワーキングスペースで仕事したり誰かとランチを食べたり飲みに行ったり、ということも増やしていければと思います。ということで早速来週は元同僚とランチの約束をしてたりしますｗ９月末までは川崎にいるので、東京圏にいる間に他の人と交流しておきたいですね。

とりあえずこんな感じでリモートワークをしています。

最後に色々書きましたが、総じて楽しくやっておりますｗ

Railsで仕事するのも初めてだったので最初は不安もありましたが、ソースレビューをきっちりやるスタイルなのでまずい所は指摘してもらえますし、自分でもパーフェクトRubyやパーフェクトRuby on railsを読みながら勉強することでついていけている感じです。

技術的な話についてもturbolinksの挙動について「うおおおおおおおお」ってなることがあったり「CoffeScript最初はビビったけど使ってると超便利！」「 jquery-ujs.js使うと$.postする時に勝手にCSRF-Token付与してくれてて便利！」みたいなこととか色々書きたいネタが沢山あるのですが、これらについてはまた別エントリーで書きたいと思います。