「zaicoのフロントエンドはなぜRailsエンジニアにやさしいのか」というタイトルで社内LTをしました
「zaicoのフロントエンドはなぜRailsエンジニアにやさしいのか」というタイトルで社内LTをしました
https://gyazo.com/2dd931f5eedf68bd264553d9eef2a5a1
zaicoは10年以上の歴史を持つ在庫管理サービス
当初は ERB + jQuery を利用していたが、複雑なUIや状態管理で課題があった
SPA構成も検討したが、Railsエンジニアには開発体験が大きく変わりすぎるため導入を見送った
MPA（Multi Page Application）構成を維持しつつ、VueをERBのように扱える工夫を導入
自動レンダリング機能
Rails標準のERBレンダリングと同様に、コントローラーのアクション名に対応するVueコンポーネントを自動的に描画
WebVuetifyController を継承することで、items/show.vue などが自動ロードされる仕組み
インスタンス変数の共有
RailsのERBで使えるインスタンス変数を、Vue側では @vue_data として渡し、props.serverData 経由で利用可能。
MPA構成のため、リアクティブなデータ取得にはAPIコントローラーを別途用意する必要がある
表示用と内部API用のコントローラーを使い分けることで、MPAでもリアクティブな画面を実現させた
画面表示用 - app/controllers/items_controller.rb
内部API用 - app/controllers/api/items_controller.rb
code:rb
layout 'vuetify_main'
で怖くなってしまったyamanoku.icon