LoginSignup
13
10

More than 5 years have passed since last update.

HAML にて attributes をスッキリ書く

Last updated at Posted at 2014-09-08

そういえば Ruby 入門した時に混乱したなぁと思い出した。

経緯

むかしむかし Ruby におけるハッシュの書き方はやや冗長なものでした。

=>を使う
animals = { :carp => 10, :tiger => 4, :whale => 3, :buffalo => 0 }

Ruby 1.9 からはハッシュキーが symbol の場合には以下のように省略して書けるようになりました。

Ruby1.9以降、省略形式
animals = { carp: 10, tiger: 4, whale: 3, buffalo: 0 }

スッキリして良いですね。

HAML

ところで HAML にて DOM の attributes を定義する場合にはハッシュが多用されます。

文字列でattributesを定義
%div.modal{ "aria-hidden" => "true", "aria-labelledby" => "unlock-modal-label", "role" => "dialog", "data-foo" => "abc", "data-bar" => "xyz", "my-name" => "kakipo", "my-age" => "30", "my-addr" => "Shibuya" }

ちょっと冗長ですね。また、エディタによってはダブルクオーテーションで囲われた部分が通常の文字列と同じハイライトになって見づらい場合がありますね。

これは以下のように symbol を使って書き直すことができます。

symbolをつかう
%div.modal{ aria: {hidden: :true, labelledby: "unlock-modal-label"}, role: :dialog, data: {foo: "abc", bar: "xyz"}, my: {name: "kakipo", age: 30, addr: "Shibuya"} }

ポイントは 2 つ。

  • 文字列は symbol で置き換え可
    • 決まった値を取るものは symbol で、そうでないものは string で書くと意図が明確になって良いです
    • ActiveSupport::HashWithIndifferentAccess のおかげで、string と symbol どちらでもアクセスできるハッシュが利用できる
  • prefix 単位でまとめることができる
    • 上記の例だと aria, data, my が prefix
    • data-xxx はよく使うので便利ですね

こうするとスッキリ見えますね。

参考

13
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
10