営業職の俺がエンジニアになる〜群馬Web化計画編〜

2017年に未経験からエンジニアに転職をした私が群馬でイノベーションを起こすまでの備忘録です。

hamlとslimの両方を使ってみた感想

最近は少しでも良いから毎日技術に触れてみる、ということを習慣づけるようにしています。GitHubの草をどこまで生やすことができるかチャレンジですね。それに合わせてこのブログで取り扱う内容についても少しずつ技術的なお話も織り交ぜて行くべきなのではないかと考えており、今回はその第一弾として、Railsのテンプレートエンジンであるhamlとslimを使ってみた感想を書いていこうと思います。

haml、slimそしてerb

「冒頭から技術的な話を」と申し上げましたが、今回はそんなに技術よりの話をするわけではなく、純粋に書いてみての感想なので、hamlやslim、erbの技術的な比較の情報を求めてやってこられた方は申し訳ございません。とはいえせっかくお越しいただけたので、それぞれのテンプレートエンジンのパフォーマンス比較のグラフを見つけたので参考までに。

f:id:toyokappa:20170910222126p:plain 引用元:https://github.com/k0kubun/hamlit

引用元がhamlitなのでどこまで信憑性が高いかはさておき、私個人としてはこのhamlitとslim、そしてRails標準搭載のerbを一旦触ってみたので、それぞれの良し悪しについて感じたことをそのまま書いていこうと思います。これからテンプレートエンジンを選ばれる方の何か足がかりになればと思います。

haml(hamlit)

開発を進めていたKnowledge Stockerを最近haml(厳密にはhamlit)に変えました。選定基準としては先程のグラフに書かれた数値を参考にしました。もう少し色々と情報を比較すればよかったのかもしれませんが、ぱっと見パフォーマンスが良さそうで、かつ書き方もシンプルだったので即決で採用しました。

実際に書いてみて

HTML記法HAML記法に変換するGemがあったのですが、一旦は記法を覚えるために手書きで書き換えることに。実際のコードはこんな感じです。(実際のコードを一部抜粋)

!!! 5
%html
  %head
    %title= t("app.title")
    = csrf_meta_tags
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'

  %body
    %header.navbar.navbar-static-top.navbar-inverse
      %nav.container
        .navbar-header
          = link_to t("app.title"), root_path, class: "navbar-brand"
        - if logged_in?
          %ul.nav.navbar-nav.navbar-right
            %li= link_to t("title.profile"), current_user
            %li= link_to t("title.knowledge_index"), knowledges_path
            %li= link_to t("title.user_index"), users_path
            %li= link_to t("link.logout"), logout_path, method: :delete
        - else
          %ul.nav.navbar-nav.navbar-right
            %li= link_to t("title.user_registration"), signup_path
            %li= link_to t("link.login"), login_path

    .container#wrapper
      - flash.each do |msg_type, msg|
        = content_tag :div, msg, class: "alert alert-#{msg_type}"
      = yield

書いてみての感想としては、意外とスムーズに覚えられたなぁという感じでした。HTMLに慣れていたのでタグを閉じないという感覚は多少違和感を感じましたが、ある程度書いていくとその手軽さに魅せられていきました。今後HTMLを書きたくなくなるぐらい手軽でした。(それは言いすぎかw)

slim

続いてはslimです。これは今面接を受けている企業がslimを採用していることから興味を持ち実際に書いてみようと思い立ちました。自分で作ってみたいアプリケーションがもう一つあったのでそちらをslimで書いています。

使ってみての感想

slimの記法はhamlを更にシンプルにした感じです。hamlの場合タグの前に%をつけるのですが、slimの場合はそれがいりません。その為、更にシンプルにコードを書くことが可能です。実際のコードはこんな感じです。(はてなにslimのシンタックスハイライトがないため見づらくてすいません)

doctype html
html
  head
    title Journey Planner
    = csrf_meta_tags
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  body
    header.navbar.navbar-static-top.navbar-inverse
      nav.container
        .navbar-header
          = link_to "Journey Planner", root_path, class: "navbar-brand"
        ul.nav.navbar-nav.navbar-right
          - if user_signed_in?
            li = link_to "プラン登録", new_plan_path
            li = link_to "プラン一覧", plans_path
            li = link_to "ログアウト", destroy_user_session_path, method: :delete
          - else
            li = link_to "ユーザー登録", new_user_registration_path
            li = link_to "ログイン", new_user_session_path
    .container#wrapper
      - flash.each do |msg_type, msg|
        = content_tag :div, msg, class: "alert alert-#{msg_type}"
      = yield

hamlを書いてからだったので導入は非常に早かったです。(とはいえ、まだ今日書いてみたばかりなので、正しい書き方で書けている自信はないですが)これは完全なる個人的な好みの問題なのですが、slimはシンプルすぎる気もするなぁと思いました。恐らく慣れの問題かとは思いますが、%が付かない分、タグと文字の区別が付きづらさがあるなぁと感じました。

erb

erbについてはHTMLベースでかつRailsで書いてる人であれば少なからず書く機会はあるかとは思うので、改めてコードは載せませんが、やはりhamlやslimを書いてみてからerbに戻ると言うのは中々気合がいる感覚です。(おかしいな、先月まではガッツリerbで書いていたのに、、)

総括

ということでhaml、slim、erbのRails3大テンプレートエンジンに触れて見ての感想でした。それぞれの良し悪しはあるかなぁと思います。また、選定基準も人それぞれですが、個人的な書きやすさや馴染みやすさの観点で見たときにはhaml>slim>>>>erbという様な感じでした。

そして、もっとパフォーマンスや技術視点で選定が出来たら説得力あるんだろうなぁ、と思ったのでそういった点は日々の勉強の中で養おうと思いました。

以上、hamlとslimを使ってみての感想でした。