Ruby on railsの学習をするなかで「コードを書くのに時間がかかる」と感じていませんか？そこで今回は『hamlit』というテンプレートエンジンを使って、コーディングを効率的に進める方法について解説していきます。
hamlitは「HTML Abstraction Markup Language」の略で、Rubyで使用できるテンプレートエンジンです。テンプレートエンジンとはHTMLのコードを書き換え画面に出力するものを指し、hamlitの他にもERBやSlimなどがあります。
その他のテンプレートエンジンよりもメリットが多数あるので、実際の開発現場で採用されています。
この項目ではhamlitを使うメリットについて解説していきます。
1つ目のメリットは効率的にコーディングをすることができる点です。 下のコードは通常のHTML形式で書かれたコードとhamlit形式で書かれたものです。
コードを見て気づくかと思いますが、
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などのコードを人間が理解できる状態に変換することを指します。
処理速度が速ければその分Webページの読み込みやページ遷移が早くなり、ユーザーがストレスなくWebページを見ることができます。Webアプリケーションを開発する上で、ユーザーにWebページを継続して見てもらうためにhamlitで処理速度を上げることが求められます。
この項目では実際にhamlを使っていきたいと思います。実際にRuby on railsなどにhamlをインストールして使うのですが、まずはhamlがどのようなものか理解するためにConvert HTML to HAMLというサイトを使います。
サイトを開き下記コードを左側の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に変換することが可能です。
この項目では頻繁に使うhamlit記法に絞って解説していきます。
先頭に%を付けるだけで、開始タグ〜終了タグを表現することができます。
[html]
<h1>Hello World</h1>
[haml]
%h1 Hello World
クラス名は「.（ドット）」で表現しタグ名の後ろに書きます。
[html]
<h1 class="hello">Hello World!!</h1>
[haml]
%h1.hello Hello World!!
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!!
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が使われる場面が多いため、エンジニアとして就職や転職を考えている方は今のうちに慣れておくのも良いかもしれません。
この項目ではhamlのインストール方法について解説していきます。なおRuby on Railsの環境構築ができている前提で進めていきます。
基本的にgemのインストールやセットアップの方法はGithub上に公開されています。 Githubは世界中のエンジニアがWebアプリケーションのソースコードを共有できるサービスで、実際の開発現場でも頻繁に使われています。
参考：インストールの参考画像
上の画像のようにドキュメントは英語で書かれているのが一般的なので、英語に不安を感じている方はDeeplなどの翻訳ツールを使いながら読むように心がけると良いかもしれません。
hamlをRailsで使うためにはまずインストールする必要があります。Railsの「gem.file」を開き下記コードを追加します。
gem 'hamlit'
また今まで書いたERB形式のコードをHAMLに変換する必要があるため、下記コードもgem.fileに追加します。追加するのは「 gem 'erb2haml'」のみです。
group :development do
gem 'erb2haml'
end
次にhamlitをインストールしていきます。ターミナル（コマンドプロンプト）でインストール可能です。（$以下を入力して実行してください）
$bundle install
既にERB形式でコードを書いていたものを、手動でhamlit形式に変換するのは大変です。しかしターミナル（コマンドプロンプト）で下記コードを入力するだけで自動で変換することができます。
$bundle exec rake haml:replace_erbs
＼Rubyでのサービス開発スキルが身に付く／
ここまでhamlitの特徴や使い方について解説してきました。使い方に慣れるまで少し時間はかかるかと思いますが、慣れればコーディングの時間を圧倒的に減らすことができます。
最後に本記事のまとめをしておきますので、ぜひ参考にしてみてください。
[1]hamlitを使えばhtmlを効率的に書くことが可能
[2]hamlitはプログラム処理速度の向上が可能
