はじめに
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を使うのがもっとも簡単です。
