見出し画像

ツクリンクのフロントをリアーキテクチャするお話し

いわまさ@ちいかわうさぎ系エンジニア

はじめに

みなさんこんにちは！
ツクリンクでエンジニアとして働いている、岩倉です。

ツクリンクでは今後、フロントのリアーキテクチャを行う想定なので、今回は現状どうなっているか？そしてどうして行きたいか？について語ります。

「どうして行きたいか？」の部分は今後の状況で変化する可能性がありますので、あくまでも現時点での内容を記載します。


背景

2023年8月時点でフロントエンジニアの採用を行っておりますので、募集要項から抜粋します。

ツクリンクのWebアプリケーションはフロントエンドを含め、シンプルなRuby on RailsのMPAで構成されており、一部ページで個別にReactを使っています。

今後モバイルアプリ強化のためバックエンドではAPIを多く作成していく予定です。

そこで作成したAPIをアプリ/フロントで共用していくことで生産性を高めていきたいと考えており、フロントエンドのリアーキテクチャとReactを利用した開発の推進を計画しています。

フロントの募集要項より

上記の通り、ツクリンクではRuby on RailsのMPA構成で開発しています。

GitHubのリポジトリより

ツクリンクの現在のGitHubリポジトリは2014年から継続して開発しており、
9周年を迎えています🎉

Reactの初版が2013年3月29日に登場、当時のRailsは4系、Rubyは2.1くらいと考えると感慨深いです。

私は当時の開発から関わっているわけでは無いですが、当時からの開発があり、今があるのでここまで成長を続けてきた事に本当に感謝です😊

と、言うわけで現在に至るまでRuby on Railsで開発を続け、部分的ではありますがReactも使っている状況です。

また、最近ではFlutterを使用したモバイルアプリの開発も積極的に行なっています。
その関係で、今後はよりAPIの開発が盛んになることが予想されます。

現状の構成のままだとFlutterアプリで使うAPIを作成し、フロントはRailsのERBで構築してAPIは使わないような状態になってしまうため、合わせてフロントのリアーキテクチャも検討していく流れを考えています。

全容として、過去記事も貼り付けておきます。

現状の構成と課題

前述の通り、Ruby on RailsのMPA構成になっています。

  • バックエンド

    • Ruby on Rails

  • フロントエンド

    • ERB

    • 部分的にReact

大半はERBを使用しており、部分的にReactを使用している状況なのでバックエンドはAPIの作成だけを行うように分離しつつ、フロントの戦略を練る必要があります。

今後どうして行きたいか？

パッと思い付くところで行くと以下の2パターンがあるかと考えています。

その他のパターンや案などがあれば、今後採用予定のフロントエンド専任の方と一緒に決めて行きたいです。

A. ERBに乗せる形でフロントの実装はReactに寄せる
B. Next.jsの環境を構築し、少しずつ移行する

具体的にどのように進めて行くかを以下に記載します。

A. ERBに乗せる形でフロントの実装はReactに寄せる

こちらはほぼ今の構成に乗せる形で実装が可能で、ERBで生成したHTMLに対してReact DOMを使用して連携する事になります。

実装例

<!-- ERBはこれだけ -->
<div class="root"></div>
// React18からの書き方
import { createRoot } from 'react-dom/client';

const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(<App />);

ちなみに現在もreact-railsを使用しているので構造的には似たような感じです。

[メリット]

  • インフラの追加が不要で今の環境のまま対応が可能

  • スタイルも現在のERBで使用しているscssをそのまま使える

[デメリット]

  • 完全にRuby on Railsの環境からフロントを分離できない

    • ルーティングはRails側で行う or React Routerを使用したSPAになる

まずはこちらのパターンで進めて、段階的にNext.jsに移行するような方式も取れるかと考えています。

B. Next.jsの環境を構築し、少しずつ移行する

新規ページについてはNext.jsの環境で作成し、既存ページも少しずつ移行する方式です。
特定のページの場合は別サーバーに向くようにルーティングの設定も必要になります(Nginxなどで切り替えることになる？)

[メリット]

  • Ruby on Railsから完全に分離ができる

    • フロントだけで独立して開発が可能になる！(API通信するだけなので)

  • 開発速度が上がる

    • 変更を保存しただけで差分リロードが可能になる(Aだとブラウザリロードが必要)

  • サーバーサイドレンダリングが可能

    • パフォーマンスの向上

    • SEO対策

[デメリット]

  • インフラの準備が必要(Nodeサーバー)

  • 既存のスタイルが使用できないため、移行が必要

  • 共通部分(ヘッダー、フッター、メニューなど)もNext.js側に作成が必要

    • 状況次第では新旧環境どちらにも修正が発生する可能性がある

メリットは多いですが、デメリットも大きいのでこちらにこちらに舵を切る場合は結構スタミナが必要なので、より一層フロントエンドの採用が重要になってきます。

最後に

今回はツクリンクのフロントエンドの現状と今後どうしたいかについて記載しました。

私自身、フロントエンドの専任では無いので今後採用を進めつつ、一緒に改善を行なっている仲間を心待ちにしております！

少しでも興味を持っていただいた方、いつでも気軽にお声がけください🙇‍♂️

X(旧Twitter) DMでも 、採用ページでも大丈夫ですのでお待ちしております。


いいなと思ったら応援しよう！