HTML
Rails
slim
フロントエンド
コーダー

railsにslimを導入し、erbファイルをslimファイルに一括変更する方法

More than 3 years have passed since last update.


前提

viewをよりスッキリ描く方法として、slimを導入するサイトが増えてきています。これから導入したくても、すでにerbファイルが多くて、導入できないよ。。という方に向けて、簡単に導入する方法をまとめてみました。


slimとは


  • 拡張子が.slim

  • インデントが非常に重要

  • インデントでHTMLファイル内の構造を構築し、必要最小限のコードで書くことができる

  • 既存のerbファイルと比べてスピードが速い


slimとerbのコードの違い


index.html.erb

<h1>テスト一覧</h1>

<% @tests.each do |test| %>
<%= test.name %>
<%= test.content %>
<%= link_to 'Edit', edit_test_path(test.id) %>
<%= link_to 'Destroy', test_path(test.id), method: :delete, data: { confirm: 'Are you sure??' } %>
<% end %>


index.html.slim

h1 テスト一覧

- @tests.each do |test|
= test.name
= test.content
= link_to 'Edit', edit_test_path(test.id)
= link_to 'Destroy', test_path(test.id), method: :delete, data: { confirm: 'Are you sure??' }


slimコードの特徴



  • < >や<% %>などのカッコはすべてとりはらわれます。


  • <%= %>は、slimだと=で代用できます。


  • if文やeach文などの先頭には、-を使用します。また、endは必要ありません。


railsにslimを導入する方法

Gemfile内に以下のコードを追加し、bundle installをしてください。

gem 'slim-rails'

これで、railsプログラム内で、slimファイルを作成し、使用することが可能になります。


既存のerbファイルをまとめてslimファイルに変える方法

以下のgemをGemfileに追加し、bundle installしてください。

gem 'html2slim'

これで、erbファイルをslimファイルにする準備が整いました。

このあと、以下のコードをコマンドラインで打つことで、erbファイルをslimファイルに変え、ファイルの中身もslimのコードに書き換えてくれます。

for i in app/views/**/*.erb; do erb2slim $i ${i%erb}slim && rm $i; done


注意点



  • app/views/**/*.erbこの部分を変えたいファイルの場所に変え、使用してください。

  • ディレクトリ以下を一括変更をした場合、そのディレクトリ以下のすべてのファイルが変更加えられるので、一応githubで管理しつつ行いましょう。