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

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

ただいまの
回答率

89.62%

Rails×Reactアプリ作成時のRailsモードなどについて

解決済

回答 1

投稿

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

zackieeee

score 8

プログラミング初学者です。
このほど、サーバサイドをRails、フロントをReact.jsでWebアプリケーションを作ろうと色々と勉強を始めています。

<構想している構成>
・Ruby on Rails 5.1
→gemにwebpacker,react-railsを入れてReactと共存
→dbはmysql2(5.7)を利用
・React.js (react 16.8,react-dom 16.8)

ただ、RailsとReactを組み合わせたWebアプリケーション構築に関する記事が中々見つからず、苦戦しています。下記、アドバイスを頂けると非常にありがたいです。

なお、この組み合わせを選んだ理由はRailsを学んだ後だったため、と言う超短絡的な理由です。。

◾️質問内容
①相性
RailsとReact.jsの組み合わせてって珍しいものなのでしょうか?
どのように組み合わせるのが、一番初学者に優しいでしょうか??

②Railsモード
Rails×Reactで行くとして、Qiitaなどの記事でよく見かけるのが、RailsとReact.jsを別々にして、 Railsはapiモードで動かし画面描画にはタッチさせない方法を見かけます。
RailsとReact.jsを組み合わせる場合、この方法が主流なのでしょうか???

③Rails×Reactの参考書・参考ページ
RailsにgemとしてWebpacker、react-railsを入れて動かす場合、データの引き渡しなどについて参考になる書籍やWebページはないでしょうか。
ご存知の方、ご教示いただけると嬉しいです。

④Rails使用時のReduxについて
Railsをバックエンドで使用する場合、Reduxって必要なんでしょうか?
イメージとしては、Railsから受け取ったデータをstate管理するような感じでいます。その場合、Railsで管理しなきゃいけないデータの範囲と、Reduxで管理する境界も??で。
今一組み合わせるメリットを感じないのですが、データの引き渡し方すら分かっていないためなのでしょうか??

理解が乏しく意味不明なことを書いている可能性も高く、大変恐縮ですが何卒よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • maisumakun

    2019/07/31 11:51

    フロントエンドは完全にReactだけで作る予定でしょうか、それとも他の要素も織り交ぜる感じでしょうか。

    キャンセル

  • zackieeee

    2019/07/31 13:11

    実現可能性も踏まえて考えようと思っています。
    そのため、本当に難しいようならJavaScript+JQueryで作ったWebアプリケーションの中に、React.jsコンポーネントを一部組みこむ程度に納める(Reactがどんなものかお試し程度)などに方向転換も必要かと。。。
    ただ、一番は完全にReactのみ+RailsでCRUDができるアプリが作れればと思っています。

    また、他の要素になるか分かりませんが、慣れてきたらMaterialUIなども組み込んで少しMaterialデザイン的な考え方にも触れてみたいなとは思っています。←今はコンポーネントタグ貼り付けて、へ〜って思ってるだけな感じです

    ※私が未熟なため「他の要素」が何をさしていらっしゃるか理解できておらず、変なことを書いてるかもですが…よろしくお願いします。

    キャンセル

回答 1

checkベストアンサー

+1

①相性
RailsとReact.jsの組み合わせてって珍しいものなのでしょうか?
どのように組み合わせるのが、一番初学者に優しいでしょうか??

React.js は API 呼び出して使用するだけですので、Web フレームワーク側はあまり気にしなくて問題ないかと思います。

②Railsモード
Rails×Reactで行くとして、Qiitaなどの記事でよく見かけるのが、RailsとReact.jsを別々にして、 Railsはapiモードで動かし画面描画にはタッチさせない方法を見かけます。
RailsとReact.jsを組み合わせる場合、この方法が主流なのでしょうか???

主流というより、むしろそれが目的で React.js を導入しているのではないでしょうか・・・

③Rails×Reactの参考書・参考ページ
RailsにgemとしてWebpacker、react-railsを入れて動かす場合、データの引き渡しなどについて参考になる書籍やWebページはないでしょうか。
ご存知の方、ご教示いただけると嬉しいです。

react-rails の情報は少なそうですね。
ざっと調べた感じだと、公式の情報が一番よくまとまっているような気がします。

GitHub > react-rails
https://github.com/reactjs/react-rails

④Rails使用時のReduxについて
Railsをバックエンドで使用する場合、Reduxって必要なんでしょうか?
イメージとしては、Railsから受け取ったデータをstate管理するような感じでいます。その場合、Railsで管理しなきゃいけないデータの範囲と、Reduxで管理する境界も??で。
今一組み合わせるメリットを感じないのですが、データの引き渡し方すら分かっていないためなのでしょうか??

従来のサーバーサイドで状態管理するスタイルなら Redux は不要でしょう。
しかし、もしそうだったら React も本当に必要なのかよく考えた方が良いと思います。

Redux は必須ではありませんので、まずは React.js を学習して、必要だと感じたら導入する感じで良いと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/08/08 13:46

    回答ありがとうございました!
    また、コメントが遅くなってしまいスミマセン。

    ①apiとして使用するなら、あまり相性を考える必要性はないですね。
    そもそも、一体で開発するものではないと理解しました。

    ②こちらもありがとうございます。
    そうであれば、railsにこだわらずサーバレスで済むmBaaS(firebaseなど)を使うのがスピーディ且つ簡単そうですね。

    ③apiで使わない場合の話になってしまいますが、やはりそれぐらいですよね。。。
     ただ、下記のページは非常に参考になりました。
     Reactとは何で、どんなものが必要かも含め理解できた感じです。
     https://learnetto.com/tutorials/quick-introduction-to-key-react-concepts

    ④ありがとうございます。
     やはり、そうなりますよね。。
     ただ、敢えてウィザード形式でページ遷移させた後にデータ登録させたい場合など、
     適用できるところは有りそうだなと感じました。
     うまく組み合わせることができないか、もう少し模索してみようと思います。

    色々とご意見をいただき、ありがとうござました!

    キャンセル

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

  • ただいまの回答率 89.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる