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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

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

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

2回答

1052閲覧

Railsアプリでフロントエンドを分割すべきか?

shugo

総合スコア29

Vue.js

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

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

2クリップ

投稿2020/08/28 12:26

構成

[フロントエンド]
Vue.js
UI、バックエンド(WebAPI)とのやり取りを担当
SPAを実現するために導入

[バックエンド]
Rails6
フロントエンドからリクエストを受け付けてJSONを返すWebAPI

質問内容

上記のような構成で認証が必要なWebアプリケーションを開発しているのですが、
Vue.jsの扱いをどのようにするのが一般的でしょうか?
RailsとVue.jsを組み合わせるのは以下の2つの方法があると思います。

  • Rails内にVue.jsを入れる。アクセスはRailsのViewファイルを通り、Vue.jsに渡る
  • フロントエンドとバックエンドを分ける。別のサーバーで動かす。

調べた所

自分で調べた所ケースバイケースとあったのですが、
初めてのアプリ制作であるので一般的にはどちらが選択されるかが知りたくて質問しました。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

あなたが就職用としてポートフォリオを作っているにせよ、個人開発者として収益を得るための最初の一歩だとしても

初めてのアプリ制作

であれば、個人的には、構成を見直してRailsのみで構築することをおすすめします。
そしてできあがったときに、Railsアプリのフロントエンドをどうするかを考えるタイミングだと思います。

そのときには、Railsアプリがどんなサーバー(AWSか、HerokuかVPS)で動いているかも決まっているでしょう。
そのときのあなたには、フロントエンドを別サーバーで動かすときの運用方法やコストも把握できていることでしょう。

まずは大きな山に登る前に小さな山を登って見ることです。
そこから見える景色は、登り始める前と全く違って見えているでしょう。


せっかくRailsを学んでいるのなら、Railsを作ったDHHなどが著者の「小さなチーム、大きな仕事」を読んでみるとたくさんのヒントを得ることができるかもしれません。

本当は、Getting Realを読んでみると考え方がまとまると思うのですが、無料で見れていた日本語版がまた見れなくなっていました。もし英語に強ければこちから。https://basecamp.com/books/getting-real

どうしても日本語版が見たければBasecampに日本語のGetting Realのリンク先が壊れていると言えば、復旧してくれると思います。(昔、復旧してもらいました。)

投稿2020/08/29 00:14

no1knows

総合スコア3365

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shugo

2020/08/29 02:50

おっしゃる通り、別サーバーに動かすときのコストなどあまり分からない状態でした。 とりあえず、構成を見直して、バックエンドで出来るだけのことをしてから、フロントエンドについて考えていきたいと思います。 Getting Realも少し読んでみました。まずは小さい事から作って見ようと思います。 回答ありがとうございました。
no1knows

2020/08/29 03:02

Railsを利用するならremote:trueとTurbolinksについて理解を深めると、開発コストをギュッと圧縮してSPAっぽい動きも実現できます。 よっぽど動きを重視するフロントエンドであれば、Railsでは太刀打ちできませんが・・・ 良いアプリが出来るのを楽しみにしています!
shugo

2020/08/29 03:40

調べてみました。 こちらで、ページを一部更新をすることが出来るのですね! サイトにいる間、URLが変わっても音楽再生を止めたくなかったという目的でしたので、こちらで代用できるか調べてみます。 ありがとうございます。
guest

0

ケースバイケースが答えであり、一般的というものはありません。
なので、他がどうやっているかよりも
ご自身でやりやすい方法、メンテナンスしやすい方法を採用するべきでしょう。

投稿2020/08/28 14:55

mingos

総合スコア4207

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問