合同会社春秋テックブログPublicationへの投稿
🪡

inertia-railsで簡単に始めるRails x React 環境、 MVCにReactを使う

saboyutaka
に公開
React
Rails
Inertia.js
tech

今回はinertia-railsを紹介します。これまでRailsでReactを導入する場合にNext.jsを使ってフロントエンド分離するか、react-railsでERB上にReactを動かすかという選択肢がありました。しかしNext.jsでは複雑すぎてチームに合わない場面があります。

inertia-railsは、Inertia.js を Ruby on Rails に統合するアダプタです。Inertia.jsではバックエンドのWebフレームワークと組み合わせてReactなどのUIフレームワークを利用してSPAを実装できます。inertia-railsでは1分ほどのセットアップでReact, Vite, TypeScriptの環境を作ることができます。

Rails・Reactを経験している人向けに端的に、inertia-railsを説明すると具体的には以下のメリットがあります

  • Reactから見るとRailsがRouterやgetServerSideProps相当を担当
  • Railsから見るといつものcontroller・actionで実装できて、ViewをReactで書ける
    • ERB + Hotwireとほぼ同じ立ち位置

inertia-railsでの実装

まずはコードを見た方が早いと思うので見てみましょう。

Routing(Rails)
いつも通りのrouting

config/routes.rb
Rails.application.routes.draw do
  resources :books
end

Controller/Action(Rails)
Action内のrenderでinertiaを指定し、Page Componentとpropsを渡します。

app/controllers/books_controller.rb
class BooksController < ApplicationController
  def index
    @books = Book.all
    render inertia: "books/index", props: { books: @books }
  end
end

View(React)
renderで指定したPage Component, props で描画します。

app/javascript/pages/books/index.tsx
import { Link } from "@inertiajs/react";

interface Book {
  id: number;
  title: string;
  body: string;
  created_at: string;
}

interface Props {
  books: Book[];
}

interface BookItemProps {
  book: Book;
}

const BookItem = ({ book }: BookItemProps) => {
  return (
    <div key={book.id}>
      <div>
        <p><strong>Title:</strong> {book.title}</p>
        <p><strong>Body:</strong> {book.body}</p>
        <p><strong>Created at:</strong> {book.created_at}</p>
      </div>
      <p>
        <Link href={`/books/${book.id}`}>Show this book</Link>
      </p>
    </div>
  );
}

export default function Index({ books }: Props) {
  return (
    <>
      <h1>Books</h1>

      <div id="books">
        {books.map((book) => (
          <BookItem key={book.id} book={book} />
        ))}
      </div>

      <Link href="/books/new">New book</Link>
    </>
  );
}

以上です。便利。

Inertia.jsについて

Inertia.jsはLaravelのCoreチームが管理・開発しているOSSです。サーバーとフロントの薄い結合層・プロトコルとしてデザインされており、バックエンドはLaravel, Rails, Django, Phoenixで利用可能です(その他にもGoやRustなどの実装例が紹介されています)。UIライブラリはReact, Vue, Svelteが選択できます。SPAのような画面遷移やFormのサポートなど様々な機能があります。

Inertia.js のコア思想は以下のとおりです。

  • Modern Monolith（モダンモノリス） を実現するための仕組み
  • ルーティングはサーバサイドのものをそのまま使う
  • サーバは JSON を返すだけ、描画はフロント側コンポーネントに任せる
  • API（REST / GraphQL）を作成しなくて良い
  • SPAな体験を作ることが出来る
  • 認証はサーバーサイドのものをそのまま使える

どんな時に使うといいか

  • バックエンドでRailsを採用している
  • ReactやVueでUIを作成したい
    • UIコンポーネントライブラリ等を使いたい
  • Webアプリだけでよく、ネイティブアプリを作る予定がない
  • レンダリングの最適化をそこまで気にしなくてよい
  • 1人、または少人数のチームで開発している
  • Viteを使うため、既にあるSprocketsやWebpackと同時利用可能

Railsでモノリスで作りたい時にViewをERB + Hotwireでいくか、inertia-railsでReactでいくかのどちらかを選べばいいです。

まとめ

inertia-railsを使うと1分ほどのセットアップでサクッとReactが使えるようになりました。これまでReactを使うためにNext.jsを導入したり、react-railsでERBとReactの二重管理などを行なっていましたが、inertia-railsでまるっとReactで実装できるようになりました。 rails new と inertia:install で数分でReact, TypeScript環境を作れるのでぜひ試してみてください。

宣伝
弊社合同会社春秋ではWebアプリケーションやクラウドの開発・支援を行なっています。Ruby on Rails, Laravel, React, Vue, Flutter, GraphQLなどを強みとしています。

RailsやReactを使った高速なプロダクト開発から、大規模なアプリケーションのGraphQLやNext.jsの導入など様々な規模のWebアプリケーションの開発に精通しているエンジニアが多数います。

Webアプリケーションの開発や設計、技術導入支援、GraphQLの導入・高速化など、お仕事募集してます。

その他のリソース

合同会社春秋テックブログ
合同会社春秋テックブログPublication

合同会社春秋のテックブログです！

Discussion