banseivlog

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

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

frontend javascript webpack react jquery

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 nodejs npm frontend

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周りのテストも快適に書けるようになったので心地よくテスト生活を遅れそうです。

webpack.ensureとbabelでハマりがちなこと

frontend javascript npm webpack

以前qiitaのほうで webpackのrequire.ensureでDynamic Loadingをして大規模アプリケーションを作る という記事を書いたのですが、babel-loaderと組み合わせるとちょっと癖があってハマったのでここで補足をしようかなと思います。

import/exportとwebpack.ensureの組み合わせが悪い件

webpackでimport/exportは仕様に含まれていないので当然webpack.ensureのように遅れてファイルを読み込ませたいときにはES6 Modulesではなくwebpackのrequireを使う必要があります。

どうもバベってる時にimport文等を使おうとするとrequireが上書きされて上手くコンパイルしてくれない。そんな時の対処法としてあげられるのが以下２つ。

  • requireで読み込ませるところだけ .babelrc でignoreさせて上書かない
  • コメントで教えていただいたbundle-loaderを使って依存を解決させる
続きを読む