<commit_before>---
title: "material-fluxというFluxライブラリをREADME駆動で開発した"
author: azu
layout: post
date : 2015-03-17T09:44
category: JavaScript
tags:
    - JavaScript
    - Flux
    - library
    - ES6

---

# Flux

[material-flux](https://github.com/azu/material-flux "azu/material-flux")というFluxアーキテクチャの実装ライブラリを書きました。

[Flux](http://facebook.github.io/flux/ "Flux")って何?と思う人は以下などを見ると良さそうな気がします。

- [React: Flux Architecture - Video Tutorial Series @eggheadio](https://egghead.io/series/react-flux-architecture "React: Flux Architecture - Video Tutorial Series @eggheadio")
- [Fluxとはなんだったのか + misc at 2014 - snyk_s log](http://saneyukis.hatenablog.com/entry/2014/12/24/014421)
- [Fluxアーキテクチャの覚え書きを書いた - snyk_s log](http://saneyukis.hatenablog.com/entry/2014/09/26/174750)
- [The Flux Quick Start Guide](http://www.jackcallister.com/2015/02/26/the-flux-quick-start-guide.html)
- [Getting To Know Flux, the React.js Architecture ♥ Scotch](https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture)
- [What the Flux? (On Flux, DDD, and CQRS) — <NAME>](http://jaysoo.ca/2015/02/06/what-the-flux/ "What the Flux? (On Flux, DDD, and CQRS) — <NAME>")

## なぜ作ったか

IDE readable(machine readable)なライブラリが欲しかったのがひとつの理由です。(d.tsなどを書けばだいたい問題ないですが、特殊なハックはしないという制限が欲しかった)

Fluxライブラリの実装比較をしてる[voronianski/flux-comparison](https://github.com/voronianski/flux-comparison "voronianski/flux-comparison")や[The State of Flux](https://reactjsnews.com/the-state-of-flux/ "The State of Flux")などを出てくるライブラリなどを試しましたが、殆どのライブラリは

- オブジェクトを渡したら、それに合わせたメソッドの生成
	- `createActions`や`createStore`のような仕組みでStoreなどを作る
	- d.tsでカバーできるけど。。。
	- => ユーザが触るのは普通に定義した関数に直接呼ぶ形にしたかった
- 動的なメソッドの上書き
	- Proxy的なことをやってる
	- => ES6 Proxyがあればありかもしれないけど、現状だとただのメソッドの上書き
	- Shapeが壊れる可能性がありそう
- Dispatcherがシングルトンになってる
	- たいていはシングルトンで問題なさそう
	- 実装もシングルトンだと簡単になる
	- けど何か気持ち悪さがある

のようなちょっとしたハックをした実装があったので、勉強も兼ねて[material-flux](https://github.com/azu/material-flux "azu/material-flux")を書きました。

## [material-flux](https://github.com/azu/material-flux "azu/material-flux")の使い方

material-fluxはES6 classを前提としたAPIを組み立てていたので、[Babel][] などと共に使うような想定になっています。
[Flummox](https://github.com/acdlite/flummox "Flummox")などとかなり近い(実際に参考にした)形になっています。


### Action

```js
import {Action} from "material-flux"
// ただの定数なので、任意の文字列であればいいです。
// {"dosome" : Symbol("key")} とかでも問題ない
// export var doSomeKey = "unique value"; を並べる感じでも良い
export const keys = {
    "doSomething": "unique value"
};
export default class UserAction extends Action {
    // or `[keys.doSomething](data){}`と書くこともできるけど補完できなさそう
    doSomething(data){
        // pass the `data` to Store's `onHandler`
        // call `onHandler(data);`
        this.dispatch(keys.doSomething, data);
    }
}
```

### Store

```js
import {keys} from "./UserAction.js"
import {Store} from "material-flux"
export default class UserStore extends Store {
   constructor(context) {
       super(context);
       this.state = {
           userData: null
       };<commit_msg>Update 2015-03-17-material-flux.md<commit_after>---
title: "material-fluxというFluxライブラリをREADME駆動で開発した"
author: azu
layout: post
date : 2015-03-17T09:44
category: JavaScript
tags:
    - JavaScript
    - Flux
    - library
    - ES6

---

# Flux

[material-flux](https://github.com/azu/material-flux "azu/material-flux")というFluxアーキテクチャの実装ライブラリを書きました。

[Flux](http://facebook.github.io/flux/ "Flux")って何?と思う人は以下などを見ると良さそうな気がします。

- [React: Flux Architecture - Video Tutorial Series @eggheadio](https://egghead.io/series/react-flux-architecture "React: Flux Architecture - Video Tutorial Series @eggheadio")
- [Fluxとはなんだったのか + misc at 2014 - snyk_s log](http://saneyukis.hatenablog.com/entry/2014/12/24/014421)
- [Fluxアーキテクチャの覚え書きを書いた - snyk_s log](http://saneyukis.hatenablog.com/entry/2014/09/26/174750)
- [The Flux Quick Start Guide](http://www.jackcallister.com/2015/02/26/the-flux-quick-start-guide.html)
- [Getting To Know Flux, the React.js Architecture ♥ Scotch](https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture)
- [What the Flux? (On Flux, DDD, and CQRS) — <NAME>](http://jaysoo.ca/2015/02/06/what-the-flux/ "What the Flux? (On Flux, DDD, and CQRS) — <NAME>")

## なぜ作ったか

IDE readable(machine readable)なライブラリが欲しかったのがひとつの理由です。(d.tsなどを書けばだいたい問題ないですが、特殊なハックはしないという制限が欲しかった)

Fluxライブラリの実装比較をしてる[voronianski/flux-comparison](https://github.com/voronianski/flux-comparison "voronianski/flux-comparison")や[The State of Flux](https://reactjsnews.com/the-state-of-flux/ "The State of Flux")などを出てくるライブラリなどを試しましたが、殆どのライブラリは

- オブジェクトを渡したら、それに合わせたメソッドの生成
	- `createActions`や`createStore`のような仕組みでStoreなどを作る
	- d.tsでカバーできるけど。。。
	- => ユーザが触るのは普通に定義した関数に直接呼ぶ形にしたかった
- 動的なメソッドの上書き
	- Proxy的なことをやってる
	- => ES6 Proxyがあればありかもしれないけど、現状だとただのメソッドの上書き
	- Shapeが壊れる可能性がありそう
- Dispatcherがシングルトンになってる
	- たいていはシングルトンで問題なさそう
	- 実装もシングルトンだと簡単になる
	- けど何か気持ち悪さがある

のようなちょっとしたハックをした実装があったので、勉強も兼ねて[material-flux](https://github.com/azu/material-flux "azu/material-flux")を書きました。

## [material-flux](https://github.com/azu/material-flux "azu/material-flux")の使い方

material-fluxはES6 classを前提としたAPIを組み立てていたので、[Babel][] などと共に使うような想定になっています。
[Flummox](https://github.com/acdlite/flummox "Flummox")などとかなり近い(実際に参考にした)形になっています。


### Action

```js
import {Action} from "material-flux"
// ただの定数なので、任意の文字列であればいいです。
// {"dosome" : Symbol("key")} とかでも問題ない
// export var doSomeKey = "unique value"; を並べる感じでも良い
export const keys = {
    "doSomething": "unique value"
};
export default class UserAction extends Action {
    // UserAction#doSomething
    doSomething(data){
        // pass the `data` to Store's `onHandler`
        // call `onHandler(data);`
        this.dispatch(keys.doSomething, data);
    }
}
```


### Store

```js
import {keys} from "./UserAction.js"
import {Store} from "material-flux"
export default class UserStore extends Store {
   constructor(context) {
       super(context);
       this.state = {
           userData: null
       };
{'fraction_non_alphanumeric': 0.14360978925900747, 'fraction_numerical': 0.022773623385452073, 'mean_word_length': 4.594106463878327, 'pattern_counts': {'":': 2, '<': 7, '<?xml version=': 0, '>': 11, 'https://': 16, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2634938', 'n_tokens_mistral': 3097, 'n_tokens_neox': 2796, 'n_words': 350}