Hotwire

概要 開発中のサービス「LytoCycle」では、データ保存の際にモーダルを表示させています。 モーダルとは既存とは別枠で表示されるウィンドウで、その処理を完了するまでほかの部分を操作できなくなるUIです。エラー画面やお知らせ画面などでよく見かけます。 このモーダルの実装には、Hotwireの Stimulus を利用しました。

エムスリーキャリア薬剤師採用支援チームの吉田と申します。 今回は、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)です。 先日…

こんにちは！学びたいことが多くていろんな分野を彷徨っている新卒エンジニアのhansprocsです！ この度は2024年8月24日に行われた大阪Ruby会議04に参加したのでその感想と気になった内容をもとに作ってみましたので皆さんにご紹介したいと思います✨ 昨年と変わったところも、変わらないところも 大阪Ruby会議に参加するのは昨年に引き続き2回目です。 昨年はまだRubyをちゃんと使ったことがなかったので、話の流れを追いつくことに必死だった覚えがあります。 今年は中之島で行われました。 昨年の心斎橋とはまた違った雰囲気で、個人的には行われる場所によってイベントの雰囲気も大きく変わると感じまし…

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をインストールする（ページネーションを使う場…