Rails 7で簡単にCSSフレームワークを導入！ Tailwind CSSとBootstrapを活用したチュートリアルで学ぶ

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

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

はじめに

　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.3
  • Google Chrome 103

cssbundling-railsを使ってCSSフレームワークを選択する

　Rails 7では、cssbundling-railsというライブラリを使うことで、CSSフレームワークを手軽にアプリケーションに導入できます。CSSフレームワークとして、Tailwind CSS、Bootstrap、Bulma、PostCSS、そしてDart Scssのいずれかを選択できます。それらのCSSフレームワークにはそれぞれ特徴があり、どれを利用すべきとは一概に言えません。ただ、Bootstrap、Bulma、PostCSS、Dart Scssの利用には基本的にNode.js／esbuild環境が必要となってくるのに対し、Tailwindのみそういった環境が不要なので、Import Mapsと組み合わせることができるなど、存在が際立っていると言えます。

　第4回では、このように稼働環境をシンプルにできるTailwind CSSと、人気と実績のあるBootstrapの2つについて、導入方法と簡単な設定を紹介することにします。

［NOTE］アプリケーション環境

　今回紹介する例では、JavaScriptバンドラーを使用します。このためにNode.jsとyarnパッケージマネージャが必要ですので、まだインストールしていないという場合はあらかじめインストールしておいてください。手順は省略しますが、macOSではHomebrewを使うのがもっとも簡単です。