Rails 7 + Hotwireで実用的なSPAを作ってみた - Studyplus Engineering Blog

こんにちは、サーバーグループの市川です。モバイルクライアントグループに所属していましたが、バックエンドの開発を担当することが多くなったので、サーバーグループ異動にしました。 最近、Studyplusブックというサービスをリリースしました。Studyplusアプリ内で、200冊以上の参考書が読み放題で使えるサービスです。 このサービスの開発にあたって、社内向けの管理画面を新規に構築したのですが、Rails 7から標準でインストールされるHotwireを利用することにしました。 今回はHotwireを実際に利用する上で、どういったUIを作ればいいか試作しましたので、その話を書きます。 作った画面 書いたソースコード 使った技術 解説 Turboを理解する Turbo Frameでフレーム分割する 追加フォーム (Turbo Frame) 追加処理 (Turbo Stream) 編集フォームと更

[YassLab]

“今回Stimulusは使わず、Turboのみで実現 / Hotwireは、JavaScriptをあまり使用せずに、HTMLベースで機能を実現するアプローチ / CSSフレームワークにはTailwind CSS / tailwindcss-rails gemを使うことで、Node.jsなしで導入できるため採用”

[k_oishi]

弊社のモバイルアプリチームからサーバーチームへ本人の希望もあり異動した方です。(フロントエンドもバックエンドも経験ある方だけどRailsは初めて)

[hasiduki]

なんかすごそう！！ところで手元のこのRailsアプリはCoffeeScriptとBootstrap使ってるんだけど、7に上げても動くの？