Rails7×Svelte でWebアプリ開発 part2

はじめに

こちらは Rails7×Svelte でWebアプリ開発 part1 (環境設定、簡単な表示まで) の続きになります

Svelte コンポーネントに props を渡す

User model, 詳細画面用の controller, views を作成します

$ bin/rails g model User name:string email:string
$ bin/rails db:migrate
$ bin/rails g controller users show

適当なデータを作成します試しにこちらを使います

irb(main):001> User.find(1)
  TRANSACTION (0.0ms)  begin transaction
  User Load (0.1ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
=> 
#<User:0x000000011303a890
 id: 1,
 name: "Taro",
 email: "[e-mail]",
 created_at: Mon, 11 Dec 2023 13:18:54.652145000 UTC +00:00,
 updated_at: Mon, 11 Dec 2023 13:18:54.652145000 UTC +00:00>

これらを erb でviewを作成します。
そのHTMLにelementを設置, ユーザーデータを送信します

app/views/users/show.html.erb

<p style='color: green'><%= notice %></p>

<%= content_tag :div, '', id: 'users-show', data: { name: @user.name, email: @user.email }%>
<%= vite_javascript_tag 'users-show' %>

それらをフロント側で使います

app/frontend/entrypoints/users-show.js

import UsersShow from '../components/UsersShow.svelte'

const target = document.getElementById('users-show')

new UsersShow({
  target: target,
    props: {
      user: {
        name: target.dataset['name'],
        email: target.dataset['email'],
      },
    }
})

app/frontend/components/UsersShow.svelte

<script>
  export let user;
</script>

<p>User: {user.name}</p>
<p>Email: {user.email}</p>

javascriptで送ったデータをsvelteコンポーネントに渡してrenderできます。

overmind を使う

前回の動作確認した際、以下の２つターミナルからサーバーを２つ立てる必要がありました

$ bin/rails s
$ bin/vite dev

foreman, overemind を使ってまとめてサーバーを立てるように改善しましょう

参考) https://way-too-mainstream.vercel.app/articles/using-overmind-for-vite-rails-dev

macであれば brewから tmux, overmind をインストールします

$ brew install tmux
$ brew install overmind

立ち上げるコマンドを以下のファイルで作成

Procfile.dev

vite: bin/vite dev
web: bin/rails s

こちらのファイルからovermind を起動することでrails, svelte サーバーを立ち上げられるようになりました！！

$ overmind start -f Procfile.dev

さいごに

• svelteにデータを送る
• overmindを使って vite, rails サーバーを楽に立ち上げることをできるようにしました