Humanity

Edit the world by your favorite way

Angular での単体テスト、E2E テスト、バックエンド無しの開発について

Angular

Jasmine による単体テスト

Karma (テストランナー) によるテスト実行の自動化

Jasmine 単体でもブラウザからテスト実行できるが、わざわざアクセスして確認するのが面倒な場合は Karma を使う。 コマンドからテスト実行できたりするので CI との相性が良い。

ngMock による疑似バックエンド処理

まだバックエンドが用意できていなかったり、AP サーバ立ち上げるより nginx などの Web サーバで静的ファイルだけ配信して開発を進めたいという場合。 GET だけなら JSON ファイルも Web サーバで配信させればいいですが、POST や PUT や DELETE となるとそうはいきません。 そういう場合に JSON Server というのもあるようですが、Angular だけで完結する方法として ngMock を使う方法があります。

Protractor による E2E テスト

Protractor は Selenium WebDriverJSベースの E2E テストフレームワーク。

全体を通した話

それぞれの技術を導入した時の効果などについてまとまってる記事。

私、普通のVimmerに戻ります

Vim

頭のおかしいいつも通りのヨタ話です。半分ネタです。

もう限界です。 プラグインを入れたり作ったりしてプラグインが増えていき、気が付くと Core i3 4130 3.4 GHz, メモリ 16G の PC にもかかわらず Vim が起動するまで3秒ぐらい掛かるようになってしまいました。 それも Kaoriya GVim の場合。最近は MSYS2 の vim をメインで使っていますが、それだと5秒位かかります。 そして気付くとふとした時思いついた事を書き留めようと思ったらサクラエディタを立ち上げる自分がいたのです *1。 私は忘れっぽい上に集中力散漫な性質なので、5秒掛かったら絶対忘れると思い自然とそうなっていました。 瞬時の判断というのは割と自分の経験とか性格を反映しますね…

ただ本音を言えばそういう時でも Vim を使いたいです。 結局途中で Vim を起動したりします。 実際メイン PC が Linux の頃だったら vim -u NONE -N と打ってました。*2

さて、タイトルの「普通の Vimmer」という文言を見た時、 「普通の Vimmer って何？矛盾してない？」という当然の疑問が湧くでしょう。

普通かどうかは分かりませんが、これから私が変えようと思っているのは、 設定ファイルは新しい環境に移った時に都度作り直す。また、「使わないプラグインが増えてきたな」と思ってきたタイミングで設定ファイルをまっさらにする。これを定期的に繰り返す というスタイルです *3。

これは mattn さんのインタビューで知り、mattn さんが実際に実践しているスタイルでもあります。 あと、さすがに「プラグインは邪道」のスパルタンスタイルを貫き通す覚悟はありませんでした。

このスタイルは「スパルタン」や「プラグイン大盛り」と何が違うかというと、私がこれから大事にしていこうと考えているのは1点だけ。 それは一言で言うと「快楽主義」です。 つまり編集のレスポンスタイムに影響のない範囲で (デフォルトの Vim のインタラクションによる楽しさを大事にしつつ) プラグインを入れていくということ。

そもそも一時的にしか使わなかった Vim プラグインは結構あると思います。 例えば Ruby on Rails のプロジェクトに関わったので rails.vim を入れたけど今では全く使わないとか。 そういったプラグインを放置していくとあっという間に冒頭の激重 Vim 環境が出来上がりです。

ここで大事なのは開発に必要なプラグインは移り変わっていくものだという事です。 IDE なら必要な機能をあらかじめ最大公約数的に詰め込んでおく事になるでしょうが、 Vim を使っているなら編集にストレスを感じたくないはずです。 皆さんはどうか知りませんが、私が Vim の好きな所に、必要な編集を最小の操作でノータイムで達成できる所にあります。 もちろんそれには常に次に必要なキー操作を頭に思い浮かべる必要がありますが、 これによって一種のフローが出来上がるので、注意力散漫な私にはこれはとても必要な儀式です。

私は (自分がそうにもかかわらず) 注意力散漫な人というのは 「注意力散漫になってしまう状況を作り出しやすい人」だと思ってます。 そういう意味でフローに入り込める習慣がすでに出来上がっているならそれはぜひ使ってさらに強化すべき強力な武器でしょう。 こういう習慣は技術を学ぶ土台となるという意味で、むしろ技術よりも重要だと思います。 他にも毎朝はてブのまとめ読みをチェックしたり Blogtrottr から届くエントリを読むのも武器だと思います。 自然に続けてる事は中々やめられないしやめないです。

