
こんにちは，ぬまです。

今回初めてISUCONに参加したので記録を残したいと思います。

初めての参加なので結果の良し悪しは置いておいて，何を学んで次回どうするのが良いのか反省点などについて考えていきます。
結果は2855点と言うという点数でした。ほとんど初期状態と変わってないです。
![score](/images/posts/isucon-score.png)

### 使ったツール
* alp - log解析ツール
* qt-query-digest- MySQLのスロークエリーログ解析ツール
* top - 負荷計測ツール

### やったこと  
　まず，問題文を読み，デプロイを行い，webサービスを見てみました。
明らかに読み込みが遅いことが見てわかりました。
その後，パフォーマンスを計測しようということで，サーバーにツールの導入しました。初参加で右も左も分からなかったため，秘伝のタレなどなく，自力で導入しました。このときにNginxに慣れておらず，alpで解析できるようにnginxのログ形式を変更にするのに苦戦しました。

　チームメンバーがMySQL用にpt-query-logを導入してくれたので，とりあえず，計測し，MySQLがボトルネックだとわかりました。
MySQLの負荷を下げるためにhistroy_visitテーブルが明らかに遅く，探索レコードの数が多かったのでindexを張りました。index後に計測するとしっかりパフォーマンス向上を確認しました。

　次に，スロークエリーログを見るとid_generatorが無駄にIDを生成しているのでUUIDにすることで無駄なアクセスを無くしました。
　この時点で16時すぎていて，かなり時間がない状態でした。最後にN+1問題がたくさん散見されたので，計測結果からボトルネックとなるクエリをjoinによって改善してみましたが，エラーででできませんでした。
　
### 反省点
* 言語決定  
当日になっても言語が決まらず，チームメンバーでGoで行く話でしたが特に誰かができるわけでもなく，Node.jsの方が読みやすかったので途中まではGoの環境でパフォーマンスを向上していき，一人のメンバーが他のサーバーで速い言語でパフォーマンスを計測して速いものを採用していきました。初期実装のGoかあるいはみんなが少なくとも経験のあるNode.jsに絞って戦うことで，問題に立ち向かえると思いました。  

* 実装分担  
全員が初心者ということもあり，一つ一つの計測，ボトルネックの発見，実装まですべて三人で相談しながら行っていました。時間が無限にあればこれでもいいかもしれませんが，制限時間内でスコアを伸ばすことを考えたら，各自の得意分野やできることからどんどん改善し，困ったら相談という方針でも良かったのかなという反省です。  

* 実装方法  
これもまた経験値のNASAから来ることですが，デプロイが終わった後に「これどうやって改修するの？ローカルで開発はできないの？」という疑問に陥りました。メンバーの一人がサーバー上のコードをscpでローカルに持ってきて，githubに共有してくれましたが，ローカルでdocker-compose upをしてもpublic.pemを変えないと立ち上がりませんでした。(もちろんテンパっていたのでなにがいけないのかすらわからず。)過去問練習ではrepositoryが公開されていたので，それを使っており，本番でもそのような形で配布などあるのかと思ってました。ローカルの環境でテストができないため，改善もどうする?という話の中，結果的に慣れないviでの修正に走りました。nginxの設定もvi上で行い，かなり時間を使いました。

* SQL, リバースプロキシ関連のIT知識不足  
SQL自体をINNER JOINに書き換える際にバグを埋め込んでいたり，serverの各ツールを使って計測したときに結果がなんなのか読めていなかったり，Nginxの設定で煮詰まったりと参加以前に基本的なスキルが欠落しているのがわかりました。参加した結果，僕はSQL，Nginx，トランザクションなど基本的なスキルが皆無であることと，アプリケーションを速くするための基本スキルがないことがわかりました。


### おわりに
　結果としては全然ダメダメでしたが，CPU負荷率を計測し，改善を施した後に，負荷率が大幅に減少した瞬間に，「お！！楽しい！」という感覚に襲われたので，来年ではもっとスキルをつけて再チャレンジしたいと思います。一緒に出てくれた@Bapliscaくんと@YSSくんありがとう！来年はもっと力をつけて出ましょう。このブログで書いた反省点は他の人たちに当てはまるかわかりませんが，僕たち(私たち)はこういう反省があった，こういうふうに進めると良いよなどあればご教授願いたいです。おすすめのブログなどもあれば読ませていただきます。  
　この反省点と他の参加者の参加記録を読んで来年に繋げたいと思います。




