Hamlの基本的な書き方について紹介しています。 以下のURLから見た方が、画質的にみやすいかと思います。 https://docs.google.com/presentation/d/e/2PACX-1vS9DPD6IoADVu2RS5VNAtdkjFLo3uQu_olJNYPFQZkaCWHkjL1lvGq7zStczYdIl0am2yjf553oUXMM/pub?start=false&loop=false&delayms=3000

1. 1

2. ● このスライドではHamlの基本的な書き方を紹介しています
● Progate（ https://prog-8.com ）っぽいデザインで作りました
● Progateの中の人が作りましたが、Progate公式コンテンツではあ
りません
● 是非、実際にHamlを書きながら学習してみてください！
はじめに
2

3. HamlでHTMLを記述する
● Hamlとは
● HamlでHTMLのタグを生成する
● Hamlでのインデントの扱い
● クラス名を付ける
● id名を付ける
● divタグの省略
● その他の属性の付け方（ 1）
● その他の属性の付け方（ 2）
● コメントの書き方
● DOCTYPE宣言
目次
3
HamlでRubyを使う
● Rubyのコードを埋め込む
● 変数を定義する
● 変数の値を表示する
● ハイフンとイコールの違い
● 条件分岐
● 繰り返し処理
Hamlを活用する
● Hamlをダウンロードする
● HamlをHTMLに変換する
● HamlとRuby on Rails

4. Haml（ハムル）とは、HTMLをよりシンプルにに書くことができる言語です。また、
Hamlのコード内ではRubyを用いることもでき、それによってより効率的にコードを
書くことができます。
Hamlのコードをそのままブラウザで表示することはできませんが、 HamlをHTML
に変換することで使用することができます。
Hamlとは
4
HamlでHTMLを記述する

5. 早速Hamlの書き方を見ていきましょう。図のように「 %タグ名」と書くことで、HTML
のタグを生成することができます。このように、 Hamlの特徴の1つに、終了タグが
不要という点があります。
なお、「%タグ名」と「テキスト」の間には半角スペースが必要なので気を付けま
しょう。
HamlでHTMLのタグを
生成する
5
HamlでHTMLを記述する

6. また、左の図のようにインデント（字下げ）をすることにより、右の図のような入れ
子になったHTMLを生成することができます。
このように、Hamlでは通常のHTMLと異なり、インデントが実際の表示結果に影
響することに気をつけましょう。
Hamlでのインデントの
扱い
6
HamlでHTMLを記述する

7. 左の図のように、「 %タグ名.クラス名」とすることで、そのタグにクラス名を指定す
ることができます。この際、「タグ名」とドット「 . 」の間にスペースを入れてはいけ
ないので注意しましょう。
また、連続してクラス名を書くことで、複数のクラス名を付けることも可能です。
クラス名を付ける
7
HamlでHTMLを記述する

8. クラス名と同様に、 id名も付けることができます。 id名を付けるにはドットではなく、
代わりにシャープ「#」を用います。クラス名も id名もCSSのセレクタと同じ記号を用
いるので、覚えやすいかと思います。
また、右の図のように書くことで、クラス名と id名の両方を付けることも可能です。
id名を付ける
8
HamlでHTMLを記述する

9. divタグに関しては特別に、クラス名や id名がついている場合には「 %div」の部分
を省略して書くことができます。
divタグの省略
9
HamlでHTMLを記述する

10. これまでにタグにクラス名と id名を付ける方法を学習しました。その他の属性とし
て、<img>タグの「src」や、<a>タグの「href」を指定する方法をみてみましょう。
これらはタグ名の後で、 Rubyのハッシュのように、 {:属性名 => 値}と指定すること
で属性を追加することができます。
その他の属性の付け
方（1）
10
HamlでHTMLを記述する

11. 先ほど見た属性の追加方法は、以下の図のように {属性名: 値}と省略して書くこ
ともできます。この点からも、 Rubyのハッシュと同じような書き方であることがわ
かるかと思います。その他の属性の付け
方（2）
11
HamlでHTMLを記述する

