Home » gem » erbを、hamlにしてコーディングを楽にする ruby on rails

erbを、hamlにしてコーディングを楽にする ruby on rails

HamlはHTML用のテンプレートエンジンです。

これは、冗長性を排除し、文書が表す基本的な構造を反映し、強力でわかりやすくコンパクトな構文を提供することで、HTML文書を書くのがより簡単で楽しくなるように設計されてるとのことです。

Hamlを使用してみる

gem を記載する

gem 'haml'
gem 'erb2haml' # erbからhamlに変換するためのgem

bundleでインストールします

$ bundle install

app/views 内のファイルをerbからhamlに変換するコマンドを実行してから解説していきたいと思います。

erbからhamlに変換するコマンドを実行します。

$ rails haml:replace_erbs
Looking for ERB files to convert to Haml...
Converting: app/views/layouts/application.html.erb... Done!
Removing: app/views/layouts/application.html.erb... Removed!
Converting: app/views/layouts/mailer.html.erb... Done!
Removing: app/views/layouts/mailer.html.erb... Removed!
Converting: app/views/layouts/mailer.text.erb... Done!
Removing: app/views/layouts/mailer.text.erb... Removed!

コマンド実行後にファイルを見るとerbがhamlに変わっていると思います。

app/views/layouts/application.html.haml を見て解説していきたいと思います。

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title HamlTest
    = csrf_meta_tags
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    = yield

タグとrubyコードの使用

%[タグ] で閉じタグなしでタグを使用することができます

=[ルビィのコード]

例とすると

= item.title

というふうに右に評価させ、戻り値をタグの内容として出力するように指示します

属性を追加してみる

上記のコードの

%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/

上のコードは→のようになってます :[属性] => “[属性に付随するコード]”
content属性にtext/html; charset=UTF-8 を指定しています。
このように 左には属性を指定して右に値を指定するという形になっています。

実際に複雑なコードをhamlにしていく

こういったerbの複雑なコードがあるとします。
これをhamlに変換していきます。

</pre>
<pre><div要素のid = 'コンテンツ'> 
  の<divクラス= '左の列'> 
    <H2>私たちのサイトへようこそ!</ H2> 
    <P> <%= print_information%> </ P> 
  </ div> 
  <divのクラス= "right column"> 
    <%=レンダリング:partial => "サイドバー"%> 
  </ div> 
</ div></pre>
<pre>

そしてhamlではこうなります。

#content 
  .left.column 
    %h2私たちのサイトへようこそ!
    %p = print_information 
  .right.column 
    = render:partial =&gt; "sidebar"

こう見ると変わったところがあります。
classの前に 「.」 がついています。
これはdivを省略してクラスを指定しています
こういった使い方もできます。

erbをhamlに変換できるサイト

今回はコンバーターサイトの erb2slimというサイトを使ってerbをhamlにしていきます。
右側になにに変換するかの選択画面が設置されています。

デフォルトはslimになっているので、

Hamlを選択しましょう。

左の記入欄に変換前のコードを記入する。

そして変換後が右に出ます。

変換する場合は、CONVERT を押します。

すると、

変換後は Converted Code に表示されます。

他にもslimなどにも変換ができるので今後も便利に活用できるサイトだと思います。

 

参考文献

, , ,

コメントを残す

%d人のブロガーが「いいね」をつけました。