ISUCON初参加


こんにちは，ぬまです。
新卒入社まもなくハッカソンの研修中にドラッグ&ドロップ(以下，D&D)の実装を初めて書いたため，実装メモを残します。

### 使用技術
* Next.js + Typescript
* Chakra UI
* prettier + ESLint

repository: https://github.com/tomoyuki-hiranuma/drag-and-drop
### 仕様
* 入力ファイルは画像(png, jpg, jpeg)のみ
* 一度に保持できるファイル総数は5枚まで
* 同じファイル名のファイルは入力できない

### 概要
HTMLのイベントハンドラのonDragEnter, onDragOver, onDragLeave, onDropを使ってイベントを検知します。onDrop時にtargetの値を取得し，stateの更新処理を行います。   
以下の図のコンポーネントを作成します。

![drag-and-drop](/images/posts/D&D.png)

### 実装
全体のコード

``` typescript
import { DragEvent, useState } from 'react';
import { AspectRatio, Box, Flex } from '@chakra-ui/react';
import { css } from '@emotion/react';
import Image from 'next/image';

const styles = {
  input: css`
    opacity: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
  `,
};

type ImageType = {
  name: string;
  data: string;
};

// refs: https://felixgerschau.com/react-typescript-ondrop-event-type/
export const UploadImages = (): JSX.Element => {
  const [images, setImages] = useState<ImageType[]>([]);
  const MAX_WIDTH = 300;
  const MAX_HEIGHT = 300;
  const MAX_IMAGE_NUMBER = 5;
  const allowedExtensions = new Array('jpg', 'jpeg', 'png');

  const getExtention = (filename: string) => {
    const position = filename.lastIndexOf('.');
    if (position === -1) return '';
    return filename.slice(position + 1);
  };

  const allowedExtention = (filename: string) => {
    const extention = getExtention(filename).toLowerCase();
    if (allowedExtensions.indexOf(extention) === -1) return false;
    return true;
  };

  const isOverMaxLength = (currentFiles: ImageType[], newFiles: File[]): boolean => {
    return currentFiles.length + newFiles.length > MAX_IMAGE_NUMBER;
  };

  const loadImage = (src: string) => {
    return new Promise((resolve, reject) => {
      let img = document.createElement('img');
      img.src = src;
      img.onload = () => {
        resolve(img);
      };
      img.onerror = () => {
        reject(img);
      };
    });
  };

  const onDragEnter = (e: DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const onDragOver = (e: DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    e.dataTransfer.dropEffect = 'copy';
  };

  const onDragLeave = (e: DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const onDrop = (e: DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();

    let files = Array.from(e.dataTransfer.files);

    if (images.length > MAX_IMAGE_NUMBER) return;

    if (files && files.length > 0) {
      const existingFiles = images.map((f) => f.name);
      files = files.filter((f) => !existingFiles.includes(f.name) && allowedExtention(f.name));
    }

    if (isOverMaxLength(images, files)) return;

    if (files && files.length > 0) {
      files.map((f) => {
        const reader = new FileReader();
        // ref: https://qiita.com/rch850/items/33d6933b3c73e112c5b6
        reader.onload = (e: any) => {
          const base64 = e.target.result;

          loadImage(base64)
            .then((img: any) => {
              let canvas = document.createElement('canvas');
              let ctx = canvas.getContext('2d');
              ctx?.drawImage(img, 0, 0);

              let width = img.width;
              let height = img.height;

              if (width > height && width > MAX_WIDTH) {
                height *= MAX_WIDTH / width;
                width = MAX_WIDTH;
              } else if (width <= height && height > MAX_HEIGHT) {
                width *= MAX_HEIGHT / height;
                height = MAX_HEIGHT;
              }
              canvas.height = height;
              canvas.width = width;
              ctx = canvas.getContext('2d');
              ctx?.drawImage(img, 0, 0, width, height);

              const data = canvas.toDataURL(f.type);

              setImages(
                images.concat([
                  {
                    name: f.name,
                    data: data,
                  },
                ]),
              );
            })
            .catch((e: unknown) => {
              console.log('error');
            });
        };
        reader.readAsDataURL(f);
      });
    }
  };
  return (
    <Flex
      pt={`100px`}
      justifyContent={`center`}
      flexDirection={`column`}
      alignItems={`center`}
      gap={`48px`}
    >
      <Box
        position={`relative`}
        width={`sm`}
        height={`180px`}
        border={`1px`}
        borderColor={`blue.600`}
        borderStyle={`dashed`}
        borderRadius={`8px`}
        onDragEnter={onDragEnter}
        onDragOver={onDragOver}
        onDragLeave={onDragLeave}
        onDrop={onDrop}
      >
        <Flex
          position={`absolute`}
          top={`50%`}
          left={`50%`}
          transform={`translate(-50%, -50%)`}
          justifyContent={`center`}
          alignItems={`center`}
          height={`full`}
          textAlign={`center`}
        >
          ドラッグ&amp;ドロップ
          <br />
          してください
        </Flex>
        <label>
          <input
            type={`file`}
            multiple
            css={styles.input}
            accept='image/png, image/jpeg, image/jpg'
          />
        </label>
      </Box>
      <Flex gap={`24px`}>
        {images.map((f) => {
          return (
            <AspectRatio width={`100px`} ratio={4 / 3} key={`${f.name}`}>
              <Image alt={`${f.name}`} src={f.data} layout={`fill`} objectFit={`cover`} />
            </AspectRatio>
          );
        })}
      </Flex>
    </Flex>
  );
};

```

