質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    20401questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    5124questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Vue.js

    1311questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • React.js

    1114questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • AngularJS

    600questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 316

tma2002

score 2

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

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

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2019/05/08 02:51

    複数のユーザーから「問題・課題が含まれていない質問」という意見がありました
    teratailでは、漠然とした興味から票を募るような質問や、意見の主張をすることを目的とした投稿は推奨していません。
    「編集」ボタンから編集を行い、質問の意図や解決したい課題を明確に記述していただくと回答が得られやすくなります。

  • mts10806

    2019/05/08 10:14

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

    キャンセル

  • tma2002

    2019/05/11 08:54

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

    すでに使えるコンポーネントがあれば良いのですが、そうでなくても作りやすさを比較したいです。

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

    キャンセル

回答 3

+2

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

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

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

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

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

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/08 09:57

    つまらないツッコミですが
    「敷居が高い」→「ハードルが高い」

    キャンセル

  • 2019/05/08 18:51

    yambejpさん>日本語が幼稚ですみません(泣)敷居が低いの対義語としてやってましたが、そもそも日本語間違ってました!

    キャンセル

+2

条件に合うのは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一択に絞られます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+1

・バックエンド側はPHP7で構築済み(独自フレームワークでREST APIに対応)

とのことですが、

GraphQL + (Apollo) + Reactが良いと思います。

・バックエンド側はPHP7で構築済み(独自フレームワークでREST APIに対応)

しっかりRestfulになっていれば、GraphQLとの併用は楽だと思います。

・双方向データバインドであること

React単方向ですが、双方向のコードよりメンテがしやすいです。

・デザイナーとの分業がしやすいこと

どこまで分業するかによります。CSSがエンジニアならReactで良いと思いますが、そうでないなら、デザイナのスキル次第になります。

・対応ブラウザはChrome、Edge, Firefox, iOSのSafari, AndroidのChrome

対応しています

・SPAが作りやすいこと

GraphQLのコード補完が最高ですね。

・少数での開発がしやすいこと

一人でも開発できると思います。

・学習コストは問わない

GraphQLのキャッチアップはそれなりにかかるかと思います。
クライアント含めて

・開発者を探しやすいこと

サーバー、フロントエンド触れる人であれば、経験なくてもできそうな気がします。

・クライアントの端末性能で描画が重くなるとしても、他と比べて極端に遅くならないもの

作り次第ですね

・オフライン対応しやすいこと(できれば)

Apollo使えば、キャッシングできるので、管理が楽です。


各ライブラリは使い方次第ですが、一応経験的な部分も含めて

Angular

ドキュメントがしっかりしているので、みんなでAngularやりましょうって感じであれば良いと思います。

React

少数精鋭でやるならベストな選択になるかと思います。
ただし、デザイナ任せやエンジニア任せな意識があると結構大変だと思います。
※ フレームワークではないです。その分だけブラックボックスがなく、柔軟性があります。

Vue

単一ファイルコンポーネントで開発すれば、デザイナとフロントエンドの分業はかなり楽になるはずです。
Nuxt使えば、更にSPAにも対応しやすくなります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • JavaScript

    20401questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    5124questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Vue.js

    1311questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • React.js

    1114questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • AngularJS

    600questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。