単体Railsアプリのヘルパーメソッド（MVC構成のVに関わる処理）は、Rails(API) × ReactのSPA構成ではどこに記述するのが一般的か

Question

転職用のポートフォリオ作成のため、Rails単体で作成したアプリをRails API + Reactに移植することを考えています。

非常に概念的な質問なのですが、ご教示いただけると幸いです。

確認したいこと

すでに作成済みの単体Railsアプリ内にあるヘルパー内の処理は、新しく作成したRails（APIモード）+ Reactではどこに記述するのが一般的か。

言い換えると、MVCのVから呼び出されるヘルパーメソッド（＋各モデル内のクラスメソッド）は、Rails内で持つものなのか、React内で持つものなのか。

# ディレクトリ構造（単体Rails）
rails-app
├── app
│   ├── channels
│   ├── controllers
│   ├── helpers     <=ヘルパー内の処理はどこに行くの？
│   ├── jobs
│   ├── mailers
│   ├── models  　　　　　　（<=モデル内のクラスメソッドはどこに行くの？）
│   └── views/layouts
├── bin
├── config
├── ...
└── ...

↓

# ディレクトリ構造（Rails API + React）
rails-react-app
├── api
│    ├── app
│    │   ├── channels
│    │   ├── controllers
│    │   ├── jobs
│    │   ├── mailers
│    │   ├── models
│    │   └── views/layouts
│    ├── bin
│    ├── config
│    ├── ...
│    └── ...
├── front
│    ├── ...
│    ├── src
│    │   ├── ...
│    │   ├── App.tsx
│    │   ├── ...
│    │   ├── index.tsx
│    │   └── ...
│    └── ...
├── ...
└── ...

わからないこと

Rails（API）側の役割は、jsonデータを返すことだと理解しています。このとき、このjsonデータは

1. モデルから取得したレコードをそのままjsonにして返す
2. モデルから取得したレコードを加工後、jsonにして返す

の２パターンの実装ができると思います。

一方で、React側では

1. APIから受け取ったjsonデータを加工して表示する
2. APIから受け取ったjsonデータをそのまま表示する

の２パターンがあります（リストの番号はそれぞれ対応）。

どちらが設計としては正しいのでしょうか。

インターネット上に存在する記事はjsonデータをRailsからそのまま返しているように見えるのですが、作成済みの単体Railsアプリでは非常に複雑なhelperメソッドを使用しており、その扱いのイメージが掴めません。

非常に初歩的で概念的な質問で申し訳ありませんが、ご教示いただけないでしょうか。
よろしくお願いします。

Answer 1

React も べき論も苦手ですが、一日放置されているので私の考えを述べます。

まず、「非常に複雑なメソッド」の存在自体が問題です。これをシンプルに、少なくとも シンプルな小さなmethod達を使って見通しの良いものにすることを薦めます

で、
そのHelperがどんな値を返すのか、によっても考え方が変わります。
例えば、options_for_select の様に html の塊を返すのか
Decoratorの様に モデルの属性をview向けに修飾したものを返すのか。

後者でしたら（私なら） Railsにやらせます。
前者は ちと悩みますが、Reactかなぁ。なやむ理由は JS 苦手だから、、、、

Comments

[hajsu00]

ご回答ありがとうございます。
まさに、Decoratorのような役割をどこに持たせるか、を悩んでいました（お恥ずかしながらDecoratorという存在を知らず、今までModelとHelperに無理やり処理を書き込んでいました）。

質問をさせていただいた日からReactについて少しづつ理解を進めていますが、Reactの中には長々と処理を記述するスペースがあまり無いと感じました。書くとしたらコンポーネントの中だと思いますが、記述量が肥大化してのちのちメンテナンスに苦労しそうです。
フロントでごちゃごちゃ書くよりも、可能な限りバックエンドで計算してからそのままフロントに出力する方がすっきりしていて良いのかなと感じています。

あとは、Railsをデータベースとのやりとりのみに使うのは少しもったい無いと思い始めました。表示に必要な処理を記述して、やっとReact側とバランスが取れそうなイメージです。

ご指摘をいただいて、具体的なイメージが付いてきました。
ありがとうございます！

[winterboum]

「今までModelとHelperに無理やり処理を書き込んでいました」
いや、恥ずかしがることはないです。
私もDecorator はあまり使いません。
というのは、viewでしか使えないから。