花粉との戦いの季節がまたやってきました、しらかみです。
WebFileがリリースされてから、早いもので15年が経ちました。
その間、Webアプリを取り巻く状況の変化については、ご存知のとおりです。
WebFileもそろそろフロントエンドの刷新を検討すべき時期なのかもしれません。
そこで今回は、３大メジャーフロントエンドフレームワークである、
React、Angular、Vue.jsについてあれこれ調査した結果をお話したいと思います。
とはいえ、各フレームワークの特徴や仕様については、そこら中に転がっていて、
そういうのと比べられるとボロが出るので、二番煎じになるのもあれなので、
ここではフレームワークを選定および採用する場合に
検討した/しなかった（あと、しなくてもよかった）ポイントを紹介したいと思います。
検討したこと
システムの規模はどのくらい？
Reactは小〜中規模向け、Vue.jsは中〜大規模向け、Angularは大規模向け、
というのが一般的な見解のようです。
ですが、そもそもシステムの「規模」って何を指すのでしょうか？
ソースコード行数？機能数？利用者数？
どれも正しいと思うのですが、「規模」は「寿命」である、とここでは強引に定義しちゃいます。
たとえば、公開期間限定のキャンペーンサイトの場合、規模は「小さい」と言え、
WebFileのように、サービス利用者がすでに存在し、運用を継続し続ける必要のあるサービスの規模は「大きい」と言えます。
システムの規模が大きくなると、利用するUIライブラリや状態管理モジュール、
フレームワーク自体へのサポートがどのくらい継続されるのかが、重要になってきます。
たとえばReactで状態管理モジュールを導入する場合、
Reduxが選択肢のうちのひとつですが、React と Redux はメンテナが異なります。
これはつまり、ある日突然Reduxの開発がストップしてしまうこともないわけではない、ということです。
実際そんなことはそうそう起こらないとは思いますが、いずれにせよ、
利用しているモジュールの寿命を気にする必要があることはストレスです。
一方、フルスタックでほぼすべてのモジュールが提供されていて、Googleがメンテナスしている
Angularの安定感は他のフレームワークとくらべ群を抜いているのは言うまでもないかと思います。
学習コストの高さは？
フレームワーク素人だった私が人柱となった所感でいうと、
それぞれの難易度はReactは易しい、Vue.jsもとっつきやすい、という中、
Angularは両者を引き離してぶっちぎりでムズイー、というのが本音です。
これはたぶん誰も異論のないところだと思います。
だからといって、それぞれのフレームワークがカバーする範囲の違うのと、
採用している言語やアプローチが異なるので、単純にReact一択というわけではありません。
たとえばReactが採用しているJSXは、JavaScriptに馴染みのある人ならわりにすんなり習得できるかと思います。
一方、Angualrが採用しているTypeSciptはいわゆる「強くてモダン」な言語で、さらに「RxJS」という概念を理解し使いこなす必要があります。
あくまで所感ですが、Reactは小回りのきく小型車、Angularはフル装備のヨーロッパ車、Vue.jsはハイブリッド車といったところでしょうか。
学習コストについては、以下の興味深い記事があります。
2018年の最先端フロントエンドエンジニアになろう-Qiita
Angualrを採用する際は「産みの苦しみ」を感じることになりそうですが、その壁を突破した際にはなんかいいことあるかもしれませんね。
要件にあったUIライブラリがあるか？
WebFileはファイルをディレクトリ構造で保持していて、画面上でフォルダツリー描画しています。
これをフレームワークで表現する場合、ツリー表示系のUIをインポートして使用するようなケースが考えられます。各フレームワーク用にそれぞれツリー表示を実現するUIライブラリを以下に示します。
どれもフォルダツリーを実現できますが、React用やVue.js用のものとくらべ、Angular用のツリー表示のライブラリは圧倒的にコーディング量が多いです。
詳細な制御ロジックがプログラマに求められるというデメリットなのですが、これは逆に描画結果を詳細にカスタマイズできるという大きなメリットにもなります。
いずれにせよ、そのシステムに必要なGUIライブラリが存在しない場合、自作するしかないため、どのようなユーザインタフェースが必要なのか、事前に慎重に洗い出しを行ったほうがよいでしょう。
納期はいつ？
たとえば納期が1ヶ月後だった場合、まったく使用経験のないフレームワークを選ぶのはリスクが高すぎますよね。
キー・ポイントの場合、Vue.jsとReactを使ったことのあるエンジニアは数人いるのですが、Angularはまだいません。
となると、このような場合、選択肢としてAngularはありえない、ということになります。
さらに、どのフレームワークの経験者もいない、という場合であれば、無理にこれらのフレームワークを導入する必要があるかどうかも検討すべきだと思います。
とはいえ、そんな状況でも先を見越してフレームワークを導入する必要がある場合なら、「学習コスト」という観点から、React、Vue.js、Angularという順番になるかと思います。
検討しなかったこと（しなくてもよかったこと）
実行速度は？
ここに挙げたフレームワークでいうと、実行速度にほとんど差はありませんでした。
あったとしても0.1秒差程度で、よほどクリティカルなWebサービスでないかぎり、
許容範囲かと思われます。
詳しいベンチマークがありますので興味ある方は参照ください
日本語ドキュメントが充実しているか？
公式ガイドでいうと、Vue.jsがぶっちぎりで日本語ドキュメントが充実しています。
その次がAngularが部分的に日本語対応、Reactは公式な日本語ドキュメントがありません。
ただ、日本語情報はたしかにありがたいのですが、どうしても二次情報になりがちです。
また、いずれ公式ガイドでは知りえない問題にぶつかり、結局日本語でない一次情報に触れる必要が生じがちなのは、きっと経験されたことがあると思います。
自動テスト手法は充実しているか？
これは検討しなくてもよい、というより検討する暇がなかったと言ったほうが正しいですｗ
また、各フレームワークで採用されているテスティングフレームワークは同じものであったりするので
あまり心配することもないのかな、というところです。
まとめ
以上ざっと挙げてみました。少しでも選定の助力になれれば幸いです。
最後に実際にReactとAngularを使用したサンプルを以下に示します。フォルダツリーとそのフォルダに含まれるファイルを表示するサンプルです。
それぞれ見た目がアレですが、あくまで味見レベルでのものなのでご容赦ください・・・
それぞれにかかった日数ですが、まったくのフロントエンド初心者である私が、手探りで調べつつ、React版で5日程度、Angular版で10日程度といったところでしょうか
apiとしてFireBase Cloud Functionsを利用しています。FireBaseについてはまた別の機会に触れてみたいと思います。
