🍅

RailsプロジェクトにSlimを導入する

2024/06/19に公開

Rails

はじめに

まず、Railsを使用してシンプルなトップページを作成する方法を紹介します。
トップページ作成後にSlimというテンプレートエンジンを導入して簡潔で読みやすいコードを記述する方法について説明します。

コントローラー作成

まずRailsのコントローラーを作成します。コントローラーはビューとモデルの間で通信を仲介する役割を果たしています。<アクション名>はオプションなのでなくても問題ないです。

bundle exec rails generate <コントローラ名> <アクション名>

# generateは短縮できます
bundle exec rails g <コントローラ名> <アクション名>

今回はトップページを作成して表示したいので、topという名前のコントローラーと、その中にindexアクションを作成します。

bundle exec rails generate controller top index

上記のコマンドを行うと、次の基本的なMVCの構造などが自動的に生成されます！

├── app
│   ├── controllers
│   │   └── top_controller.rb     
│   ├── views
│   │   └── top
│   │       └── index.html.erb    
│   └── helpers
│       └── top_helper.rb         
├── test
│   └── controllers
│       └── top_controller_test.rb 
├── config
│   └── routes.rb                 # 「get 'top/index'」が追記されます
└── app
    └── assets
        └── stylesheets
            └── top.scss

コントローラの生成: app/controllersディレクトリにTopControllerという名前のコントローラファイル (top_controller.rb) が生成され、指定したアクション（今回はindex）がデフォルトで作成されているはずです。
ルーティングの追加: コントローラとアクションに対応するルーティングがconfig/routes.rbに自動で追加されます。
ビューの生成: app/views/topディレクトリが作成され、その中にindex.html.erbという名前のビューファイルが生成されます。

bundle exec rails generate <コントローラ名> <アクション名>に--skip-routesなどのオプションを付けると、指定したファイルが自動作成されなくなります。

ルーティング設定

ルーティングを設定して、トップページにアクセスできるようにします。

config/routes.rb

Rails.application.routes.draw do
  root 'top#index'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

トップページにアクセスする

Railsサーバーを起動して、

bundle exec rails server

http://localhost:3000/ にアクセスしてトップページ（app/views/top/index.html.erbの内容）が表示されるか確認してください。

Slim

Slimは、Railsで使われる軽量なHTMLテンプレートエンジンであり、簡潔で読みやすいコードを記述することができます。

Slimのインストール

Slimをインストールするために下記を追加してください。

Gemfile

gem 'slim-rails'

インストールを行なってください。

bundle install

slim形式のビューファイルの作成

touch app/views/top/index.html.slim

下記の内容に編集してください。

app/views/top/index.html.slim

h1 SlimのTop#index
p Find me in app/views/top/index.html.slim

サーバーを再起動し、ブラウザで再度アクセスしてみてください。

bundle exec rails server

先ほどのままだと思います。

これは下記のように同じディレクトリ内に.erb形式のファイルとslim形式のファイルがある場合は、.erb形式のファイルが優先して読み込まれるためです。

app
└── views
    └── top
        ├── index.html.erb   
        └── index.html.slim

.erb形式のファイルを削除してみてください。

rm app/views/top/index.html.erb

.slim形式のファイルの内容が表示されているのがわかると思います。

.erb形式のファイルを.slim形式のファイルに変換する方法

GitHubリポジトリから直接Gemをインストールするための指定をしています。

Gemfile

gem "html2slim", github: "slim-template/html2slim"

手動で作成しているindex.html.slimを削除して下記を実行してみてください。

bundle exec html2slim app/views/top/index.html.erb app/views/top/index.html.slim

app/views/top/index.html.slimが作成されていることがわかると思います。

今後コマンドを使用してビューファイルを作成する場合は、.erbではなく.slimファイルが作成されるようになります。

ちなみにgem "html2slim"のような書き方では、HTMLからSlimへの変換ツールであるerb2slimとhtml2slimは、hpricotという古いライブラリに依存しているので、Ruby 3.3.3では、これらのツールはhpricotの非互換性のため使用できませんでした。

hpricotのリポジトリを確認したところ、最終更新から11年が経過しており、「適切なメンテナーが不在のため、hpricotを終了する。」という記載がありました。
https://github.com/hpricot/hpricot

終わりに

何かありましたらお気軽にコメント等いただけると助かります。
ここまでお読みいただきありがとうございます🎉