🌟

React + Rails API モードで基本的な CRUD アプリを作ってみた (その他考察編)

2020/10/21に公開

はじめに

世は大 SPA 時代！！
「そろそろフロントもやっておくか」ということでReact の公式チュートリアルをやりました。

が、実際のアプリケーションではバックエンドとAPIレベルで通信することは必須。
簡単な CRUD 機能を持つバックエンドをRailsの API モードを使って実装し、はじめての SPA に挑戦してみることにしました。

初心者なので至らない部分も沢山あると思いますが、「Rails API + React フロントエンド」という実装についてイメージできるようになっていると思います。
今回は最小限の構成（モデル１つ、コントローラ１つ）ですが、基礎を抑えておけばスケールすることは十分可能だと思います。

それではやっていきましょう🙋‍♂️

No	Title
1	バックエンド編
2	フロントエンド編その1
3	フロントエンド編その2
4	その他考察編	← 今ここ

作ったアプリ

ポストを投稿できるだけのシンプルなアプリです。
ポストに対して CRUD 処理を実装していきます。

環境、リポジトリ

Name	Version
node.js	12.19.0
React	16.13.1
Ruby	2.6.6
Rails	6.0.3.4
Docker for Mac	2.4.0.0

Name	URL
フロントエンド	https://github.com/tatsuro-m/react_rails_api_frontend
バックエンド	https://github.com/tatsuro-m/react_rails_api_backend

SPA を初めて作ってみて

長々とお付き合い頂いているこのシリーズですが、これで最終回です。
今回はざっくばらんに、初めて SPA を作ってみた感想や考察などを書いていきたいと思います🙌

モノリシックなアプリケーションからの卒業

エンジニアになってからの短い期間で体感していることがあります。
それは、「小さいことは良いことだ」ということです。

そしてこれは、メソッドもクラスももちろんですが、アプリケーションそのものにも当てはまります。
アプリが小さいのは良いことです。

マイクロサービスアーキテクチャが全盛を極めていることからもこのことの重要性が分かります。
その中で SPA というのは非常に重要な役割を果たすと思います。

従来の MVC 全ての役割を持たせたRailsアプリケーションはモノリシックそのものでしょう。
設計思想として、開発効率を優先してこの辺を犠牲にしているのだからしょうがないかもしれませんが、濃く絡み合っています。
以前はそれが当然だと思っていましが、今回 SPA を実際に作ってみてその発想が変わりました。

何か理由が無い限り、自分で作成するアプリケーションは基本的にフロントとバックエンドを完全に別のものにすると思います。
問題の切り分けが楽なのです。

そして、それぞれは将来に渡って交換可能になります。
React アプリケーションが期待しているのは、「このエンドポイントにリクエストを送るとこういうデータが返ってくる」ということだけです。
なのでRailsじゃなくても一向に構わないわけです。
逆も然りで、フロントエンドフレームワークはReact でなくても構いません。

もうそろそろ、モノリシックなアプリケーションから卒業するべきなのかもしれない と、そう感じました。

認証をどうするか

今回は認証機能はスキップしました。
が、本番のアプリケーションを運用する際にはほぼ必須です。

Railsなら devise を使うことが多いと思います。
APIベースでも使えるようですが、「メールアドレス + パスワード」という認証方式が前提になっている感が強い（もちろん Google 認証なども使えるようですが）ですし、やたらとブラックボックスです。

API ベースにしておくと、この辺の認証機能も切り出すことができそうです。
さあ皆さんご一緒に、
小さいことは、良いことだ

具体的には、 AWS cognito が有力な選択肢になってくるのではないでしょうか。
https://aws.amazon.com/jp/cognito/

認証機能はマネージドサービスに頼ってしまって良い部分でしょうし、頼るためには API ベースのアプリケーションにしておく必要があるということです。
devise で楽だね、嬉しいね、というお話では無くなってきているのでしょうか🧐

TypeScript の導入

実は JS もしっかり学習したのはごく最近でして、手が回っていないのですが、TypeScript で JS を書くというのは最早必須となっているようです。

スケールする JS アプリケーションにするためにも、ここは頑張って勉強したいと思います🙌

インフラ構成はどうするのか

React アプリとはいってもコンパイルすれば単なる JS なので、静的ホスティングサービスでホストできます。
S3 はお安く、 IAM でそのまま権限管理ができます。
GitHub pages などを使ってホストすると無料でホストできます。

しかしマイクロサービスを存分に生かすのなら、やはり AWS ECS や Kubernetes などのコンテナ基盤が良いかもしれません😄
オートスケールが容易ですし、アプリケーション自体が分かれているので別々にスケールさせることができますよね。

やはりマイクロサービスアーキテクチャは Docker と非常に相性が良さそうです。

終わりに

今回は実際に SPA を開発してみての感想や周辺環境について書いてみました。

当たり前のことばかりだったかもしれませんが、Railsからエンジニアになって MVC が１つのアプリに共存しているのが当たり前だった私のようなエンジニアからすると、今回の簡単なアプリケーションでも大きなパラダイムシフトを体感できました！！

引き続きモダンなアプリケーションについて学習していきたいと思います。
ありがとうございました😃