最近のフロントエンド事情はまるで発展途上国の交通事情ですか

ES6で書いてES5に変換したいだけなのに、なんなんですか？

ES6からES5に変換したいだけなんだ

Babel

Babelを使えば変換できる。。。

Babelを毎回実行するのだるいからWebpackでタスクランナー的に実行する。

考えはいい。それで十分だし、何も難しいことはなさそうだ。

でもいざ環境を揃えようとすると……

以下をインストールする。

• webpack
• webpack-dev-server
• babel-core
• babel-loader
• babel-preset-es2015

webpack.config.jsと.babelrcにも設定を書く。

これですむのならいい。

実行したら文法エラーが出た。

• babel-preset-stage-0

を追加したら解決した。

なんだよそれ！最初からbabel-coreだけで対応しろよ！

他にもbrowserify,babelifyとかいろいろプラグイン的なものがある。

自分の書いたES6のコードを動くようにするのにいったいどれを入れたら動くのか分からない！

BabelとWebpack

webpackの設定及び.babelrcにも何を変換処理に使うのか書かないとちゃんと変換されない。

webpackに書いただけじゃダメで.babelrcにも書かないといけない。という認識だけど、多分理解が足りなくて本当は綺麗な書き方があると信じてる。

まとめ

ES6で書いてES5に変換するの辛い。

早くブラウザが標準でES6対応してほしい。

Reduxについて感化されたこと

Reduxについて不満に思っている部分について考察している記事を見かけた。

自分もReduxを少し触ってみて「？」と思っていたことなどが言語されていた。

理解して納得していること

Reactの場合は上からもらうプロパティはPropsで読み取り専用。

要素ごとにstateという読み書き可能なプロパティを持つ。

ReduxはFluxアーキテクチャの実装。

1つの状態を管理するStoreのみ。

Actionを呼びReducerが状態を更新する。それぞれはプレーンなjavacsriptで書く。

ここまではいい。とても素敵に感じた。

受け入れがたいところ

javascriptといえば、画面上の何かを触ったらイベントを拾って画面を変えたりとか、非同期で外からデータを持ってくるとかですよね。

その非同期処理をReduxではどう書くのか、実はActionは処理のオブジェクトを生成するだけだし、Reducerは更新結果の状態を同期処理で作るだけ。

ビジネスロジック的なものや非同期処理はどこに書くのか？

基本的には無い。なので後付け？でてきたMiddlewareてのを作る。

Reduxの思想では、非同期の処理前、処理中、処理結果(成功・失敗)をそれぞれ状態として更新する。

その処理をMiddlewareに書くのだけれど…書くのだけれど、これがすごく気持ち悪いと感じていた。

いろいろ他の書き方が無いのかとか本来自分はどう書きたいのかということを考えると、乖離が大きく、辛い。

その辺りをReducerの状態を更新する処理のところで非同期処理を呼び出して結果を入れる書き方を考えた方がいらっしゃって、外国のReduxのコミュニティに投稿したら、disられてた。

Reduxの基本設計に不備があって、それをごまかすためのMiddlewareは許されて、Reducerに非同期処理結果を突っ込むのは違うとかって言うの、どうなの？

まとめ

ReduxのMiddlewareがいまいち気に入らないので、非同期処理も考慮されたFluxアーキテクチャのオレオレ実装を作るしか無いのか。。。