Webシステムのフロントには何が良いか？

現在、とあるWeb会員システム（BtoC）のフロント側をリニューアルしようと思っています。

最近では、AngularやReact、ionic、VueJsなど色々あるようですが、
求める要件（条件）が以下の場合、オススメのフロントはどれでしょうか？

・バックエンド側はPHP7で構築済み（独自フレームワークでREST APIに対応）
・双方向データバインドであること
・デザイナーとの分業がしやすいこと
・対応ブラウザはChrome、Edge, Firefox, iOSのSafari, AndroidのChrome
・SPAが作りやすいこと
・少数での開発がしやすいこと
・学習コストは問わない
・開発者を探しやすいこと
・クライアントの端末性能で描画が重くなるとしても、他と比べて極端に遅くならないもの
・他のフレームワークとの共存は考慮しない
・SEOは考慮しない
・オフライン対応しやすいこと（できれば）

上から順に考慮したいポイントとなっています。
色々ご意見をお聞かせください。

追記
※みなさんご回答ありがとうございます。
１点補足があり、探しているフレームワークは４つに限定はしていません。
例えばExtJSというのもあり、みなさんがご存知の中からオススメを頂きたく思います。
正確なものではなく主観で構いません。

よろしくお願いいたします。

m.ts10806

2019/05/08 01:14

バックエンドはどのように使われるのでしょうか。画面も込みなのかリクエストを受け付けてレスポンスをJSONなどで返すだけなのか。正直なところ「どれも一長一短」で、結局は「現場でやりやすいもの」に落ち着くことが多いです。そうでなくでも通常は、（無責任な）赤の他人に意見を聞くのではなく検証する人がプロジェクトにちゃんといて検証してからプロジェクトのメンバーの力量なども考慮して決めます。現在の「問題・課題」は何でしょうか？また、自身ではどこまで検証を行われてどこまでの情報をもっているのでしょうか。具体的に記載してください。

tma2002

2019/05/10 23:54

返信が遅くなりました！具体的な問題はフロントの中でもコンポーネントUIの作成のしやすさです。今回はリニューアルなので、特に必要なコンポーネントは・カレンダー（予定などを表示できるものと、日付選択で使用するもの）・スケジューラー（予約システムなので多機能であること。現在はHTML5+CSS3+JSで自作）・テーブル（ページング、ソート、フィルター、グルーピング、エクスパンド）すでに使えるコンポーネントがあれば良いのですが、そうでなくても作りやすさを比較したいです。よろしくお願いいたします。

行動規範の内容に同意します

回答3件

条件に合うのはVueJSですね。

これは純粋なノイズです。

バックエンド側はPHP7で構築済み（独自フレームワークでREST APIに対応）
クライアントの端末性能で描画が重くなるとしても、他と比べて極端に遅くならないもの

また、下記の条件はそもそもSPA自体がマイクロサービスアーキテクチャーみたいな所があります。
なので絞り込むというよりはJSフレームワークなら何でも良いという話になるので
絞り込むのに使えないという理由でノイズになります。

SPAが作りやすいこと
対応ブラウザはChrome、Edge, Firefox, iOSのSafari, AndroidのChrome
他のフレームワークとの共存は考慮しない
少数での開発がしやすいこと
SEOは考慮しない

双方向データバインドであること
デザイナーとの分業がしやすいこと

これはReactとJSXが嫌いですという自己紹介ですね。
オブザーバパターンのデータバインディングを利用したJSフレームワークという所に強いメリットはありますが、
双方向データバインディング自体にメリットはありません。

JSXはその通りなのですが、
ここまで徹底するならPugやSASSくらいのテンプレート言語は必須ですし、
仮にVue.jsを選ぶならv-ifやv-forを駆使してレンダリング仕切る実力がデザイナーに求められます。

「じゃあいいや、自分で書く！」という選択肢になるならノイズでしかないですね。
ReactのJSXが超絶嫌いでもテンプレート部はCoffeeScriptやLiveScriptで書いて、
JSファイルにトランスパイルしながら流し込むという手法で合体できます。
黒魔術的になので、デフォルトにこだわるならReact自体を避けたほうが良いかもしれません。

学習コストは問わない
開発者を探しやすいこと

AngularJSは学習コストが高い癖に当時はそれ一択だったのですが、
Angularになってマイナーになりましたね。
両方を満たすのはReactとVueJSの二択になりそうです。

上記のことからReactは嫌いということなのでVueJS一択に絞られます。

投稿2019/05/08 05:17

miyabi-sun

総合スコア21158

リニューアル時に、フレームワーク導入ですか・・・。
また茨の道な気が・・・。

React、ionicに関しては勉強中なので、
Angularと、Vue.jsに関して、導入検証を行ったことがあるので、
その感想などをお答えさせていただきます。

あげていただいた、条件の多くにマッチするなら、
Angularがよろしいのかな、と思います。
ただし、既存のWebサイトに組み込むとなると、Angularはけっこう苦労しそうなイメージがあります。
既存のものをなるたけ活かしつつ、フレームワークを活かしてやる、
となると、比較的途中導入がしやすい、Vue.jsがおすすめかと。

★Angular
□メリット
・表示が速い
・SPAに特化させやすい
・プラグイン、公式ドキュメントの充実
・バックエンドとの連携がかなりやりやすい（プラグインや、メソッドの充実）
・現在注目度がかなり高いため、ラーニングがしやすい。

□デメリット
・ディレクトリ構造などの考慮を考え、既存があるなら、導入をするのは様々な面で苦労する
・TypeScriptを使用したコンポーネント指向で開発するため、プログラム・オブジェクト指向を理解していないフロントエンジニアにはかなりハードルが高い（フロント側の人間は、プログラム苦手な人が多い）
・アプリを開発している感覚に近い（メリットとも言える）

★Vue.js
□メリット
・ライブラリ感覚で導入可能なので、プログラム苦手なフロントエンドエンジニアにも敷居が低い
・ラーニングコストが比較的低い
・既存の複数ページ存在するWebサイトにも導入が比較的しやすい
・コンパイルをする方法で開発すれば、SPAに特化させることが十分可能

□デメリット
・導入しやすい分、構築によっては表示スピードが遅くなる場合がある。
・ライブラリとして読み込む場合、自作スクリプトで補助が必要になる場合がある。
・バックと作業領域を分けるなら、自作スクリプトの補助が必要になる場合がある。
・プラグインなどを導入するなら、コンパイルする方式にする必要がある。
（IEでもコンポーネント機能を使う時など）

って感じかと思います。
個人的な独断と偏見混じってるのであしからず・・・。

AngularとVue.jsでいうなら、今回のケースは、Angularがいいのかな？とお見受けします。

投稿2019/05/07 18:13

編集2019/05/08 09:52