### 手順
1. onDropで選択したfileをe.dataTransfer.filesで取得

```typescript
const onDrop = (e: DragEvent<HTMLDivElement>) => {
  ...

  let files = Array.from(e.dataTransfer.files);

  ...
};
```
2. ファイル名の重複と，拡張子によるバリデーション

```typescript
const onDrop = (e: DragEvent<HTMLDivElement>) => {
  ...

  if (files && files.length > 0) {
    const existingFiles = images.map((f) => f.name);
    files = files.filter((f) => !existingFiles.includes(f.name) && allowedExtention(f.name));
  }

  ...
};
```
3. 画像データ取得

```typescript
const loadImage = (src: string) => {
  return new Promise((resolve, reject) => {
    let img = document.createElement('img');
    img.src = src;
    img.onload = () => {
      resolve(img);
    };
    img.onerror = () => {
      reject(img);
    };
  });
};
const onDrop = (e: DragEvent<HTMLDivElement>) => {
  ...

  if (files && files.length > 0) {
    files.map((f) => {
      const reader = new FileReader();
      // ref: https://qiita.com/rch850/items/33d6933b3c73e112c5b6
      reader.onload = (e: any) => {
        const base64 = e.target.result;

        loadImage(base64)
          .then((img: any) => {
            ...
          })
          .catch((e: unknown) => {
            console.log('error');
          });
      };
      reader.readAsDataURL(f);
    });
  }
};
```
4. 画像データをcanvasを用いてresize

```typescript
const onDrop = (e: DragEvent<HTMLDivElement>) => {
  ...

  if (files && files.length > 0) {
    files.map((f) => {
      const reader = new FileReader();
      // ref: https://qiita.com/rch850/items/33d6933b3c73e112c5b6
      reader.onload = (e: any) => {
        const base64 = e.target.result;

        loadImage(base64)
          .then((img: any) => {
            let canvas = document.createElement('canvas');
            let ctx = canvas.getContext('2d');
            ctx?.drawImage(img, 0, 0);

            let width = img.width;
            let height = img.height;

            if (width > height && width > MAX_WIDTH) {
              height *= MAX_WIDTH / width;
              width = MAX_WIDTH;
            } else if (width <= height && height > MAX_HEIGHT) {
              width *= MAX_HEIGHT / height;
              height = MAX_HEIGHT;
            }
            canvas.height = height;
            canvas.width = width;
            ctx = canvas.getContext('2d');
            ctx?.drawImage(img, 0, 0, width, height);

            const data = canvas.toDataURL(f.type);

            ...
            );
          })
          .catch((e: unknown) => {
            console.log('error');
          });
      };
      reader.readAsDataURL(f);
    });
  }
};
```
5. state更新

