haml への変換 - 不定期刊 Rails App を作る(5)

RailsApp Rails Haml 2018年 11月 9日

Rails でデフォルトは erb である. erb では,html の中に ruby のプログラムを埋め込むことができる. しかしながら,素の html は記述もメンテナンスも大変である. そのため,通常は haml という html のプリプロセッサで記述することが多い. ここでは,haml の設定方法と既存の erb ファイルの返還について記載する.

Gemfile の変更

  1. Gemfile に haml-rails を追加する
  2. gem 'haml-rails'
  3. bundle でインストール(2行目以降は結果: 変更されたもののみ)
  4. $ bundle
    Fetching erubis 2.7.0
    Fetching temple 0.8.0
    Fetching tilt 2.0.8
    Installing tilt 2.0.8
    Installing temple 0.8.0
    Installing erubis 2.7.0
    Fetching sexp_processor 4.11.0
    Fetching haml 5.0.4
    Installing sexp_processor 4.11.0
    Fetching ruby_parser 3.11.0
    Installing haml 5.0.4
    Installing ruby_parser 3.11.0
    Fetching html2haml 2.2.0
    Installing html2haml 2.2.0
    Fetching haml-rails 1.0.0
    Installing haml-rails 1.0.0
    Bundle complete! 12 Gemfile dependencies, 67 gems now installed.
    Bundled gems are installed into `./vendor/bundle`

erb の変更

  1. 今後作成するファイルは haml で記述するが,すでに application.html.erb も haml に変更したい.現在の application.html.erb は以下のようになっている
  2. <!DOCTYPE html>
    <html>
      <head>
        <title>Attendance</title>
        <%= csrf_meta_tags %>
        <%= csp_meta_tag %>
    
        <%= stylesheet_pack_tag 'application' %>
      </head>
    
      <body>
        <%= javascript_pack_tag 'application' %>
        <%= yield %>
      </body>
    </html>
  3. haml-rails に入っている変換機能で erb を haml に変換する.HAML_RAILS_DELETE_ERB=true を付けることで,元の erb ファイルを削除してくれる. (参考) [Rails] haml-railsがあればerb2hamlは不要です!
  4. $ env HAML_RAILS_DELETE_ERB=true bin/rails haml:erb2haml
  5. 作成された haml は以下のようになる.
  6. !!!
    %html
      %head
        %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
        %title Attendance
        = csrf_meta_tags
        = csp_meta_tag
        = stylesheet_pack_tag 'application'
      %body
        = javascript_pack_tag 'application'
        = yield

少し短いが今日はここまで