• 【未経験エンジニア】Turboを使ってUXを向上させよう！

【未経験エンジニア】Turboを使ってUXを向上させよう！

  • 最終更新日： 2026年3月12日（木）
  • 公開日： 2026年3月12日（木）

はじめに

こんにちは。
2026年1月に未経験エンジニアとして入社した渡邊です。

私が所属しているデザインシステム室の先輩方の多くが、プログラミングスクールに通った後に入社していますが、私はスクールに通ったことがなく、バックエンドは全くの未経験でした。（HTMLとCSSは半年ほど触れていたことがあります）

今回はそんな未経験エンジニアである私が、ファンデリー入社当初の研修課題として作成したアプリの、UX向上のために用いた「Turbo」というライブラリについて共有させていただければと思います。

Turboとは？

Turboとは、Ruby on Rails7から標準機能として搭載された、ページをリロードせず、高速に画面更新を行うためのライブラリです。

またTurboはHotwireという仕組みの中の一つとして数えられているため、まずHotwireについて共有させていただきます。

Hotwireとは

Hotwire（HTML Over The Wire）とは、JavaScriptの記述を最小限に抑えながら、モダンでインタラクティブなwebアプリケーションを作成するためのライブラリの総称です。

Hotwireを利用することでサーバーから直接HTMLを送信し、クライアント側で描画・部分更新を行うことができるようになります。
複雑なSPAなどを構築する場合、以前はReactやVue.jsなどを用いてJavaScriptの記述を行う必要がありましたが、Hotwireを用いることで記述量を大幅に削減でき、開発速度や保守性、学習コストなどの改善が期待できます。

Hotwireは以下の3つのライブラリから構成されていますが、今回はTurboのみ共有させていただきます。

  • Turbo
  • Stimulus
  • Strada

Turboとは

冒頭でお話しした通り、Turboとはページ全体リロードをせずに必要な部分だけ更新することで、ページ更新を高速化するライブラリです。

また、Turboは単一の機能を持つライブラリではなく、以下の3つの機能を持っています。

  • Turbo Drive
  • Turbo Frame
  • Turbo Stream

Turbo Drive

Turbo Driveの機能を簡潔に説明すると、「ページ遷移の高速化」です。
（Turbo Driveを使用するために何かコードを書く必要は基本的になく、デフォルトで有効になっています。）

通常のwebサイトでは、リンクを押した場合

①クリック
②サーバーにリクエスト
③HTML取得
④ページ全体をリロード

といった手順を踏みますが、

Turbo Driveでページ遷移を行った場合

①クリック
②fetch（Ajax）でHTML取得
③<body>だけ差し替える
④ページ更新

となり、ページ全体のリロードを行わないため、高速でページを遷移することができます。

加えて、Turbo Driveは前のページをキャッシュするため、戻るボタンでのページ遷移も高速になります。

Turbo Frame

Turbo Frameの機能を簡潔に説明すると、「ページの一部分更新」です。
一般的なwebの場合、更新を行うとページ全体がリロードされますが、Turbo Frameを使うことで指定した部分のみを差し替えることができます。

具体的な使用方法について、モーダルを実装する場合を考えてみます。

Turbo Frameを用いて、index.html.erbにモーダルを実装する場合、<%= link_to %>の編集リンクに以下のような記述を行います。すると、本来リンクがクリックされた後、別ページで描画される編集フォームを<turbo-frame id=”modal”></turbo-frame>部分に差し替えることができます。

# index.html.erb

<h1>記事一覧</h1>

<%= link_to "編集", edit_post_path(post), data: { turbo_frame: "modal" } %>

<turbo-frame id="modal"></turbo-frame>

つまり、index.html.erbで編集リンクがクリックされた際に、下記のedit.html.erb内の<turbo-frame id=”modal”></turbo-frame>で囲われた部分が、index.html.erb内の<turbo-frame id=”modal”></turbo-frame>と差し代わることでモーダルが表示されるということです。

# edit.html.erb

<turbo-frame id="modal">
  <h2>記事編集</h2>

  <%= form_with model: @post do |f| %>
    <%= f.text_field :title %>
    <%= f.submit "保存" %>
  <% end %>
</turbo-frame>

Turbo Stream

Turbo Streamの機能を簡潔に説明すると、「サーバーから直接DOM要素を追加・更新・削除する仕組み」です。

Turbo FrameはDOM要素の差し替えを行うことができますが、DOM要素の追加・更新・削除ができません。つまり、モーダルを表示できても、保存ボタンを押した際に、モーダルを閉じる機能は持っていないということです。

そこで活躍するのがTurbo Streamです。

編集フォームの保存ボタンが押されると発火するupdate内に、下記のようなformat.turbo_streamの記述を行うと、

def update
  @post.update(post_params)

  respond_to do |format|
    format.turbo_stream
    format.html { redirect_to posts_path }
  end
end

update.turbo_stream.erbが発火するようになります。

# update.turbo_stream.erb

<turbo-stream action="remove" target="modal"></turbo-stream>

こちらが発火すると、指定したidと一致するDOM要素を削除する（モーダルを閉じる）ことができます。

通常のwebでは、フォームの送信があった場合、サーバー処理の後、リダイレクトを行うことでページ全体をリロードしますが、Turbo Streamを使用するとサーバーはTurbo Streamレスポンスを返し、指定したDOM要素のみを更新するため、画面全体のリロードをせずに更新することが可能になります。

作成した研修アプリを用いた挙動イメージ

ここまではコードを用いてTurboを用いたページの高速遷移について説明を行いました。最後に、Turboで実装したアプリの挙動イメージを、私が研修で開発したお弁当記録アプリの画面を用いて共有しようと思います。

このアプリは、お弁当とそのお弁当のおかずを記録できるアプリです。（動画はおかずを記録する画面です）
画面内のURLを見てわかる通り、ページ内でのモーダルの表示、非表示、おかずの追加や削除などの機能がページ全体のリロードなしで行えるようになっており、UX向上に寄与できているかと思います。

まとめ

  • TurboはHotwireの一つで、ページ遷移の高速化を行うライブラリ。
  • Turbo Drive はページ遷移を高速化し、リロードなしでページを切り替える機能。
  • Turbo Frames は画面の一部分のみを差し替える機能。
  • Turbo Streams はDOM要素の追加・更新・削除を行う機能。
  • Turboの機能を組み合わせることで、UXや開発効率を向上させることができる。

さいごに

現在デザイン・システム室では、新しいメンバーを募集しています。少しでも興味を持たれた方は、ぜひご応募ください！
皆様からのご応募、心よりお待ちしております。

募集要項およびエントリーフォーム

参考

：https://zenn.dev/shita1112/books/cat-hotwire-turbo/viewer/abstract
：https://www.issoh.co.jp/tech/details/3624/
：https://qiita.com/Ninomin/items/d0f7e0c2c80b49a7596c