CodeZine(コードジン)

特集ページ一覧

Rails 7における、バンドラーを用いたReactアプリ開発~jsbundling-railsとesbuild~

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2022/07/08 11:00

 本連載では、2021年12月にリリースされたRuby on Rails 7にフォーカスし、クライアントサイド開発のためのさまざまな機能を、API開発やリアルタイムWeb開発も絡めながら紹介していきます。連載第3回は、第2回でimportmap-railsとPropshaftを使って作成したReactアプリを、別の構成であるjsbundling-railsとesbuildで開発します。この過程を通じて、これらのライブラリの目的と機能について理解します。

目次

はじめに

 WebアプリケーションフレームワークのRuby on Railsは、2021年12月にバージョン7となりました。これに伴い、クライアントサイド開発のサポートについても大きな変化を遂げ、多様な選択肢が提供されるようになりました。本連載では、このRails 7にフォーカスし、クライアントサイド開発のためのさまざまな機能を、API開発やリアルタイムWeb開発も絡めながら、紹介していきます。

対象読者

  • Ruby on Railsを長らく使ってきた方
  • 他のWebアプリケーション開発フレームワークを使ってきた方
  • Railsにおけるフロントエンド開発に関心のある方

必要な環境

 本記事のサンプルコードは、以下の環境で動作を確認しています。

  • macOS Monterey
    • Ruby 3.1.0p0
    • Ruby on Rails 7.0.2.3
    • Google Chrome 100

バンドラーによるReactアプリ作成の準備

 本記事では、前回同様にRailsアプリにReactを組み込む中で、フロントエンド開発の基本的な流れをおさえていきます。前回は、Rails 7で標準となったimportmap-railsによってReactモジュールを直接インポートする例を紹介しました。この方法は、今後は標準的なものになっていくと思われますが、importmap-railsが使えないブラウザ環境や、Shimライブラリによる代替的な手法が好ましくないと考えるケースもあるとして、今回は従来から用いられてきたバンドラーによるReactアプリの作成を紹介します。

 作成するReactアプリは前回同様にシンプルなものです。コントローラとアクションを1個作成し、そのビューのコンテンツをReactによって生成します。コンテンツも最低限(メッセージと背景画像が表示されるのみ)にとどめています。

バンドラーを選択する

 Rails 7でバンドラーを使う場合、jsbundling-railsというライブラリを使います。このライブラリを使うと、バンドラーとしてesbuild、rollup、そしてwebpackのいずれかを選択できます。バンドラーを選択するにあたり、これら3つのバンドラーを主な項目について比較してみたのが以下の表です。

表 サポートされるバンドラーの比較
  esbuild rollup webpack
ビルド速度 高速 低速 低速
CommonJSモジュール対応 △(要プラグイン)
ES6対応 △(要Babel)
TypeScriptのトランスパイル △(要プラグイン) △(要プラグイン)
JSX構文のトランスパイル △(要プラグイン) △(要Babel)
Tree-shaking ×

 この表から、esbuildとrollupはES6(ECMAScript 2015)にネイティブ対応し、TypeScriptとJSX(JavaScriptコードにHTMLを直接記述する、主にReactで用いられる拡張構文)のトランスパイルが可能など(rollupではプラグインで対応)、基本機能に大きく変わるところはないように見えます。Tree-shakingという、ES6モジュールで使用されない部分をビルド時に削除する機能も有しています。これらに比べると、webpackは基本的な部分で見劣りすると言えます。

 esbuildが優れているのが、ビルドの速度です。rollup、webpackと比較すると、100倍以上の速度差が出たという報告もあります。rollup、webpackがJavaScriptで記述されているのに対して、esbuildはGo言語で記述されており、ネイティブコードにコンパイルされることで高速に動作するのです。また、並列処理が得意とされるGo言語の特性を生かして、esbuild自体も並列化を意識した設計になっているようです。

 これらを勘案して、今回はesbuildを選択することにします。開発用サーバの起動に全くストレスがないのを実感できるでしょう。

アプリケーション環境を整える

 まずは、バンドラーに必要なアプリケーション環境を整えておきます。今回使用するバンドラーであるesbuild自体は、Railsアプリケーションの作成時にインストールされますが、このためにNode.jsとyarnパッケージマネージャが必要となっています。また、Reactのインストールにもyarnパッケージマネージャを使用します。そこで、Node.jsとyarnパッケージマネージャが入っていなければインストールしておきます。手順は省略しますが、macOSではHomebrewを使うのがもっとも簡単です。

 なお、Railsアプリケーションの作成時に下記のようなメッセージが混じる場合には、yarnパッケージマネージャが最新版ではありませんので、念のため最新版にアップデートしておきます。

warning Your current version of Yarn is out of date. The latest version is "1.22.18", while you're on "1.22.17".

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

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

著者プロフィール

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

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5