Flux

この記事はFluxについて解説した記事です。会話形式のやさしい文章で「Flux」の用語のイメージを紹介した後に、採用に役立つFluxの知識を解説しています。

1分で分かる!Fluxとは?

ことりん君、この前説明したMVCとMVVMの話を覚えている??

もちろん!ソフトウェアアーキテクチャの1種だったよね?

そうそう。UIロジックとビジネスロジックの分離を目的としたものだったよね?

うんうん!それがどうかしたの??

実は他にも似たようなものがあるんだよ。

え、まだあるの??

あるんだよねぇ。それはFlux(フラックス)っていうやつで、Facebook社(現Meta社)が提唱しているソフトウェアアーキテクチャなんだ。

Facebook!!なんかすごそう…。でもさ、MVCとかMVVMじゃだめなの??

そうなんだ。Facebook社も、アプリケーション開発時にはMVCとかMVVMなどのソフトウェアアーキテクチャを取り入れてたんだけど、どうやら課題を感じていたらしいんだ。

そうなんだぁ。MVCのダメなところを改善したのがMVVMだと思ってたけど、それでもまだダメなんだね。

そういうことだね。MVCとかMVVMって比較的規模が小さいアプリケーションであればマッチする事が多いんだけど、大規模なアプリケーションとか複雑なアプリケーションには、あんまり向いてないといわれているんだ。

なるほど。どんなアプリケーションにも合う「魔法のアーキテクチャ」みたいなやつはないんだね。それでFluxってどういう特徴があるの??

もう少し説明すると、MVVMの問題点はViewModelとViewが双方向でやり取りをする仕組みにあるんだ。なぜなら、アプリケーションでやりたい処理が増えるとViewModelをどんどん増やさざるを得なくなるんだ。これがメンテナンスしにくいプログラムになる原因になってるんだよ。

ふむふむ。

Fluxは、この双方向性を無くしてデータが必ず一方向にしか流れないように工夫されているんだ。こんな感じだね。

引用:GitHub facebook/flux

たしかに矢印が一方通行になってるね。

そうそう。Fluxは必ずAction → Dispatcher → Store → Viewにしか流れないから、かなり単純化されているよね。これで、実際のプログラムもかなりシンプルになるんだ。

アプリケーションを開発するエンジニアさんとしては、できるだけシンプルな方が助かるんだよね?

そうだね。複雑なプログラムは読みにくいからね。それだけでバグを生む原因になるから、できるだけシンプルにするのが、開発時の鉄則だね。

ほんと、開発時には色々と考えないといけないんだね…。

一応いっておくけど1人ですべてを考える必要はないからね。アプリケーション開発時にどういったアーキテクチャとするかは、アプリケーションアーキテクトっていうエンジニアが大枠を考えたりするんだ。それに何を採用するかは、企業やプロジェクトなどによっても異なるからね。

とりあえず今日はMVCとかMVVMの友達がFluxっていうことで覚えておくよ!

そうだね!ひとまずはその理解でいいと思うよ!

ジャバ―ド先生ありがとう!

Fluxとは?採用に役立つ基礎知識

FluxとはFacebook社(現Meta社)が提唱するUIロジックとビジネスロジックを分離するためのソフトウェアアーキテクチャの1種です。MVCやMVVMもUIロジックとビジネスロジックを分離するためのソフトウェアアーキテクチャですが、大規模アプリケーションであったり、複雑なアプリケーションの場合、プログラムが複雑になってしまう傾向がありました。これらを解決するために考えられたものがFluxです。

なお、Fluxは概念的なものであり、これをアプリケーションとして実現するために開発されたものがJavaScriptのライブラリであるReduxというものです。このReduxもFacebook社が開発しています。

Flux(Redux)を使うエンジニア

前述したとおりFluxは概念的なものであるため、アプリケーション開発時にはFluxの概念を取り入れたライブラリやフレームワークなどを利用します。代表的なライブラリとしては、先ほどご紹介したReduxなどが挙げられます。ReduxはJavaScriptのライブラリであるため、これらを使うエンジニアとしてはフロントエンドエンジニアが挙げられます。

Flux(Redux)を使うエンジニアの特徴と在籍業界

ReduxはWeb業界界隈では、スタンダードな技術です。そのため、比較的モダンなWebアプリケーション側の開発を実践している企業であれば、採用している可能性が高いです。そのため、Reduxを使うエンジニアとしては、Web業界に多く在籍しています。

採用する時に知っておくとよいこと

Fluxを実現する方法

今回はFluxを実現する方法としてReduxをご紹介しました。ただ、実現方法は他にもあります。

何を導入するかはプロジェクトによって異なるため、応募者には開発経験を確認するとよいでしょう。

求人のポイント

求人を作成する時は、下記の内容を求人に入れるとよいです。

1システム(サービス)の詳細
※特にそのシステム(サービス)をなぜ作っているのかを熱量をもって記載する。
2開発環境
3現在のエンジニア組織の体制
4現行システムの課題と募集の背景
5求められる業務と期待値
6エンジニアとしてのスキルアップ支援制度の有無と詳細
7エンジニアチーム内での相互成長のための仕組み(勉強会やLT会など)の有無と詳細
8選考フロー
9待遇
10キャリアパス

Fluxの豆知識

Fluxを使った有名な企業・サービス

ここではFlux(Redux)を使用している有名な企業やサービスについてご紹介します。

ヤフー株式会社 Yahoo! JAPAN トップページ

ヤフー株式会社ではYahoo! JAPANのトップページを刷新した際に、React、Redux、TypeScriptなどの導入を決断したそうです。導入した結果、必要な知識などは増えたものの、メンテナンス性の向上、分業による開発効率の向上などの恩恵があったようです。

https://techblog.yahoo.co.jp/entry/20191203785540/

任天堂 Nintendo eShop 

任天堂社の大人気コンシューマ機であるSwitchでは、Nintendo eShopというオンラインショップが展開されています。このNintendo eShopは、ReactとReduxを採用しているそうです。ちなみに同社も導入のメリットとして、長期的なメンテナンス性向上につながった点を挙げています。

https://html5experts.jp/shumpei-shiraishi/24538/

関連記事

  1. Vue.js

  2. MATLAB

  3. Docker

  4. MySQL

    MySQL

  5. Graphql

  6. Heroku