前回「ASP.NET Coreのフロントエンド開発環境に関する考察」という内容で投稿を行いましたが、今回は「Reactをやってみた感想」のご報告です。

＜アウトライン＞

• Reactを選定した理由
• Reactフレームワーク所感
• Reactのプログラミングはし易いのか？
• IDEの支援が少ない
• エクステンションの多用
• Reactの特徴であるFlowについて
• 昨今のSPAフレームワークの隆盛について考える
• 参考

---

＜Reactを選定した理由＞

　Angular/React/Vue から検討をしていましたが、(1) 現時点で一番人気、(2) 近くに「React」に詳しい人が居たから、(3)「Visual Studio」の標準テンプレートに「React」のテンプレートもあったから。と言う理由です。コレ以外に、強いて言えば、(4) ReactNative/ReactVR などのサブ・プロジェクトが活発という点が挙げられます。

＜Reactフレームワーク所感＞

　私のアップデートされていない古いSPAの知識で言うと、SPAのフレームワークは、「KnockoutJS」や「AngularJS」など、MV*系などと言われていて、データ・バインディングの機能＋αが提供されていたダケ。のように思っていましたが、昨今のSPAフレームワークは、基本的にComponent指向になって、WPF/Silverlightっぽくなっています。

　このマッピングを「React」で説明すると、「XAML → JSX」、「.NET（C#, VB）→ ECMAScript/TypeScript」みたいな感じでしょうか？そう言えば、Silverlight/WinRT/UWP も JavaScriptで書くオプションがあるので、ソレに近いかも知れません。

＜Reactのプログラミングはし易いのか？＞

＜IDEの支援が少ない＞

　...とは言え、やはり「Node.js製のCLI」の開発環境の支援機能が「Visual Studio」程高機能で無いので、書くのはカナリ大変な印象があります。ここでの支援機能とは、例えばプロジェクト・テンプレート、デザイナ、スニペットなどを指します。

＜エクステンションの多用＞

　また、「React」自体は「Angular」（こちらはフルスタック）と異なり、薄いフレームワークで、やりたい事次第で、エクステンションのパッケージを追加する必要があります。

　例えば今回では「Redux」などがソレに該当するのですが、それぞれを習得するのが難しく、その分、書き方のパターンも沢山ある感じで、ネットから適合する手順やスニペットを入手するのには時間がかかる印象があります。

　例えば、redux-thunkを使って非同期通信処理を書きたい場合のサンプルが、react-reduxを使っている「connectの実装パターン」の例と、そうではない例で大きく異なる。このため、コードベースと違うサンプルコードを参照してもredux-thunkの取り込み方が解らないなど。

＜Reactの特徴であるFlowについて＞

　MVVMの双方向バインディングがデキないことや、Component跨ぎの処理が書き難いのが不満としてあります。

　ただ、基本的にWebAPI経由での処理となるので、イベント・ドリブンやバック・グラウンド通知などで双方向バインディングを必要とするシーンは少ないかと思いました。Component跨ぎは「Redux」を使用すると、導入コストは高かったですが、少々簡潔に書けるようになります。

＜昨今のSPAフレームワークの隆盛について考える＞

　実際、UIフレームワークって進化しているのかな？と振り返って少々考えましたが、当たり前の話ではありますが、機能的には、標準化されたHTML5というUIサブシステム上であり、それほど進化していないと思います。その割に、「Visual Studio」などのようなIDEの支援は無く、開発難易度は高くなっていると思います。

　そんな中で、JavaScript系のUIフレームワークが流行ったのは、やはり、(1) HTML5ベースのマークアップ、(2) オープンソース・ソフトウェア、(3) Apache Cordovaとの連携や、ReactNativeなどのAndroid、iPhoneなどのモバイル環境もターゲットに入れたクロスプラットフォーム性。(4) 早いライフサイクル。などの要素が揃ったUIフレームワークで、エコシステムを拡大できたことが大きいかと思います。この辺りは、Silverlight/WinRT/UWPとは対象的でした。

　SPAはフロントエンドへの露出という意味では非常に重要な技術ですが、生産性向上のミッションも持っている某弊部会としては、頭の痛い存在ではあります。しかし、既に無視できない存在になっているので、今後共、SPAなどのフロントエンド開発に関する研鑽を積んでいく予定です。

＜参考＞

• 開発基盤部会 Wiki
• React、Redux
• Reactのファースト・ステップ、セカンド・ステップ