はじめに

先日、「Web Developer Roadmap 2018が出たので2017年版と比較してみる」というを記事を読み、「Web Developer Roadmap - 2018」という最近のwebの開発環境をまとめた素晴らしいものをみつけました。その中で、Front-end Roadmapにおいて、いくつか自分の知らないものを見つけ、気になって調べてみたので記事にしようと思います。

具体的には、以下を調べました。

Javascript -> react -> MobX
Javascript -> Anglar -> RxJS
Javascript -> module loader/bundler -> Rollup
Javascript -> module loader/bundler -> Parcel

MobX

Reduxと同じJavaScriptのデータの流れを分かりやすく整理するために使われるアーキテクチャの一つ。
自分が調べたところ、Reduxと比較した特徴としては、以下のようです。

Store概念がわかり易い
コード量が少ない

Reduxでは、StoreはReducerを経由することで値を参照し、また、ActionType・ActionCreatorを経由して値を変更するなど、Storeを扱うのに一手間必要でした。それが、MobXでは、実際にコンポーネントがStoreを宣言し参照したり、値を変更したければStoreに依頼したりするようです。最近のjavascriptフレームワークで重要な役割を担っている、Storeの扱いがシンプルになるのは開発をする上では便利そうでした。ただ、Storeに関する処理が複雑になるようなアプリでは、しっかり設計をしないと後々負の遺産をたくさん抱え込んでしまうような気がします。

ぱっと調べた印象だと、Reduxよりも学習コストが少なそうなので、それほど大きなアプリを作るのでなければ一度使ってみたいなと感じました。

RxJS

RxJSとは Reactive Extensions for JavaScript の略称で、 Reactive Extensions (Rx) という .NETのフレームワークをjavascriptで使えるようにしたライブラリです。非同期処理を簡潔かつ可読性高くコーディング出来ることを主な目的としています。

Anglarは幾つかの外部ライブラリに依存しているのですが、RxJSはその外部ライブラリとして利用しているもののうちの一つです。Angularではhttpリクエスト周りにおいて内部で Observableを返すなどといった使われ方をしているらしいです。

以下の記事がRxJSがどんなものなのかとてもわかりやすく参考になりましたので載せておきます。
「RxJS」初心者入門 – JavaScriptの非同期処理の常識を変えるライブラリ

以下のコードのようにプログラムをかけるらしいです。コードは、上記の記事から抜粋させていただきました。

// `subscribe()`に渡すためのobserverを作成する。
var observer = Rx.Observer.create(function (num) {
    // 新しい値がプッシュされたときに
    return console.log("onNext: " + num);
}, function (error) {
    // エラーが起きたときに
    return console.log("onError: " + error);
}, function () {
    // 全ての値をプッシュし、ストリームが終了したときに
    return console.log('onCompleted');
});
 
Rx.Observable.from([1, 2, 3, 4, 5, 6, 7, 8])
    // 一要素ごとに500ミリ秒ずらす
    .delayWithSelector(function (num) {
        return Rx.Observable.timer(num * 500);
    }).filter(function (num) {
        return num % 2;
    }).map(function (num) {
        return num * num;
    }).subscribe(observer);

// => onNext: 1
// => onNext: 9
// => onNext: 25
// => onNext: 49
// => onCompleted

非同期処理をメソッドチェーンでかけるため、Javascriptでよく問題となる、非同期処理のコールバック地獄を解決するライブラリとして便利そうです。ただ、コードを流し読みした感じだと、学習コストが少し高そうだなと感じました。未だにJQueryをメインで使っている自分にとっては、手足のように使えるようになるためには少し時間がかかりそうです。

Rollup

Webpackと同じBundlerの一種です。特徴としては、以下のようです。

生成ファイルが小さい
ES6(ES2015)ネイティブ

一旦なんでもかんでもES6にして、あとは必要に応じてbabelでES5に変換します。内部処理は、常にES6を前提に行われます。例えば、CoffeeScriptであれば、以下のような感じで変換するようです。

CoffeeScript --> ES6 --(babel)--> ES5 --> CommonJS / AMD

また、npmに公開されているCommonJSのモジュールはそのままだと読み込むことすらできないらしく、プラグインでES6に変換してから結合してやる必要があります。

CommonJSモジュール(ES5) --(プラグイン)--> ES6 --(babel)--> ES5 --> CommonJS / AMD

ES6にすべて一度変換することにどんな意味があるのかというと、ひとつの理由としては、「静的解析」をコードにかけることができることです。コンパイルの時点で静的解析をかけることで、利用されていないコードを削除することが可能なため、バンドルサイズを非常に小さく抑えてくれるらしいです。

Parcel

こちらもWebpackと同じBundlerの一種です。
一番の特徴は、

ビルド速度がwebpackと比べてかなり速い
webpack.config.jsのような設定ファイルが必要ない

というとこでしょうか。
とくに、ビルドの早さに関しては、公式のベンチマークによると、キャッシュを利用すればWebpackの8倍も早いとのことなので、ビルドに早さを求めるアプリの開発ならばBundlerの検討に上がってきそうです。

感想

フロントエンド周りは環境の移り変わりが激しいので、上記で来年には名前も聞かなくなっているものもあるかもしれませんが、どうなるか楽しみです。個人的には、RxJSは学習コストは高そうだけれども、使えるようになればかなり便利そうだなと感じました。

参考

web developer roadmap

MobX

RxJS

RxJS を学ぼう #1 - これからはじめる人のための導入編
「RxJS」初心者入門 – JavaScriptの非同期処理の常識を変えるライブラリ
Webフロントエンドでリアクティブプログラミング

Rollup

Rollupがちょうどいい感じ

Parcel

Parcel 入門～Parcelはwebpackの代わりになるのか～