Post on 25-Dec-2014
description
Hamlプラグインでビューをすっきり
記述する(株)永和システムマネジメント
サービスプロバイディング事業部
浦嶌 啓太
アジェンダ
•HTMLがいかに駄目かという話
•そこでHamlですよという話
•Hamlの始め方
仕事でRailsを始めて早一年
ビューを書くのが嫌になりました
＿＿＿_ ／ ＼ ／ _ノ ヽ､_ ＼ ／ oﾟ⌒ ⌒ﾟo ＼ 今日もまた、刺身の上に ¦ （__人__） ¦ タンポポのせる ＼ ｀ ⌒´ ／ 仕事が始まるお…
HTMLは冗長なので
•書くのがめんどう
•うっかりミス多発
ありがちなうっかりミス
1. DOCTYPE宣言をコピペし忘れる。
<?xml version="1.0"?><html>
<p><strong><%=h @notice %></strong>
2. タグを閉じ忘れる。
<div class="content"> <%= yield %><div>
3. タグを閉じ損ねる。
<p class="info"><%=h @info %></div>
4. 終了タグを変え忘れる。
<div class=<%=h @user.role %>>
5. 属性値をクオートし忘れる。
<%- if @content_for_nav -%><div class="navigation"> <%= yield :nav %></div><% end %>
6. 余分な空行を消し忘れる。
これはひどい間違い探しゲーム
ビューを書くのが大変!│├ 1. 我慢する│ [まちがい]│ 人間無理は禁物です。│ それよりも別の手段を探してみませんか?│ ちょっとしたプラグインでなんとかなるかも?│ ↑│ ココがポイント!└ 2. Hamlを使う [せいかい]
Hamlってなに?
• HTMLを生成するためのテンプレート言語
• Railsのビューを記述する言語として使える
よくあるレイアウトをHamlにしてみる
1 <?xml version="1.0" encoding="utf-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html> 5 <head> 6 <title><%=h @title %></title> 7 </head> 8 <body> 9 <%- if @content_for_nav -%>10 <div class="navigation">11 <%= yield :nav %>12 </div>13 <%- end -%>14 <div class="content">15 <%= yield %>16 </div>17 </body>18 </html>
1 !!! XML 2 !!! 1.0 3 %html 4 %head 5 %title&= @title 6 %body 7 - if @content_for_nav 8 .navigation 9 = yield :nav10 .content11 = yield
3分でわかるHaml文法講座
%•HTML要素を生成する
•インデントでネストを表現する
%h1 Hello <h1>Hello</h1>
%ul %li Item
<ul> <li>Item</li></ul>
. と #•class属性とid属性を生成する
•divの場合は要素名を省略可能
%p.desc … <p class=”desc”>…</p>
.users #user_1 …
<div class=”users”> <div id=”user_1”>…</div></div>
- と =•ERBの <% … %> と <%= … %> に相当
•end の位置はインデントで判断する
%h1= @title <h1><%= @title %></h1>
- @usrs.each do |u| %li= u.id
<% @usrs.each do |u| %> <li><%= u.id %></li><% end %>
!!!•XML宣言やDOCTYPE宣言を生成する
!!! XML <?xml version=’1.0’ encoding=’utf-8’ ?>
!!! 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "...">
1 !!! XML 2 !!! 1.0 3 %html 4 %head 5 %title&= @title 6 %body 7 - if @content_for_nav 8 .navigation 9 = yield :nav10 .content11 = yield
Hamlの考え方
•HTMLの生成に特化することで
•less codeとDRYを実現する
•ありがちなミスの発生を防ぎ、きれいなコードを生成する
•余計なことを考えず、本来やりたいことに注力できる
•これなら書いてやろうかという気分になる
つまり…
Hamlの始め方
インストールと使い方
$ gem install haml$ haml --rails path/to/rails_root
•ERBと同じ場所にファイルを配置するapp/views/foo/index.html.haml
現実と折り合うには
•いきなり全部Hamlに置き換えるのは難しい…
トロイの木馬作戦
•HamlはERBと共存できる
•新しく作るビューをHamlにする
•partialをHamlにする
•徐々にHaml率を高めていく
まとめ
✓Hamlを使うとやりたいことに注力できる
✓Hamlを使うとビューを書く気分になる
✓Hamlは簡単に使い始められる
.happy.coding .with#haml
ご静聴ありがとうございました