最近はこんな感じで微妙に Vim から遠ざかってたりしたのですが、 Vim 関係ないですが「楽しい」というのを追及すべきというのを最近特に思います (むしろ自分に一番欠けてる部分だと思ってます)。 最近は微妙に Vim の人気が出てきてしまったので使ってるとファッションか？とか微妙に Vimmer が叩かれるようになりましたが、 まぁ特に気にせずこれからも頭のおかしい記事を書いていきたいと思います。 まぁエディタをダシに最近強く感じたり思ってる人生観を書き留めたかったというのが本音のような気がします *4。 流動的に生きてみようとか、楽しい事を追求してみようとか。

特に日記とか古い自分のアドバイスが将来役に立つ事もあるかもと思って書いてる部分もあるのですが、 まぁそういう時は見ないし役に立たなかったりするわけです。 だってその頃の自分と今の自分は違うし。 昨日の自分にとって本当だったことは今日の自分にとっては当てはまらないかもしれない。 分単位で気がコロコロ変わる程の気まぐれの自分にとっては尚更です。 コントロールできない時は楽しいと思う方にいけば大体それが正解です…が、そう分かっていても往々にして正解を選ばない。 人はいずれ死ぬし、人の役に立とうとしなくても (社会の歯車になろうと必死にならなくても)、 普通に意識せずに生活してても知らず誰かを救ってる事もあります。 むしろ意識してない人の方がそんなイメージがあります (ちなみに自分は自然体で人と接するのが苦手です)。 結局自分は楽しい事をデフォルトで追及できる才能を持っていないので、 どうしたら楽しく生きられるかをわざわざ考える必要があるのです。面倒ですね。 けど結局考えるのをやめたらじわじわ死んでいくとはずっと思っています (焦るのとは違います)。 これもまた一つの私の武器であると信じています。

*1:メモ帳を避けたのは矩形選択とか補完はほしいという意思の表れでしょうか…まぁ常駐してるので右下にアイコンがあるのが大きいですね

*2:これは手癖なので待つよりも脳内メモリを消費しません。集中力散漫というよりも、待つことができない故に集中力に欠けると言った方が正確かもしれません

*3:「設定ファイル」と言っている通り、Vim に限りません

*4:一番語れるのが結局これだったというだけなんですが、この文章よく考えると頭おかしいぞ…

空白のページに遷移してしまうバグと格闘した (Chrome の開発ツールに助けられた話)

Angular

原因 (一行で)

  • <a href><img src='...' ng-click='...'></a> と書いていて (href が空のため) 空白のページに飛んでいただけだった(ｽﾞｺｰ
    • ng-router + html5mode(false) を使ってるなら href で (#... 以外のリンクに) 直接飛んだら otherwise は素通りされる *1 *2
    • なので遷移はちゃんと $location 使えって話な気がする

現象

対処＆結論

デバッグの流れ

(1日目)

不毛なので読まなくてもいいです。

  • キャッシュバグだと思ってコードをチェックしたり実行したりした
  • 非同期 GET のコールバックの実行タイミングが関係してそうだと思って調べた
  • どこかでエラーが起きたが握り潰されてしまっていると考え、ログを差し込んだ
  • ありがとうと言い続けその10倍は罵声を浴びせた

(2日目)

帰宅した後、気になって夜中にスマホで調べた時、Chrome の開発ツールでのデバッグに関する記事を発見した。

  • Chrome の開発ツールで非同期で実行されたコールバックのスタックトレースが何によって発火されたかまで辿れる事を知る
  • さらに Chrome の開発ツールで onhashchange で止める事ができると知る
  • onhashchange で止めてみる
  • スタックトレースの最初を見たら MouseEvent とある。クリックによる遷移…？あ、もしかして…
  • 元の HTML 見てみる
  • 予想通り <a href><img src='...' ng-click='...'></a> と書いてある
  • a タグ外してみる
  • ちゃんと目的のページに遷移した！

実際はもっとうろうろしてます (しました)。

調べる (TODO)

調べようと思ったけどこの記事を書いたのが実は5月20日でそれから進展なし。だるい。

  • 二度目のクリックで遷移してしまうのはよく分からない *3
    • 職場のコードなので調べるのだるい

*1:onhashchange しか見てない？

*2:ui-router だとどうなのかは知らない

*3:クリックした事で href の属性値が変わってしまっている？