[Rails] Slimでattributeを動的に指定する

どうも僕です。

インヴェンティットではRailsのシステムを開発しています。その一部のテンプレートエンジンとして、Slimを採用しています。

https://slim-template.github.io/

「<」や「>」などの記号が不要だったり、rubyコードと混在しても可読性が落ちないため、保守性の高いコードが記述できます。

ただ、初見殺しのところがあるため、フォーマットに慣れるまではやや苦戦することもあるかもしれません。READMEが充実していますので、一通り目を通しておくとすぐに手に馴染むかと思います。

https://github.com/slim-template/slim

また、slimrb というコマンドラインツールが付属していますので、フォーマットを試してみたい時などにさっと確認できて便利です。Enter + Ctrl-D で結果が出力されます。

$ slimrb
div hoge

<div>hoge</div>

コードを記載していて、どうやって書くの？と手間取ったものから、タグの属性についての記載方法をいくつか紹介したいと思います。

タグの属性は次のように設定できます。

$ slimrb
div attr='hoge'
div*{attr: 'hoge'}

<div attr="hoge"></div><div attr="hoge"></div>

属性のValueを動的に設定したい場合は、次のようにできます。

$ slimrb
- value = 'hoge'
div attr=value
div*{attr: value}

<div attr="hoge"></div><div attr="hoge"></div>

Valueのない属性の場合、次のように記載します。
出力上は、Valueが空文字になっていますが、HTMLのboolean attributeの仕様上、<div attr>と同義です。（Developer Toolで見るとそのように見えると思います。）

$ slimrb
div(attr)
div attr=true
div*{attr: ''}

<div attr=""></div><div attr=""></div><div attr=""></div>

これに対し、属性が付与されない場合は次のようになります。

$ slimrb
div()
div attr=false
div*{}

<div></div><div></div><div></div>

動的に付与したい場合は次のようになります。

$ slimrb
- cond = true
div attr=cond
div*{attr: cond}
div*(cond ? {attr: ''} : {})

- cond = false
div attr=cond
div*{attr: cond}
div*(cond ? {attr: ''} : {})

<div attr=""></div><div attr=""></div><div attr=""></div><div></div><div></div><div></div>

条件によって動的に属性を変える場合は、次のように書けます。

$ slimrb
- cond = true
div*(cond ? {attr1: ''} : {attr2: ''})
- cond = false
div*(cond ? {attr1: ''} : {attr2: ''})

<div attr1=""></div><div attr2=""></div>

このようにさまざまな書き方を工夫できますが、Viewのロジックはシンプルで可読性が高いのが一番です。責務を超えてViewに条件分岐が多用されることのない設計を行い、それでもViewに必要なロジックはruby:のコードブロックを上手く利用するなどして、複雑にならないような記述を心がけたいものです。

おまけ

カスタムデータ属性を複数定義する場合は以下のようにも記載できます。

$ slimrb
div(data-attr1='hoge' data-attr2='fuga')
div*{data: {attr1: 'hoge', attr2: 'fuga'}}

<div data-attr1="hoge" data-attr2="fuga"></div><div data-attr1="hoge" data-attr2="fuga"></div>