はじめに
こちらは 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: "taro@example.com",
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 サーバーを楽に立ち上げることをできるようにしました