SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Railsによるクライアントサイド開発入門

Rails 7で簡単にSPA開発! Turbo StreamsとJavaScript利用を支援するStimulus

Railsによるクライアントサイド開発入門 第6回

  • X ポスト
  • このエントリーをはてなブックマークに追加

createアクションがStreamsアクションを返すようにする

 新規作成フォームからはcreateアクションが呼び出されるので、コントローラのcreateアクションメソッドの内容を以下のように変更します。

リスト app/controllers/words_controller.rb
…略…
if @user.save
  # createビューのレンダリングに変更
  render :create
else
…略…

 saveメソッドでの保存に成功したら、詳細ページへリダイレクトするのではなく、createビューをレンダリングした結果を返すということにします。ここでのcreateビューは、Streamsのタグを返すビューです。app/views/words/create.turbo_stream.erbをリストの内容で作成します。

リスト app/views/words/create.turbo_stream.erb
<%# 作成した項目を一覧に挿入するStreamsアクション %>
<%= turbo_stream.append 'words' do %>
    <%= render @word %>
    <p>
      <%= link_to "Show this word", @word %>
    </p>
<% end %>
<%# フォームをリンクで置き換えるStreamsアクション %>
<%= turbo_stream.update 'new_word' do %>
    <%= link_to "New word", new_word_path %>
<% end %>

 ビューのファイル名をcreate.turbo_stream.erbとしているのは、返すのが単なるHTMLドキュメントではなく、Streamsドキュメントとするためです。create.html.erbというファイル名では正しく動作しません。

 そしてここで登場するのが、turbo-railsライブラリのヘルパーである2つのメソッドです。

  • turbo_stream.appendメソッド:引数で指定されるid属性を持つ要素の末尾にブロックの内容を挿入する
  • turbo_stream.updateメソッド:引数で指定されるid属性を持つ要素の内部をブロックの内容で置き換える

 前者では、引数に「words」を指定していますので、index.html.erbにある<div id="words">~</div>の末尾に、新規作成した項目がリンクとともに挿入されます。後者では、引数に「new_word」を指定していますので、<turbo-frame id="new_word">~</turbo-frame>の内部をリンクに置き換えます。

[NOTE]挿入、置換のためのその他のヘルパーメソッド

 ここではturbo_stream.appendメソッドとturbo_stream.updateメソッドを用いましたが、要素先頭に挿入するturbo_stream.prependメソッド、要素の内部ではなく要素そのものを置き換えるturbo_stream.replaceメソッドもあります。

[NOTE]turbo_stream.xxxxメソッドのレンダリング

 turbo_stream.xxxxメソッドはturbo-streamタグを生成しますが、具体的なレンダリングのイメージは以下の通りです(turbo_stream.appendメソッドの場合)。メソッドの種類はaction属性に置き換えられ、対象のid属性はtarget属性で指定されます。

<turbo-stream action="append" target="new_word">
    …挿入する内容…
</turbo-stream>

Streamsの動作

 これでアプリケーションを動作させてみると、[Create Word]ボタンのクリックで追加した項目が一覧の最後に現れ、[New word]リンクも復活することが分かります(図1)。

図1 新規項目が追加されてリンクも復活した
図1 新規項目が追加されてリンクも復活した

 内部で何が行われているかを以下にまとめてみました(図2)。

  • [Create Word]ボタンのクリックでコントローラのcreateアクションへのfetchリクエストが発生
  • saveメソッドでの保存が成功すれば、createビュー(create.turbo_stream.erb)をレンダリングして返す
  • createビューの中身は2つのStreamsアクションであり、それぞれ追加項目の挿入、[New word]リンクの復元を行う
図2 追加処理と置き換え処理
図2 追加処理と置き換え処理

 Streamsアクションによる更新では、Framesによるフレームだけでなく、一般的なHTML要素も操作の対象になることがお分かりいただけると思います。

次のページ
編集機能と削除機能の実装

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Railsによるクライアントサイド開発入門連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/16950 2022/12/27 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング