console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

WebComponentsへの気持ち

この記事では、

  • ReactやVueではなくWebComponentsだけを使いたい気持ちを胸に、とある社内プロジェクトをやってみての学び
  • 巷にあふれるWebComponentsに対する見方への違和感

についてメモっておきます。

ただ「WebComponents」の語がもつ意味をきっちり定義してるわけではないので、そのへんは雰囲気で察してください。
そのせいで勘違いされがちな概念なんかも、知らんけど。

まずは巷にあふれる意見に対する気持ちから。

続きを読む

JestでES Moudlesなモジュールをテストしたい

import { observable } from 'mobx';

class Store {
  // ...
}

export default Store;

のような、`import / export`で書いたモジュールを、Jestでそのままテストしたい。

が、そのまま`require()`することもできないので、なんとかする必要がある。

続きを読む

lit-htmlとhyperHTML

幸か不幸か、この2つについていろいろ調べた機会があったのでメモ。

結果、個人的には、hyperHTML推しです。

続きを読む

WebRTC Meetup Tokyo #18 に行ってきたメモ #webrtcjp

WebRTC Meetup Tokyo #18 : ATND

台風な中、今回も海外スピーカーの多い回やった。

YouTubeでの配信もあったしアーカイブも公開されてるので、今からでも見れます!

WebRTC Meetup Tokyo #18 #webrtcjp - YouTube

続きを読む

MobX 5.0.0 について

出ました!

リリースブログもあるけど、どことなくポエミーなので、おとなしくChangeLog見たほうがいいかも・・w

mobx/CHANGELOG.md at master · mobxjs/mobx · GitHub

3行まとめ

  • v4移行してればほぼやることない
  • `Proxy` ベースになったので、古い環境は要Polyfill
  • コードベースがES5からES6(ES2015)になったので、古い環境は(ry

v4移行についてはこちらもどうぞ。

MobX 4.0.0 について - console.lealog();

基本的にv4とv5のAPIにそこまで違いはなく、中身の実装が違うだけでパフォーマンス的にもそこまで差はないとのこと。

Proxyベースになって変わったこと

v5からは、内部的な実装が`Proxy`を使ったものに変わりました。`immer`で培ったノウハウですね。

Object

これまでのMobXは、宣言時点でマークされてないプロパティはObservableではなかったので、そのあたりの扱いがやや面倒だった。

const { observable, autorun } = mobx;

const obj = observable({ x: 1 });

autorun(() => {
  console.log(Object.keys(obj));
})

obj.y = 1; // <-

v4までは、`obj.y`が増えても検知できなくて、それ用のAPIを使ってた or `Map`でがんばってた。

しかしついにこれがv5では検知できるように!やった!

Array

const { observable } = mobx;

const arr = observable([1, 2, 3]);

Array.isArray(arr); // <-

v4までは、これが`false`だった。
なのでMobX界の外に出るときは、`.slice()`するなり`toJS()`したりしてた。

しかしこれがv5では`true`になります!!Proxy最高!

v4 -> v5移行

  • v4時点でDepricatedだったものを確実に消す
  • 上記のObjectとArrayのワークアラウンドがあれば消す
    • ただし、ObservableArrayに対して`.reverse()`と`.sort()`を呼んでるところは、`.slice()`したままに
  • `mobx-react`と一緒に使ってる場合は、そっちのバージョンも上げる

これだけ。

Jestとの組み合わせでバグがあったっぽいけど、すでに解消済み。

`toEqual` does not treat non-enumerable properties equally · Issue #6392 · facebook/jest · GitHub

`master`にはマージ済みなので、`23.1.1`のリリース待ち。