```typescript
const onDrop = (e: DragEvent<HTMLDivElement>) => {
  ...

  if (files && files.length > 0) {
    files.map((f) => {
      ...
      // ref: https://qiita.com/rch850/items/33d6933b3c73e112c5b6
      reader.onload = (e: any) => {
        ...

        loadImage(base64)
          .then((img: any) => {
            ...

            setImages(
              images.concat([
                {
                  name: f.name,
                  data: data,
                },
              ]),
            );
          })
          .catch((e: unknown) => {
            console.log('error');
          });
      };
      ...
    });
  }
};
```

では，また

reactでdrag&dropの実装めも


こんにちは，ぬまです。

複数のテーブルを結合するSQLにINNER JOINとOUTER JOINがあります。
今回はこの二つの違いをLeetCodeを通じて学んだのでメモとして残します。

### INNER JOIN
INNER JOINは二つのテーブルを内部結合する時に使います。
内部結合したいと思ったら，INNER JOINの出番です。
内部結合とは，二つのテーブルを結合する時に，条件に一致するレコードのみを取得する結合方法です。

以下のテーブルを例に考えてみます。

Users

| id | name |
| ---- | ---- |
| 1 | name1 |
| 2 | name2 |
| 3 | name3 |

Posts

| id | title | owner_id |
| ---- | ---- | ---- |
| 1 | title1 | 1 |
| 2 | title2 | 1 |
| 3 | title3 | 3 |

上記のテーブルに対して，User(左)とそのUserが作成したPost(右)を結合したデータを取得すると以下のSQL分を作成します。

※左...結合時に左側に考えるテーブルのことで，主語のようなもの。

※右...結合時に右側に考えるテーブルのことで，目的語のようなもの。

```sql
SELECT * FROM users INNER JOIN posts ON users.id = posts.owner_id;
```
usersのテーブルのuser.idとpostsのowner_idが一致するデータのみを結合し，全てのカラムについて選択します。

Results
| id | name | id | title | owner_id |
| ---- | ---- | ---- | ---- | ---- |
| 1 | name1 | 1 | title1 | 1 |
| 1 | name1 | 2 | title2 | 1 |
| 3 | name3 | 3 | title3 | 3 |

結果がこのようになり，条件と一致するレコードに対してのみ取り出しています。

### OUTER JOIN
OUTER JOINは二つのテーブルを外部結合する時に使います。
外部結合とは，二つの結合する時に，すべてのレコードを結合します。そして，存在しないカラムにはNULLが入ります。
さらに，この外部結合には３種類の結合方法があります。

※MySQLではFULL OUTERが対応していないため，RIGHTとLEFTのみになります。(DBによって何が使えて何が使えないかについて，詳しくは知らないです。)

各外部結合について先ほどと同様の例を用いて紹介します。

#### LEFT OUTER JOIN
左外部結合のことで，ここでの左は左側に結合する外部結合のやり方のことで，テーブルの主語とは異なっていることに注意されたい。

```sql
SELECT * FROM users LEFT OUTER JOIN posts ON users.id = posts.owner_id;
```
上記のSQL文を生成すると，以下の結果が得られる。

Results
| id | name | id | title | owner_id |
| ---- | ---- | ---- | ---- | ---- |
| 1 | name1 | 2 | title2 | 1 |
| 1 | name1 | 1 | title1 | 1 |
| 2 | name2 | null | null | null |
| 3 | name3 | 3 | title3 | 3 |

このように，左外部結合では，全てのUserに対して，条件の一致するデータを取得するが，データが存在しないUserに対するデータにはnullが入る。

#### RIGHT OUTER JOIN
一方で，右外部結合の場合を考える。

```sql
SELECT * FROM users RIGHT OUTER JOIN posts ON users.id = posts.owner_id;
```

Results
| id | name | id | title | owner_id |
| ---- | ---- | ---- | ---- | ---- |
| 1 | name1 | 1 | title1 | 1 |
| 1 | name1 | 2 | title2 | 1 |
| 3 | name3 | 3 | title3 | 3 |

このように，全てのPosts(右)に対して，条件の一致するデータを取得するがm，データが存在しないPostsに対するデータにはnullが入る。

つまり，左外部結合では，二つのテーブルに対して，左側のテーブルの全てのレコードに対して条件に一致するレコードを取得し，存在しない場合はnullが入り，右外部結合では，二つのテーブルに対して右側のテーブルの全てのレコードに対して条件に一致するレコードを取得し，存在しない場合はnullが入れる。

