もう驚くようなことではないかもしれませんが、Nintendo Switch では React が利用されている、とのこと。
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた
現代のゲームコンソールはどれもブラウザを搭載していますが、スマートフォンの WebView コンポーネントのように、インターフェースの構築にブラウザエンジンが使えて、Nintendo eShop は React で作られている、ということが語られていました。
デファクトスタンダードとなった React
Chrome の拡張に、今見ているサイトでどんな技術が使われているかを分析してくれる Wappalyzer というウェブエンジニアには必須といってもよい拡張があります。この拡張をインストールすると、普段使っているサイトのほとんどで React が使われていることが実感できるでしょう。
先日、「Netflix がランディングページで React を使わなくなった」というニュースについての記事を書きましたが、React をやめたのはあくまでランディングページのみで、ログインした後は React が使われています。
以下のスクリーンショットで強調している箇所は Wappalizer で、今開いているサイトで利用されているメインの技術(プロダクト)がそのアイコンで表示され、クリックするとその詳細を表示してくれます。Wappalizer が Netflix のメイン技術と判断して表示しているのは皆さんおなじみの React のアイコンですね。
他にも、React を生み出した Facebook はじめ、BitBucket, Feedly, Paypal, Twitter, Trello, Todoist などそうそうたるサイトが React を利用しています。
ビッグプレイヤーでは Microsoft も Web 版 Outlook や Office 365, Skype, Yammer で React を利用している上、その UI ライブラリをオープンソースで公開しています。
また変わった使い方の有名な例で、Twitter Mobile は ReactNative for Web という ReactNative を Web に再移植したこれまたビックリさせられるアプローチを取っています。モバイルサイトとモバイルアプリを共通化する上では合理的ではあるのですが。
React は View ライブラリ
さて、ここで気になるのが React は、Angular のようなフルスタックフレームワークではなく、View を提供するだけのライブラリだ、という点です。
すなわち、React はフロントエンド全体のアーキテクチャの中で View を構成する部品であって、各サイトが取るアーキテクチャはそれぞれに工夫が凝らされている、ということになります。
1年前であれば React に状態を管理する Redux を組み合わせる構成が一般的でした。 しかし、最近では Redux でなく MobX や RxJS を状態管理層に利用する例が増えてきました。
MMJ が選んだ答えは
MMJ でもフロントエンドの View には React を利用しています。しかし、Redux は採用しませんでした。
私達が選んだのは Domain Driven Design (DDD) の実装パターンとして用いられる CQRS というアーキテクチャです。これまで主にサーバーサイドで利用されてきたアーキテクチャですが、同じ考え方はフロントエンドでも有効だ、というのが MMJ の回答です。
なぜ Redux を使わなかったのか、DDD, CQRS とはどんなものなのか、この決断に至った過程は、技術スタック選択シリーズのひとつとして近日中に公開します。