Hotwire

エムスリーキャリア薬剤師採用支援チームの吉田と申します。 今回は、Hotiwreを用いたフロントエンド実装について、弊社の採用管理システムの実例を交えてご紹介いたします。 何をやったか? 弊社の採用管理システムには薬剤師の検索機能があり、ユーザー毎に検索条件を保存することが可能です。 この画面でTurbo Streamsを用いてモーダルとフラッシュメッセージの制御を行いました。 今回実装した画面遷移パターンをざっくりとまとめると以下のようになります。 リクエストの種類やサーバーサイドでの処理結果によって、最終的に表示する内容が分岐しています。 設計前は「Turbo Framesで実装できるやろ…

はじめに フィヨルドブートキャンプでプログラミングの学習をしています、もとひろ(@motohiromm)と申します。 献立の相談と献立表の共有ができるアプリ「ごはんサミット」をリリースしました！ 本記事では「ごはんサミット」の使い方や開発の振り返りなどを書きたいと思います。 はじめに ごはんサミットについて 概要 作った経緯 使い方 家族を招待する 献立会議をする 献立を登録する 会議で提案した料理をそのまま献立表に登録する 会議をせずに直接献立表に登録する 献立表を見る 技術スタック 工夫したところ サービスに関して 献立の登録方法を2パターン設けた 会議室をリアルタイム通信にした ユーザー…

はじめに Hotwireとは？ 今回作成するもの お気に入り機能をHotwireなしで作成してみる セットアップ Likeモデルの実装 Likeコントローラーの実装 問題点 HotwireのTurboでお気に入り機能を完成させる 実装概要 app/controllers/likes_controller.rb app/views/likes/update.turbo_stream.erb 検証してみる Hotwireを勉強してみての感想 Pros Cons: 最後に はじめに みなさんこんにちは、Howtelevisionでソフトウェアエンジニアをしている宮本航平(kohei1d)です。 先日…

弊社が提供しているSaaS「Re:lation」の顧客情報や契約内容を管理する社内システムをRails7から導入されたHotwireで構築し直した話を書きます。 なぜ移行しようと思ったか？ 移行前の下準備 Hotwireを採用した理由 Hotwireへの移行は画面毎に 移行と合わせてデザイン変更を行う Hotwireならではの割り切った考え方 移行前後のファイル数・ファイル行数の比較 コミット数の比較 さいごに なぜ移行しようと思ったか？ 移行する前は、Rails 6.1.7 + Bootstrap4系 + jQueryの構成でした。 全画面の共通の作りとして、ajaxでデータを取得＆更新する…

Hotwireを使ってみる第三弾です！ 今回はJSを使わずに、Hotwireで無限スクロールを実装してみます。 下準備 1. Gemをインストールする gem "kaminari" 2. モデルを作る $ rails g model post 20240813000000_posts.rb class CreatePosts < ActiveRecord::Migration[7.1] def change create_table :posts do |t| t.string :name t.timestamps end end end 実装する 1. ルーティングを設定する config/…

Hotwireを使ってみる第二弾です！ 今回は、検索結果をHotwireで表示するようにしてみます。 画面の全てを再描画する必要がないので、速度が上がるかもしれませんね！ 下準備 1. モデルを作る $ rails g model post 20240813000000_posts.rb class CreatePosts < ActiveRecord::Migration[7.1] def change create_table :posts do |t| t.string :name t.timestamps end end end 2. Gemをインストールする（ページネーションを使う場…

Rails6までは「もっと見る」などの動的な機能を実装する場合はJSが必須でした。 しかし、Rails7から標準搭載されたHotwire（Turbo）を使用すると、JSを使わずに「もっと見る」を実装することができます。 今回はHotwireを使った「もっと見る」の実装方法を紹介します。 下準備 1. Gemをインストールする gem "kaminari" 2. モデルを作る $ rails g model post 20240813000000_posts.rb class CreatePosts < ActiveRecord::Migration[7.1] def change create…