RailsでHamlを使う方法をわかりやすく解説

RailsでHamlを使う方法をわかりやすく解説

Ruby on railsの学習をするなかで「コードを書くのに時間がかかる」と感じていませんか？そこで今回は『hamlit』というテンプレートエンジンを使って、コーディングを効率的に進める方法について解説していきます。

目次
  1. hamlitとは
  2. hamlitを使うメリット
  3. メリット①　効率的なコーディングが可能
  4. メリット②　処理速度が早い
  5. hamlitを使ってみよう
  6. 頻繁に使用するhamlit記法
  7. hamlit記法① <タグ名></タグ名>
  8. hamlit記法② クラス名
  9. hamlit記法③ id名
  10. haml記法④ 繰り返し表現
  11. hamlitのインストール方法
  12. gemファイルにコードを追加
  13. hamlitをインストール
  14. ERB形式のコードをhamlitに変換する
  15. まとめ

hamlitとは

hamlitは「HTML Abstraction Markup Language」の略で、Rubyで使用できるテンプレートエンジンです。テンプレートエンジンとはHTMLのコードを書き換え画面に出力するものを指し、hamlitの他にもERBやSlimなどがあります。

その他のテンプレートエンジンよりもメリットが多数あるので、実際の開発現場で採用されています。

hamlitを使うメリット

この項目ではhamlitを使うメリットについて解説していきます。

メリット①　効率的なコーディングが可能

1つ目のメリットは効率的にコーディングをすることができる点です。 下のコードは通常のHTML形式で書かれたコードとhamlit形式で書かれたものです。

コードを見て気づくかと思いますが、

やclassなどが省略されているのがわかると思います。後程hamlの書き方について解説していくので、今の段階ではhamliitの方が楽に書けるという点を覚えておいてください。

HTMLで書いた場合

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class ="example_div">
        <h1 class="example_h1">h1タグ</h1>
        <p class ="example_p">pタグ</p>
    </div>
</body>
</html>

hamlで書いた場合

!!!
%html{:lang => "ja"}
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %meta{:charset => "UTF-8"}/
    %meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}/
    %title Document
  %body
    .example_div
      %h1.example_h1 h1タグ
      %p.example_p pタグ

このようにhamlitを使うと書くコードの数を減らすことができるので、効率的に開発を進めることができるのがメリットです。特にWebアプリケーションの開発速度が重視されるため、hamlitが採用されることが多いです。

メリット②　処理速度が早い

2つ目のメリットは処理速度が速い点です。 slimなどhamlitと同じような省略記法はいくつか存在しますが、それらに比べてプログラムの処理速度が高いのが特徴です。

下図は1秒間のレンダリング速度を比べたグラフになります。レンダリングとはhtmlなどのコードを人間が理解できる状態に変換することを指します。

image

出典：Hamlit Github

処理速度が速ければその分Webページの読み込みやページ遷移が早くなり、ユーザーがストレスなくWebページを見ることができます。Webアプリケーションを開発する上で、ユーザーにWebページを継続して見てもらうためにhamlitで処理速度を上げることが求められます。

hamlitを使ってみよう

この項目では実際にhamlを使っていきたいと思います。実際にRuby on railsなどにhamlをインストールして使うのですが、まずはhamlがどのようなものか理解するためにConvert HTML to HAMLというサイトを使います。

image

サイトを開き下記コードを左側のHTML部分に貼り付けます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class ="example_div">
        <h1 class="example_h1">h1タグ</h1>
        <p class ="example_p">pタグ</p>
    </div>
</body>
</html>

貼り付けられたらサイトの右側部分を確認してみましょう。先程のコードにあったdivタグやclassなどが省略されていることが分かります。

!!!
%html{:lang => "ja"}
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %meta{:charset => "UTF-8"}/
    %meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}/
    %title Document
  %body
    .example_div
      %h1.example_h1 h1タグ
      %p.example_p pタグ

このようにhaml記法を使うと、コーディングの量を減らすことができ効率的に開発を進めることができます。

初めは書き方に慣れないかもしれないですが、今回紹介したConvert HTML to HAMLを使いながら覚えていくのが良いかと思います。

またHAML to ERBを使えば、haml形式のものをhtmlに変換することが可能です。

image

頻繁に使用するhamlit記法

この項目では頻繁に使うhamlit記法に絞って解説していきます。

hamlit記法① <タグ名></タグ名>

先頭に%を付けるだけで、開始タグ〜終了タグを表現することができます。

[html]

<h1>Hello World</h1>

[haml]

%h1 Hello World

hamlit記法② クラス名

クラス名は「.（ドット）」で表現しタグ名の後ろに書きます。