#### FULL OUTER JOIN
今回はMySQLについて考えており，MySQLにはない構文なため割愛する。
考え方としては，和集合になる。

### まとめ
INNER JOIN

![inner join](/images/posts/inner_join.png)

LEFT OUTER JOIN

![left outer join](/images/posts/left_outer_join.png)


RIGHT OUTER JOIN

![right outer join](/images/posts/right_outer_join.png)

今回は，INNER JOINとOUTER JOINについてまとめました。普段はORMに頼っている部分があるので，今後もSQLの勉強を通して，理解を深められればなと思います。

では，また。

OUTER JOIN, INNER JOINの違い


こんにちは、ぬまです。  
久々の投稿ですが，修論に終わりが見えたので2021年の振り返りと2022年にやりたいことを掲げます。

### 2021年の振り返り
昨年の振り返りを月ベースで行います。
##### 1月
人生初の学会の参加を決め，アブストを提出しました。
##### 2月
大した結果もないのに学会参加にしたために、急いで研究(結果がある程度出てから参加を決めようね。)  
論文執筆。
##### 3月
論文提出。  
京都にいる友人宅に遊びにいきました。(2022年は彼とたくさん遊んであげたいですね)  
夏の陣で仲良くなったチームメンバーと飲みました。
##### 4月
TOEIC890点取得。内定取り消し回避しました。
##### 5月
収入も技術もなかったのでインターンを探し始める。  
##### 6月
学会発表。  
僕の研究のレベルの低さを体感。   
友人経由で、スタートアップでの長期インターンが急遽決定。 
##### 7月
研究を１から見直し、既存の問題点から洗い出して、いろんな実験データを取り始める。(テーマが定まらずにめちゃくちゃ苦戦)  
→修士であればこういうときに助け舟を出してもらえるラボがいいと思う。  
たくりんとんくん，とさくん，きっちんさんと初めての焼肉！！またいきましょう！！  
僕の周りにエンジニアやっている人や、学生で普段コードを書いている人が本当にいなかったので、関われて嬉しい。
##### 8月
親知らずの抜歯。痛かった。  
内定者インターン開始。ひたすらドキュメント読んで、使用技術の公式ドキュメント読んでインプットしまくる。
##### 9月
中間発表。  
内定者Techハッカソン優勝。  
従兄弟が結婚。
##### 10月
内定者インターンとスタートアップのインターンで技術や開発について経験  
→React, Next, Java, Kafka, Hasuraさまざまな技術に触れてきた。スタートアップの会社で技術選定の決定をさせてもらえたのはかなり大きな経験だと思う。めっっちゃ調べて触ってた。  
##### 11月
修士の学位申請など、修論もやらないとまずいことに気づく。  
研究とインターンを並行していてオーバーワークだったなと反省。  
##### 12月
内定者インターンで任されていた1案件を無事リリース準備完了して休職。メンターのテックリードの人にたくさん支えられました。  
本月をもって、スタートアップの長期インターンも休職。  
修論執筆に専念。  

#### 2021年のまとめ
2021年はインターンと研究で二足の草鞋になっていて，睡眠はしっかり取れていたもののオーバーワークな気がしていました。それはそれで楽しかったので、若いうちに何年かはオーバーワークでも楽しいかなと思います。

---

