Railsのrails-reactを使っての実装から、フロントエンドだけを分離してReact Hooksで作った話
システムを作る中で、
Rails＋React
の構成で作りたいなと思って、
社内システムの一部を、
Railsをメインにして、
rails-reactというGemを使用して作っていた。
ちょっとシステムを改修するにあたって、
- バックエンドの処理をリファクタリング
- Railsの中のJSXコードが煩雑なので分離
- React Hooksを使ってみたい
ということを考えて、
フロントエンドをReact Hooksで実装している。
現時点で形になりつつあるけれど、
まだ、細かな部分の実装はまだなので、
ゆくゆくはもう少し、別の考えになるかもしれないけれど、
今の考えや状況を自分なりに残しておく。
そもそも、最初は「rails-react」を使い始めた
もともと、
Railsをベースに作っていて、
Railsのみで処理やレイアウトを実装していました。
別のシステムで、
LaravelとVue.jsの組み合わせで、
Laravelのwebpackの
「laravel-mix」
を使っていたこともあり、
同じように、Railsでもwebpackあたりで、
フロントエンドを実装しようと考えました。
そんなときに、
Laravelの方は、Vue.jsを取り入れてみたけれど、
今回のRailsの方に関しては、Reactに触れてみたいな
という考えになって、
RailsでGemを探していたところ、
「rails-react」
というGemがあることを知り、
それを使いはじめることに。
使っていくうちに、
ReactのJSXで実装していくことで、
フロントエンドの処理など、
システムが良い感じに変わっていったので、
その点は良かったなぁと思っています。
Railsの中にReactのJSXがあることでライブラリとか入れにくい
処理を作っていく中で、
最初のうちは良かったのですが、
ちょっとした改修などで、
「ちょっとだけフロント部分を変更したいだけなんだが….」
ということや、
そのフロントエンドの改修をする中で、
「Railsの業務コードは変えないけど、React付随のライブラリ入れたい」
ということがありました。
まぁ、できなくはないのですが、
Railsの中にパッケージ管理等が含まれていることで、
自分の頭の中で、
「最近、フロントエンド部分のみの改修ばかりなんで、ちょっとめんどくさい…」
と個人的に、
ちょっと綺麗に分離したいなという意欲が湧いてきました。
大きな改修を行う事になったので、いざ分離を。
社内でやりとりする中で、
このシステムに〇〇の機能も入れて欲しいな
とか、
知らない間に、
あー、今、システムでできていない部分なんですけど、
自力でファイル作って頑張ってますね〜
という感じで、
システム化できることを、
気合いで頑張られている感じだったので、
他にも改修する要因は色々ありましたが、
色々と現状の運用にそぐわないことが増えてきたし、
フロントエンドの部分を分離したいから、
仕様を整理して、システムをリプレイスしてみよう。
と個人的になったことで、
今まで、
「rails-react」を使って、
Railsの中にJSXのコードを管理するような状況から、
システムをリプレイスして、
フロントエンドのReact部分のみを分離する事になりました。
分離する事になって、Reactの実装でやりたかったこと
分離する事になって、
Reactの部分のみ、
Railsに吸収されていたものを切り分ける中で、
- Reactの最近の書き方などを取り入れたい
- UIライブラリを取り入れたい
- コードの書き方のルールなども模索したい
という３つのことを考えました。
この３つに関して、
完璧まではいかなくても、
取り組んでみたことで、
コードも整理されて管理しやすくなるなど、
良いことばかりだったと今になって思います。
「Reactの最近の書き方などを取り入れたい」
Reactのコードの書き方などを調べていくと、
「React Hooks」
というものがあることを知り、
こちらの書き方を取れる事にしました。
取り入れる事にした理由としては、
- コードの整理が行いやすそう
ということが大きな理由です。
この点は実際に使ってコードを書いて慣れていくと、
すごく書きやすいし、
コードも少なく整理しやすいので、
書いていく中で、Reactが好きになるくらい良かったと思っています。
「UIライブラリを取り入れたい」
UIのライブラリについては、
- マテリアルっぽいレイアウトがいい（好きなので）
- 使えるコンポーネントの数がある程度ある
- マイナーすぎないこと
という点を考えて、
いくつか調べて試しましたが、
最終的に、
「MUI（Material UI）」
を導入する事になりました。
コンポーネントも比較的多いので、
特に実装していると困ることはありません。
個人的に、UIの感じが、マテリアルなのが好きなのと、
この後に紹介する参考にした記事にも、
使用されるUIライブラリとして記載があったので、
導入を決めたというところが大きいです。
「コードの書き方のルールなども模索したい」
実際に分離する事になって、
コードの書き方なども、
ある程度、模索しながら綺麗にしていきたいな。
ということを考えて、
色々と記事を探してみましたが、
すごく参考になった記事があるので、
こちらでも、リンクを共有させてもらいます。
参考にした記事「React Componentの実装ルールを決めてみた」
こちらの記事は、
マネーフォワードの中で、
Reactを使っているらしく、
そのReactのComponentの実装ルールについて、
すごくわかりやすく、
参考になることがたくさん書かれてある記事です。
すべての書かれてあることを、
理解して自分の実装の中にも取り入れることができたわけではないですが、
自分で実装していく上で、
上記の参考記事の中でも特に、
- Functional Componentで実装していく
という点は、
実際に取り入れてみて、
コードの管理や書きやすさの点でよかったと感じています。
分離するコードを書き始めて思ったこと
分離して実装していくと、
- React Hooks
- Functional Component
を使っていくことで、
ファイルが整理しやすかったり、
書いていて冗長性の点で、
前よりもすごく良くなったと感じることが多く、
純粋に実装していくと、もしかするとVue.jsを書くよりも
すごくReactの方が楽しいと感じてるかもしれない
という楽しさを感じるようになりました。
この点だけでも、
フロントエンドを分離して、
新しい事にトライしてすごく良かったと思います。
また、他にも、
「tailwindcss」
を併せて使ったこともありますが、
この辺りの使った経緯や良かった点などは、
別の記事で書いていこうと思います。
スキルを使って、就職/転職/副業する時のサイト
プログラミングのスキルなどを、自分なりに高めた上で、
自分のスキルをアピールして就職や転職を行い、年収をあげるか、
副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。
まずはできる範囲で取り組むことで、
少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。
