Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RailsアプリケーションをSPA化しながら容赦ない削除をした話

Yuki Eda
December 12, 2023

 RailsアプリケーションをSPA化しながら容赦ない削除をした話

年末の大掃除〜リファクタリング・コード断捨離勉強会〜
#年末にコードの大掃除
https://timeedev.connpass.com/event/303260/

Yuki Eda

December 12, 2023
Tweet

Other Decks in Programming

Transcript

  1. 自己紹介 江田優樹(Eda Yuki)/ @edy2xx 2020年にタイミー入社 バックエンドエンジニア 今年のベストバイ: ブリタ浄水ボトル ベスト断捨離: 外付けディスプレイ

    & キーボード ・ガジェット煩悩から解き放たれている ・周期的に欲しいアイテムが変わるので復活の可能性あり 好きな水風呂の温度は16℃
  2. 3

  3. 4

  4. UIリニューアル(SPA化) - プロジェクト概要 - • モノリスなRailsシステムのUIリニューアルを実施 ◦ 約30画面を新デザインに • フロントエンドの技術基盤を移行

    ◦ Rails による SSR(Server Side Rendering) から Next.js による SPA(Single Page Application) に移行 • 結論: 3年かかりました←
  5. CTOも交えて検討しSPA化プロジェクトスタート • TypeScript / Next.js(React) ベースの別リポジトリを切りました • Rails は Web

    API サーバの役割に特化 • アクセス数の少ない画面からじわじわ移行 ◦ 全画面を一気に移行する手法は取りませんでした ◦ 機能追加は最小限(基本はそのまま)
  6. 捨てたものその1 - Fat Controller - 処理の具体例を幾つかピックアップ • 同一エンドポイントで入力フォームと確認画面の2つの責務を持ち、 オブジェクトの状態やパラメータによってaction内で切り替わる • テンプレートファイルで使うインスタンス変数が複数個あり

    before_action でセットされる • ActiveRecord を介したDBへの書き込み前後で複数の条件分岐 • 外部API通信、プッシュ通知、メール・Slack送信 • 独自のエラーハンドリング -> Controller 内で定義された privateメソッド に  書かれているため視線移動も多かった わからん
  7. 捨てたものその1 - Fat Controller - • 役割に対して暗黙的に抱えている責務が過剰にあった ◦ 役割 = “リクエストの意味を理解して適切な出力を行う”*

    と定義 • テストコードでの仕様の網羅性や理解容易性が低い * Railsガイド の Action Controller の概要 を参考
  8. 捨てたものその1 - Fat Controller - • 役割に対して暗黙的に抱えている責務が過剰にあった ◦ 役割 = “リクエストの意味を理解して適切な出力を行う”*

    と定義 • テストコードでの仕様の網羅性や理解容易性が低い -> FormObject を活用したリファクタリングを行いました * Railsガイド の Action Controller の概要 を参考
  9. 捨てたものその1 - Fat Controller - Api::V1::EventsController#create を題材にすると... • ユースケースに対応したロジックを持つクラスを作成 ◦ 例:

    Api::V1::CreateEventForm • Controller では FormObject の呼び出しのみ ◦ 例: CreateEventForm.new(event_params).create! • あとはJSONオブジェクトやステータスコードを返却
  10. 捨てたものその1 - Fat Controller - Api::V1::EventsController#create を題材にすると... • ユースケースに対応したロジックを持つクラスを作成 ◦ 例:

    Api::V1::CreateEventForm • Controller では FormObject の呼び出しのみ ◦ 例: CreateEventForm.new(event_params).create! • あとはJSONオブジェクトやステータスコードを返却 -> Controller のダイエットに成功 🔥
  11. 捨てたものその1 - Fat Controller - Api::V1::EventsController#create を題材にすると... • ユースケースに対応したロジックを持つクラスを作成 ◦ 例:

    Api::V1::CreateEventForm • Controller では FormObject の呼び出しのみ ◦ 例: CreateEventForm.new(event_params).create! • あとはJSONオブジェクトやステータスコードを返却 -> Controller のダイエットに成功 🔥 -> ただし、単にロジックを移しただけになりたくは無かった
  12. • テストピラミッドを意識 ◦ 結合テスト(RSpec: Controller specs) からユニットテストへと比率を上げる • テストに仕様を残す ◦

    残しづらい場合は設計にフィードバックする 捨てたものその1 - Fat Controller - UIテスト 結合テスト ユニットテスト
  13. 捨てたものその2 - 確認画面 - • UIリニューアルの機会を利用して消しました • 顧客からのネガティブなフィードバックは観測せず • リニューアル時のE2Eテストのパターンを相当減らせた ◦

    ブラウザバックの加味、前画面の入力値の引き回しなど → 画面や機能を消すのは勇気も要るがリターン大 → 機能の存在意義を一度問い正してみましょう(自戒)
  14. • Bootstrap ベースの Material Dashboard を使用していましたが削除 • Webpacker(*) や Yarn

    も不要になりリポジトリから消しました ◦ Dockerfile や .circleci/config.yml でも断捨離成功 🎉 捨てたものその3 - CSS, JSライブラリ - * webpack ビルドシステムのRailsラッパー