### 2022年の目標
2022年はいくつかのやりたいことがあるので、それをまとめます。  
#### やりたいこと
###### 自作ブログをフルスクラッチで作る  
今の自作ブログはHugoで作っているので、それをフルスクラッチでFigmaでデザイン組んでフロントエンドもバックエンドも作りたいなという感じですね。 使いたい技術はまだ定まってませんがTypescriptに焦点を当てようかなと。
###### ポートフォリオを作り替える
これも自作ブログ同様に作り替えたいなと思ってます。理由は単純で現在はVue.jsで書いているのですが、普段滅多に使っていない上に他のフレームワークを使ってTypescriptで書きたいなと考えてるので実現する予定です。
###### OSSコントリビュート  
これは人のコードを読んだり仕事以外でもコードを書いたりしたいので、初の挑戦としてやってみたいと思ってます。これについては続くかわかりませんが、半年間で1回でもPRがマージされたらいいなと思ってます。
###### 競プロ再開
アルゴリズム力は転職でも問われるので、定期的に参加したり勉強していきたい。さすがに緑は行きたい。
###### 仕事頑張る
これはあたりまえ体操ですね。エンジニアとしていろんな技術や考え方を身につけてキャリアプランや将来も見据えて生活していきたいです。
###### 中国語検定準4級・4級取得
単に来年から配属されるであろう部署が中国人の方達が多いので、中国語を聞いて読めるようになりたいです(結構雑談もしているので盗み聞きたい。)。その慣れのための中国語検定です。余力があれば会話もしていきたいなと。(まず、英語を話せ。はい。)
###### 英語の発音と話す能力の向上
純粋に話せるようになりたい。だって、かっこいいじゃん。使える言語ツールを増やしたいですね。
###### 応用情報技術者試験合格
学部生並みの情報系に関する知識理解・応用力を自分の中で証明したい。
###### 中型バイクの免許の取得
バイクに乗りたいです。以上！
###### ブログを定期的に書く
去年サボりすぎている上に、自分の中でブログを書く意味が見出せていなかったです。今年は、文書で人に伝える力を養うためにブログを継続的に書いていこうと思います。と、修論を書いてて思いましたとさ。
###### 社会人バスケチームに入る
純粋にバスケをできていないので、やりたいです。この記事を読んでくれた人で社会人バスケやっている方がいたらお誘いしていただけると嬉しいです。  
小中高大とバスケをやってきたので，ダイエットや運動、人間関係を増やすためにも定期的にバスケをしていきたい。
###### 卒業
できるかなぁぁ...

### まとめ
今年は学びに貪欲に、いろんな技術に触れ、いろんな人と関わっていく中で新たな経験を積んでいきたいなと思います。
また、いろんな経験の中でキャリアについてもゆっくり考えていきたいなと思います。  
社会人が楽しみです。  
では、また！

2021年の振り返り&2022年の目標


こんにちは、ぬまです。  
今回はReduxを勉強していてReduxというフレームワークの理解に詰まったので、Reduxの設計フレームワークのヒントとなったFluxという設計思想についてのメモです。  
### React
ReactというのはJavaScriptのライブラリであり、JavaScriptをコンポーネントベースで開発することを可能にしたライブラリです(今までフレームワークだと思っていた顔)。コンポーネントベースで開発できると何が良いかというと、コンポーネントの再利用が可能となることでViewの開発が効率よくなります。  
Reactでは　JSXで記述することでHTMLにJavaScriptを埋め込むことが可能となりました。これにより今までgetElementByIdなどで行なっていたDOM操作もかなり楽に行えるという点で画期的なライブラリといえます。(ただし、Babelなどのトランスパイラが必要)  
ReactではStateを使った状態管理が行えることでSPAのような比較的小さなアプリの際に簡単に状態管理ができるようになりました。しかし、Stateではアプリが大規模になるにつれてState更新の際にさまざまなコンポーネントに変更を知らせる必要があります。これはめちゃくちゃめんどい。。
### Redux
Reactでよく使われる状態管理フレームワークとしてReduxがあります。今回はReduxの元となった考えであるFluxについてのメモをするので、ここではふーんという感じでスルーします。   
### Flux
![flux](/images/posts/flux-flow.png)
Fluxとは状態管理の設計思想です。まぁ役割分担しようぜってことやな。これらは必ず１方向のみにやりとりを行うルールになってます。  
Stores: アプリケーション全体の状態を一元管理していて、state変更→アプリケーション全体における状態が変わる。  
View: ユーザが見ることのできる画面でReactのコンポーネントに該当  
Actions: Viewから発火されるイベントのこと  
Dispatcher: Storeに変更を依頼する人。伝達係  
  
**概要のフロー**  
ユーザがボタンクリックなどのイベントを起こす  
↓  
イベントの発火、Actionの決定  
↓  
dispatcherでActionと変更のデータを渡す  
↓  
dispatcherで渡されたActionとデータを元にstateの更新  
↓  
stateをViewに渡す  

このフローの設計思想のことがFluxという理解をしています。
Reduxはこの思想を拡張したフレームワークなので土台はこの考え方ということがわかったというメモで終わりたいと思います。  
**よし、Flux完全に理解した。**  
次はRedux完全に理解したい  