自分がRubyでwebアプリを作るときはテンプレートエンジンにslimを利用することが多いです。

railsでslimを使うときはslim-railsというgemを使うとすぐに導入することができます。

slimを使うと、閉じタグ不要で簡潔に書けるためより早くビューファイルを作成することができます。

また、slim = スリムということで、ソースコードの見た目もスリムになり見やすくなるのも気に入っています。

ただ、ときどき属性要素とかをたくさん記述しないといけないタグなんかがあったときに、そのまま書くと横に長くなりすぎて見にくくなる場合があります。

以下は、今自分が個人開発で作っているサービスのコードの一部ですが、とても長い。横に長くて、見ずらいのと、変更をかけた時にも差分を認識するのが面倒になってしまう。

.todo_app_main__item_wrapper[draggable='true' data-item-id="#{todo_item.id}" data-action='dragstart->todo--dnd#dragstart dragend->todo--dnd#dragend dragenter->todo--dnd#dragenter dragleave->todo--dnd#dragleave dragover->todo--dnd#dragover drop->todo--dnd#drop']

途中で改行をしてコードを整形したいところですが、slimはインデントでhtmlの階層構造を表現するため、普通に改行を入れてしまうとエラーになってしまいます。

そんなときは、以下のように[ 属性などを列挙 ]とすることで[ ]の間は改行を使うことが可能です。

以下のようにdraggable〜のところから要素を[ ]で囲んでいます。これはエラーになりません。

最初よりは見やすくなりましたが、data-action=に設定している文字列がまだ長いですね。これも解決方法があります。

.todo_app_main__item_wrapper[draggable='true'
  data-item-id="#{todo_item.id}"
  data-action='dragstart->todo--dnd#dragstart dragend->todo--dnd#dragend dragenter->todo--dnd#dragenter dragleave->todo--dnd#dragleave dragover->todo--dnd#dragover drop->todo--dnd#drop']

以下のように設定値の途中で改行を入れたいときは、\バックスラッシュを末尾に付与することで改行が可能になります。

かなり見やすくなりました。さらに、これなら設定を一つだけ変更したときもどこが変わったのかがよくわかっていいですね。

.todo_app_main__item_wrapper[draggable='true'
  data-item-id="#{todo_item.id}"
  data-action='dragstart->todo--dnd#dragstart\
               dragend->todo--dnd#dragend\
               dragenter->todo--dnd#dragenter\
               dragleave->todo--dnd#dragleave\
               dragover->todo--dnd#dragover\
               drop->todo--dnd#drop']

さて、ほかにもあるあるで考えられるのはタグにつけているクラスがたくさんある、なんてときです。

そんなときは、属性としてclassを持つことで改行を入れて書くことができます。

こんな感じですね。

div[class='todo_app_main__item_wrapper\
           sample_class1\
           sample_class2\
           sample_class3]

途中で改行を加えやすくなったことで、またひとつslimの死角がなくなりました。

一度slimを使ってしまうとerbには戻れないくらい快適です。

まだ使ったことがない方は是非一度試してみてください。

この記事の環境情報

  • slim 4.1.0
  • slim-rails 3.5.1
  • メリークリスマス