技術探し

JavaScriptを中心に記事を書いていきます :;(∩´﹏`∩);:

Node学園26時限目まとめ

25時限目に引き続きオーガナイザーをしました about_hiroppy です。

今回の26時限目は、150人来ていただき本当に楽しく勉強になる時間でした。
改めてありがとうございました。
また、メルカリさんには会場整理、食事様々なことを手伝っていただき感謝します。ありがとうございました。

さて、今回の勉強会ですが、各フレームワークの話や型の話、低レイヤーのモジュールの話、 Chunked Encodingの話と結構コアな話が多い印象を受けました。
また懇親会では、古川さんからNode Collaboration Summit(Nodeのコアな人が集まるサミット(自分はこの回は行ってないです))やJSConf EU 2017で上がった議題の話がありました。(主にv8の最適化の話)
自分のwbepack3の発表を期待していた方はスミマセン(資料作ってなくて発表できなかったので。。。)

特に、React、vue、angualrの話が集まったことにより各フレームワークのことが知れて大変面白かったです。
次は自分もNodeの話をしようと思います😙

nodejs.connpass.com

進行しながら各LTの話をメモしようと思っていたのですが予想以上にできなかったので資料だけまとめておきます

資料一覧

capability of react fiber

speakerdeck.com

vue on storybook

speakerdeck.com

dependent type and typescript

speakerdeck.com

production E2E test with ProxyServer

speakerdeck.com

Angular PWA

slides.com

Nested Native Modules

ごめんなさい、資料見つけれなかったのでもし見つけたら更新します><

Chunked encoding を使った高速化の考察

www.slideshare.net

[懇親会] Node Collaborators Meetup & JSConf.EU

speakerdeck.com

まとめ

今回はNodeという単語を(おそらく)一回しか聞いてない!
次はまた二ヶ月後の8月です! お楽しみに:)

個人的には、Node, React, Vue, Angularでもっとこまめに情報交換とか色々できたらいいなと思いました。

宣伝

11月25, 26にNode学園祭があります! 登壇者、参加者募集していますので是非よろしくお願いします!

nodefest.jp

react-router, redux-sagaのテストの書き方

今回は、自分のelectronのテンプレートを参考にして話したいと思います。

github.com

記事が長くなってしまうので、プロダクションのコードは折りたたみしておきます。

使用ライブラリ

  • Jest
  • Enzyme
  • jest-serializer-enzyme(enzymeでsnapshotとるため)
  • redux-mock-store
  • redux-saga-test-plan

enzymeですが、snapshotに対応してないため react-test-rendererが最近の流れかもしれません。(むしろ推奨?)

facebook.github.io

github.com


react-router

github.com

react-router@4とreact-router-redux@5を使っています。

Routes.js

各パスをルーティングする部分です。
親がこのファイルをimportします。

import Routes from '../Routes';

const Root = () => (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Routes />
    </ConnectedRouter>
  </Provider>
);

このようにファイルを分離することによりテストをしやすくします。

テストコード

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { MemoryRouter } from 'react-router';
import configureStore from 'redux-mock-store';
import { render } from 'enzyme';
import Routes from '../../src/renderer/routes';
import rootReducer from '../../src/renderer/reducers';

describe('routes', () => {
  const createDOM = (path = '/') => {
    const state = createStore(rootReducer).getState();
    const store = configureStore()(state);

    return render(
      <Provider store={store}>
        <MemoryRouter initialEntries={[path]}>
          <Routes />
        </MemoryRouter>
      </Provider>
    );
  };

  it('should render the root page', () => {
    expect(createDOM()).toMatchSnapshot();
  });


  it('should render the login page', () => {
    expect(createDOM('/login')).toMatchSnapshot();
  });
});

4系から入ったMemoryRouterを使い、テストをします。
基本的に、スナップショットで比較するだけで自分はいいと思っています。(もちろん確認でwrapper内に対してfind, contains等してもいいとは思います)
react-router-reduxを使っている場合、storeに入れるrouteのlocationのkeyがテスト毎ごとに異なるので、mountではなくrenderを使います。


Redux-saga

github.com

非同期処理をmiddlewareで行うために使います。

Root

各ファイル(e.g. ページ毎)のforkを一括で行います。

テストコード

import rootSaga from '../../../src/renderer/sagas';

describe('root saga', () => {
  it('should register sagas', () => {
    const tasks = 2;

    expect(rootSaga().next().value.length).toEqual(tasks);
  });
});

昔は、rootSaga()._invoke().value.length で取れていまいたが、今は取れません。
ここでは登録されているタスク数(各ファイル数)の個数を確認します。

Partial

それぞれのファイル内のタスクのビジネスロジックが書かれます。
このファイルのrootでそれぞれのactionとタスクを紐付けし、その処理を追えた後再度アクションを発行します。

テストコード

import { expectSaga } from 'redux-saga-test-plan';
import auth from '../../../src/renderer/sagas/auth';

describe('auth saga', () => {
  const storeState = {
    auth: {
      mail: 'a@b.com'
    }
  };

  it('should take on the LOGIN action', () => {
    return expectSaga(auth)
      .withState(storeState)
      .put({
        type   : 'LOGIN_SUCCESS',
        payload: {
          mail: '--a@b.com'
        }
      })
      .dispatch({
        type: 'LOGIN',
        mail: '--a@b.com'
      })
      .run();
  });

  it('should fail on the LOGIN action', () => {
    return expectSaga(auth)
      .withState(storeState)
      .put({
        type : 'ERROR',
        error: {
          code: 'ERROR_LOGIN'
        }
      })
      .dispatch({
        type: 'LOGIN',
        mail: 'a@b.com'
      })
      .run();
  });

  it('should take on the LOGOUT action', () => {
    return expectSaga(auth)
      .withState(storeState)
      .put({ type: 'LOGOUT_SUCCESS' })
      .dispatch({ type: 'LOGOUT' })
      .run();
  });

  it('should fail on the LOGOUT action', () => {
    return expectSaga(auth)
      .withState({
        auth: {
          mail: ''
        }
      })
      .put({
        type : 'ERROR',
        error: {
          code: 'ERROR_LOGOUT'
        }
      })
      .dispatch({ type: 'LOGOUT' })
      .run();
  });
});

redux-saga-test-planを使ってテストしていきます。
基本的にdispatchして、putでyieldされた結果(reducerへ渡す部分)を期待します。
自分はエラー系を全部sagaとして一枚挟んでいます。
template-electron/error.js at master · my-dish/template-electron · GitHub

Selectors

saga内で状態がほしいときに取得する関数を定義します。

テストコード

import { createStore } from 'redux';
import rootReducer from '../../../src/renderer/reducers';
import * as selectors from '../../../src/renderer/sagas/selectors';

describe('selectors', () => {
  const storeState = createStore(rootReducer).getState();

  it('should get auth.email', () => {
    expect(selectors.getMail(storeState)).toEqual('');
  });
});

自分はselectorsに関してはredux-saga-test-planを使いません。
selectorsは単純な関数であるので、stateだけしっかりしていればいいかなと思っているからです。


さいごに

storeでredux-devtools-extensionとかを使っているとテストできない箇所が出てしまうのどうにかならないかな。。。

今月の28日、Node学園 26時限目やりますので是非きてくださいね!(募集は26から)
react, vue, angular, jsconf and Node Collaboratos Summit, webpack3(多分…), etc…の話が聞ける予感する 😁 nodejs.connpass.com

util.callbackify()というのがそろそろNodeへ入りそう

github.com

util.promisify() に関連して提案されました。

abouthiroppy.hatenablog.jp

github.com

名前の通り、非同期関数をコールバック関数に変換する関数です。
つまり、util.promisify()の反対版です。

const util = require('util');

async function fn() {
 return await Promise.resolve('hello world');
}

// or
// function fn() {
//   return new Promise((resolve, reject) => {
//     resolve('hello world');
//   });
// }

const callbackFunction = util.callbackify(fn);

callbackFunction((err, ret) => {
 if (err) throw err;
 console.log(ret);
});

引数にAsyncFunctionをとり、戻り値にコールバックが入った関数が返ります。

semver-minorとして入り、早ければ次のNode8.2.0に入るかもしれません。

babelへOptional Chainingが追加される

Optional Chaining

github.com

// before
const fooInput = myForm.querySelector('input[name=foo]');
const fooValue = fooInput ? fooInput.value : undefined;

// after
const fooValue = myForm.querySelector('input[name=foo]')?.value;

const obj = {
  foo: {
    bar: {
      baz: 42
    }
  }
};

obj?.foo?.bar?.baz; // 42
obj?.qux?.baz; // undefined
obj?.foo.bar.qux?.(); // undefined

function test() {
   return 42;
}

test?.(); // 42  
exists?.(); // undefined

class Test {
}

new Test?.(); // test instance
new exists?.(); // undefined

?.演算子の左の式の評価がundefined または nullのときに右の式が評価されず、undefinedを返します。

現在のステータスはstage-1です。

Babylon

babylonへOptional Chainingの追加と?.トークンタイプが追加されました。 babylonとは、Babelのために作られたJSのパーサで、acornがベースで作られています。 github.com

Babel

github.com 現在レビュー中です。
またこのPRのマージ先は 7.0.0 なので少し待たないといけないかもです。(現在 alpha.12)
このPRでできるbabel-plugin-syntax-optional-chaining というパッケージが後ほど babel-preset-stage-1 へ入ると思います。

ドワンゴを退職してメルカリに入社した

2年ちょっと働いたドワンゴを昨日退職して、今日からメルカリに入社します。

誰?

今年のニコニコ超会議で25歳になったエンジニアです。
JavaScriptが好きです。

ドワンゴという会社

本当に自由です。
こんな会社あるのかなって思うぐらい自由でした。
もちろん、仕事はするのですが会議とかに遅れなければ何時に出社してもいいという印象です。(チームによるかもですが)
また、エンジニア主体で企画を出しやすいです。 例えば最近だとマストドンの件とか。
ドワンゴのslackは日本で一番すごいと思うのですが、自分が見える範囲で2962チャンネル、絵文字が大量にあり見てて飽きなかったです。
技術的には、ドワンゴScalaErlangの印象が強いかもしれないですがフロントエンドも強いと自分は思います。
あまり外にコミットしている印象は無いのでそういう印象はないかもしれないですが。。
自分が所属していた部署は特殊で、自分が入社した時にできた部で2015年に入社した早期配属の人が所属する部署でした。
なので、同期が多く(10人ぐらい?)大変楽しく刺激的でした。
社内全体的に本当にみんなフレンドリーで風通りがすごいいいです。
また、自分の大学で仲のいい人がたまたま(?)たくさん入ってきていて大学と同じ生活ができてましたのもすごい好きでした。
今振り返ると、ドワンゴは理系の研究室と変わらない生活ができる会社だと思います。

ドワンゴでやったこと

自分はフロントエンドエンジニアとして働いていました。
ドワンゴでは3年で2回のサービスインを経験させて頂きました。

ニコナレは2つ目の仕事で、N予備校は3つ目の仕事でした。

転職理由

メルカリは今もっとも急成長している企業です。
その開発に参加してみたかったです。
それと英語力不足。
OSSでメンバーになったりするとハングアウトで通話をしたりサミットに出たりが多くなります。
例えば、Nodeだったら毎年最低一回はcore collaboratorが集まって議論し合うサミットだったり別プロジェクトだと月1で電話したりとか。。
そういう状況のときに会話ができない自分がいました。
メルカリでは日本だけではなく、アメリカやイギリスにスコープを向けています。
自分は必要にならないと勉強しないダメな性格なので仕事で英語を喋れる環境が欲しかったです。


メルカリではもちろんJSを書いていくつもりです。
自分はまだ、JSにコミットし続けたいと思っています。
また、今年は日本での活動を積極的にがんばれたらいいなと思います。
GitHubの活動はもちろん今まで通りですが、Node.js 日本ユーザーグループでの活動をもっと積極的にしていきたいです。

これからもどうぞよろしくお願いします!!

amzn.asia

Node8の注目的変更まとめ

そろそろNodeのv8.0.0が出ます。😆

github.com

注目するべき変更

Node8のリリースが4月から今回に変わった影響として、V8のバージョンをv5.8へ上げるためというのがあります。
何故かと言うと、TurboFanとIgnitionがv5.8で試験的に入り、v5.9でデフォルトになるのでLTS(v8.0.0はLTS)へのバックポートを楽にするためです。
TF-Iの詳しい資料
https://www.slideshare.net/ssuser6f246f/v8-javascript-engine-for:

5月以降に入った注目的な変更はasync_hooksとpromisifyとnpm5.0.0が大きいです。

N-API(Node-API)

ネイティブモジュールのAPI安定抽象化レイヤー
異なるVM間、Nodeのバージョン間でABI(Application Binary Interface)互換性を保証します。

async_hooks

async_hooks initial implementation by trevnorris · Pull Request #11883 · nodejs/node · GitHub

新しいasync_hooksモジュールはNode内で作られた非同期なリソースの生存期間に対して追跡するコールバックを登録します。
非同期操作の全体の監視、追跡を行います。

以下が対象です。

FSEVENTWRAP, FSREQWRAP, GETADDRINFOREQWRAP, GETNAMEINFOREQWRAP, HTTPPARSER,
JSSTREAM, PIPECONNECTWRAP, PIPEWRAP, PROCESSWRAP, QUERYWRAP, SHUTDOWNWRAP,
SIGNALWRAP, STATWATCHER, TCPCONNECTWRAP, TCPWRAP, TIMERWRAP, TTYWRAP,
UDPSENDWRAP, UDPWRAP, WRITEWRAP, ZLIB, SSLCONNECTION, PBKDF2REQUEST,
RANDOMBYTESREQUEST, TLSWRAP

別記事で詳しく書きます

promisify

setTimeoutとかをcallbackではなくpromiseと同じ書き方ができるようになります。

Nodeへutil.promisify()の追加 - 技術探し

zero-filling Buffers

buffer: zero fill Buffer(num) by default by jasnell · Pull Request #12141 · nodejs/node · GitHub

デフォルトでBufferコンストラクタが0をセットすることにより、セキュリティ問題になるのを防ぎNodeを安全化させます。

inspector

node/inspector.md at master · nodejs/node · GitHub

新しいinspectorモジュールはv8のインスペクタで使用されるデバッグプロトコルを使うために作られました。

WHATWG URL

doc: graduate WHATWG URL from Experimental by jasnell · Pull Request #12710 · nodejs/node · GitHub

ステータスが実験から安定へ

–debugがなくなった

--inspect を今後使ってください。

streamにdestroyが追加された

stream: add destroy and _destroy methods. by mcollina · Pull Request #12925 · nodejs/node · GitHub

npmが5.0.0へ

The npm Blog — v5.0.0

他ので詳しく知りたい方はこちらもどうぞ

abouthiroppy.github.io

入りそうで入らなさそうなもの

すでにsemver-majorは凍結済みなのでおそらく入らないと思えます。 github.com

whatwg-consoleに準拠した実装の導入 github.com

さいごに

ざっとでしたが、今現在リリースノートの草稿段階なので公式で出たらもう一度まとめたいなと思います。

NicoHacoというNicoBoxのPC版を作った

github.com

最低限の機能

  • マイリスト作成
  • マイリストへ動画を登録、削除
  • 検索
  • ランキング

まだα段階ですが、よければ使ってみてください!