12. Hamlでも、他のプログラミング言語と同じようにコメントを書くことができます。コメ
ントとは、コードにまったく影響をしない、コード内のメモ書きのようなものです。
図のように、行の先頭にスラッシュ「 /」、または「-#」のどちらかを付けることで、そ
の行をコメントにすることができます。
コメントの書き方
12
HamlでHTMLを記述する

13. HamlでHTMLを記述する方法の最後の内容として、 DOCTYPE宣言について見
てみましょう。DOCTYPE宣言はWebページを作成する際に、どのバージョンの
HTMLかを宣言するためのものです。
Hamlでは、左の図のように「 !!!」と書くことで、右の図のような DOCTYPE宣言を生
成することができます。
DOCTYPE宣言
13
HamlでHTMLを記述する

14. ここからは、Hamlのコード内でRubyを使用する方法を学習していきましょう。
Rubyの基礎知識に不安がある方は、 ProgateのRuby学習コースで学習してみて
ください。Rubyのコードを埋め込
む
14
HamlでRubyを使う

15. まずは変数を定義する方法を学習してみましょう。
図のように行の先頭にハイフン「 -」を書き、その後で「 変数名 = 値」とRubyのコー
ド続けます。変数を定義する
15
HamlでRubyを使う

16. また、定義した変数の値を用いるには、先頭にイコール「 =」を書いてからその変
数名を書きます。
また、変数に代入した値は計算に使用したり、変数展開を用いたりすることも可
能です。
変数の値を表示する
16
HamlでRubyを使う

17. これまでに、変数の定義はハイフン「 -」、変数の値を表示するにはイコール「 =」を
使用してきました。
これらの違いは、 Rubyのコードの結果（値）を表示しない場合はハイフン、表示す
る場合にはイコール、と覚えておきましょう。
ハイフンとイコールの
違い
17
HamlでRubyを使う

18. ここからはHamlでよく使用するRubyのコードをいくつか紹介します。
まずは条件分岐です。 Haml内でも以下の図のように if文やelse文を使用して表示
を切り替えることができます。
この際、「if 条件式」や「else」の部分は実際に表示する内容ではないため、先頭
にハイフンを用いるようにしましょう。
条件分岐
18
HamlでRubyを使う

19. 配列に対する繰り返し処理もよく使用する文法です。
図のように、定義した配列に対して each文を用いることで、同じような要素を繰り
返して表示する際には非常に効率よく書くことができます。繰り返し処理
19
HamlでRubyを使う

20. 最後に、Hamlを実際に使用する方法について簡単に見てみましょう。
自分のPCでHamlを利用するには、まず Hamlをダウンロードする必要がありま
す。公式サイト（ http://haml.info/ ）のダウンロードの項目では、以下のコマンドを
実行することで、 Hamlのgemを使用する方法が紹介されています。
Hamlをダウンロードす
る
20
Hamlを活用する

21. gemを用いてHamlをダウンロードできたら、作成した HamlファイルをHTMLファイ
ルに変換してみましょう。
図のように「haml Hamlファイル名 HTMLファイル名」というコマンドを実行するこ
とで、HamlのコードをHTMLに変換し、自動でファイルに書きこむことができます。
HamlをHTMLに変換す
る
21
Hamlを活用する

22. また、Hamlを用いる場面の 1つとして「Ruby on Rails」のビューファイルとして用
いることがあります。
「haml-rails」というgemをインストールすることで、 erbファイルの代わりに haml
ファイルを使用することができます。
（詳しくは「rails haml」などで検索してみてください！）
Hamlと
Ruby on Rail
22
Hamlを活用する

23. ● 最後まで読んでいただき、ありがとうございました
● Hamlで快適な生活をお過ごしください
● 内容に関するご指摘やご質問は以下の連絡先までお願いします
さいごに
23
カイトズズキ
Twitter: @k_toooooooooo
Email: suzukikaito@prog-8.com