banseivlog

大器晩成型 - 仕事中の覚え書きや反省文を書く程度のブログです

多分詳しいChrome Flashの動向まとめ

Chrome 55にてFlash無効化(HTML5 by Default)が発表されて12月を迎えました。

Chrome 55がリリースされ、Flashの無効化されると思いきや嬉しいことに寿命が1ヶ月延びました。1ヶ月...

僕の立場を説明すると、Flashコンテンツを時サービスですこしだけ扱っていて、かれこれ1年くらいChromeの動向を調べていました。

具体的にFlashの無効化がどんなことなのかを少し詳しく説明しようと思います。

HTML5 by Default

Flash無効化と言ってきましたが正確にはこのアップデートは HTML5 Default と言います。

中身の詳細に関しては、このGoogle スライド に載っています。

ざっくり説明すると

続きを読む

jQuery,Reactを使わずにvirtual-domを使ってLPを作った理由

TL;DR

jQueryとReactの代わりにvirtual-dom使ってLP的なサイトを実装してみたけど案外良かったよ。

jQueryやReactを使わない選択肢

とあるサイトをリニューアルをしました その際、動的コンテンツの表示をするのに何を使うかを考えました。

  • jQuery: 今まで使っててて、LPとか作る際の主流。
  • React: 流行ってる、ただ実装に対して too much な機能(差分updateと状態変化くらいでよかった)
  • virtual-dom: 欲しい機能だけ有している。随所でmount処理入れてあげればコードも健全に保てそう。

ちなみにサイトの仕様はこんな感じ。

  • Java製, freemarkerでのサーバー吐き出しとAPI経由の動的吐き出しの入り乱れたコンテンツ
  • 複雑なロジックはなく、特別に実装するのはモーダルやトラッキングログだったりちょっとしたインタラクションだけ
  • IEのサポートは新しめ

ということで、流行りのReactを使わずにvirtual-dom単体で実装することにしました。 他にも、自分が受け持っているWebアプリケーションの方でdomを書くときに割とvirtual-domの書き方と似通った実装をしていたので、他チームメンバーにもスケールするような実装を目指していたので比較的全体をシンプルに完結させたかったのもあります(教育コスト的に)。

続きを読む

axiosでのajaxリクエストをモックしてテストを書く

JavaScriptで使うAJAXライブラリといったら superagent, whatwg-fetch, axios が最近の主流ですね。ちなみに私はaxiosがその中でも使い勝手がよく、メインの開発で使っています。

テスト周りでの作業記録をば。

AJAXまわりでテストコードを書くときに、通信をモックさせたい場合があります。axiosではどのようにモックが書けるのか忘れないように個々に書いておこうと思います。今回使うパッケージは以下の3つ。ちなみにテストフレームワークJestを使います。

まずはHttpClientを書くところから。実装部分なんで好きに書きます。

// clientHttp.js
import axios from 'axios';

export const client = axios.create({
  baseURL: 'http://api.hogehoge.com',
  timeout: 5000,
  ...
});

export function get() {
  return client.get('/get');
}

export function post() {
  return client.post('/post');
}

ここで axios のインスタンスを生成しているわけですが、ちゃんとそれも export してあげる事がモックのときにかなり重要になります。

次にテストコードを書きます。

// __tests__/clientHttp-test.js
import MockAdapter from 'axios-mock-adapter';
import { client, get, post } from '../clientHttp.js';
const mockAxios = new MockAdapter(client);

describe('clientHttp', () => {
  it('should return get mock data.', () => {
    mockAxios.onGet('/get').reply(200, { id: 1 });
    return get().then(res => {
      expect(res.data).toEqual({ id: 1 });
    });
  });
  it('should return post mock data.', () => {
    mockAxios.onPost('/post').reply(200, { id: 1 });
    return post().then(res => {
      expect(res.data).toEqual({ id: 1 });
    });
  });
});

モックさせるときに公式ドキュメントだと少しわかりにくいのですが、先程exportさせたaxiosのインスタンス(上記コードではclient)を引数にMockAdapterのインスタンスを生成してあげないと行けない(当たり前ですが)。ただし、axios#createしていない場合にはデフォルトのものを使っているので、MockAdapterでnewさせる時はそのまんまのaxiosを使えます。

こんな感じでaxiosを使ったAJAX周りのテストも快適に書けるようになったので心地よくテスト生活を遅れそうです。