[html]

<h1 class="hello">Hello World!!</h1>

[haml]

%h1.hello Hello World!!

hamlit記法③ id名

id名は「#」で表現しタグ名の後ろに書きます。

[html]

<h1 id="hello">Hello World!!</h1>

[haml]

%h1#hello Hello World!!

ちなみにクラス名とタグ両方持つ場合でも下記のようにhamlへ変換可能です。

[html]

<h1 class ="CLASS" id="ID">Hello World!!</h1>

[haml]

%h1#ID.CLASS Hello World!!

haml記法④ 繰り返し表現

eachなどの繰り返し表現もhamlに変換可能です。ERB形式の<% …. %>はhamlでは -....と書きます。全ての記事から1つずつ取り出して表示させるコードを変換してみましょう。

[html]

<% @articles.each do |article| %>
  <p><%= article.title %>
  <p><%= article.content %>
<% end %>

[haml]

- @articles.each do |article|
  %p
    = article.title
  %p
    = article.content

ここまでで紹介した記法でソースコードのほとんどをhamlに変換できるようになります。最初のうちは慣れないので読み辛く感じるかもしれませんが、慣れて使うこなせると非常に早くコーディングできるようになります。

また実際の開発現場でもhamlが使われる場面が多いため、エンジニアとして就職や転職を考えている方は今のうちに慣れておくのも良いかもしれません。

hamlitのインストール方法

この項目ではhamlのインストール方法について解説していきます。なおRuby on Railsの環境構築ができている前提で進めていきます。

基本的にgemのインストールやセットアップの方法はGithub上に公開されています。 Githubは世界中のエンジニアがWebアプリケーションのソースコードを共有できるサービスで、実際の開発現場でも頻繁に使われています。

image

参考：インストールの参考画像

上の画像のようにドキュメントは英語で書かれているのが一般的なので、英語に不安を感じている方はDeeplなどの翻訳ツールを使いながら読むように心がけると良いかもしれません。

image

gemファイルにコードを追加

hamlをRailsで使うためにはまずインストールする必要があります。Railsの「gem.file」を開き下記コードを追加します。

gem 'hamlit'

また今まで書いたERB形式のコードをHAMLに変換する必要があるため、下記コードもgem.fileに追加します。追加するのは「 gem 'erb2haml'」のみです。

group :development do
  gem 'erb2haml'
end

hamlitをインストール

次にhamlitをインストールしていきます。ターミナル（コマンドプロンプト）でインストール可能です。（$以下を入力して実行してください）

$bundle install

ERB形式のコードをhamlitに変換する

既にERB形式でコードを書いていたものを、手動でhamlit形式に変換するのは大変です。しかしターミナル（コマンドプロンプト）で下記コードを入力するだけで自動で変換することができます。

$bundle exec rake haml:replace_erbs

＼Rubyでのサービス開発スキルが身に付く／

無料カウンセリングはこちら

まとめ

ここまでhamlitの特徴や使い方について解説してきました。使い方に慣れるまで少し時間はかかるかと思いますが、慣れればコーディングの時間を圧倒的に減らすことができます。

最後に本記事のまとめをしておきますので、ぜひ参考にしてみてください。

[1]hamlitを使えばhtmlを効率的に書くことが可能
[2]hamlitはプログラム処理速度の向上が可能

関連記事

ヤマモト
この記事を書いた人
ヤマモト

人気記事

  1. 【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説
    【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説
    プログラミング学習
    プログラミングスクール・サービス
  2. 塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
    塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
    受講生インタビュー
  3. 様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
    様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
    講師インタビュー
  4. 【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
    【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
    Python
    プログラミング書籍・参考書
  5. 【PHP入門徹底ガイド】初心者のための学習ロードマップ
    【PHP入門徹底ガイド】初心者のための学習ロードマップ
    PHP
    プログラミング入門
  6. コロナに負けるな！プログラミング&YouTubeで頑張る人が作るべきアプリ
    コロナに負けるな！プログラミング&YouTubeで頑張る人が作るべきアプリ
    Python
    HTML
    CSS
    お役立ち情報
    アプリ学習入門
  7. 【Twitter×Python】自分専用のエゴサーチボットを作る方法
    【Twitter×Python】自分専用のエゴサーチボットを作る方法
    Python
  8. Webデザインから見たSEO
    Webデザインから見たSEO
    Webデザイン入門
    Webデザインお役立ち情報
  9. 未経験からのWebデザイナー転職を有利にする資格４選
    未経験からのWebデザイナー転職を有利にする資格４選
    Webデザインお役立ち情報
    転職
まずは7日間お試し！人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp
プログラミング講座を無料で試す
LINE友達追加