【HTML】Hamlを使ってコーディングの効率化&構造化を意識した記述をしよう

CSSだとSass/Compassなど、より記述を楽にし、メンテナブルにする言語がありますが、HTMLのほうはいかがでしょう。皆様使ってますか?

メモを取る際、Markdownで記述されている方は、ある種使っているといえるかもしれませんね。今回はHamlという言語を使ってみます。

Hamlとは

Haml

Beautiful, DRY,
well-indented, clear markup:
templating haiku.
引用:Haml

なお、HamlはHTML abstraction markup languageの略です。マークアップを美しく、早く、シンプルに作るための言語です。

Ruby on RailsのViewファイルを記述するためによく使われる技術だそうです。
とはいえHTMLのマークアップ言語であれば、普通のWeb制作にも使っていきたいですね。

さっそく基本的なイロハ

まずはどんな感じかサンプルを御覧ください
以下がhalmで書いたものです。

!!! 5
%html
  %body
    %div.container
      %header
        %h1 title
        %h2 subtitle
      %div.contents
        %div.single-box
          %h2.box-title
          %p.box-discription
      %footer
        %p unitopi. All rights reserved.

コンパイルすると、、

<!DOCTYPE html>
<html>
  <body>
    <div class='container'>
      <header>
        <h1>title</h1>
        <h2>subtitle</h2>
      </header>
      <div class='contents'>
        <div class='single-box'>
          <h2 class='box-title'></h2>
          <p class='box-discription'></p>
        </div>
      </div>
      <footer>
        <p>unitopi. All rights reserved.</p>
      </footer>
    </div>
  </body>
</html>

となります。

環境構築

ターミナル(Applications > Utilities > Terminal)を開き、gem install halmでインストールします。

なお、gemはrubyをインストールし、環境変数PATHを通す必要がありますのでご注意ください。(「Mac ruby インストール」などで検索し参照ください)

Screen Shot 2015-02-26 at 23.02.38

コンパイル(hamlファイルからhtmlファイルにする)は、コマンドで打つ以下の方法と、SublimeTextなどをつかってBuild Systemを作る方法などがあります。(Build Systems — Sublime Text Unofficial Documentation

コマンドでは、haml hamlファイル htmlファイルでコンパイルできます。

Screen Shot 2015-02-27 at 00.39.16

基本的なタグの書き方

一番重要なのは、インデントです。入れ子(divのなかにpがあるとか)にする場合は、インデントがどうなっているかによって判断されます。
そしてタグは%をつけてタグの指定をします。Sassと同じように、インデント記述にさえ準拠すればHTML記述でも問題ありませんので、使いたいところだけ使っても良いでしょう。

%div
  %h1 h1のテキストです。
  %p
    pのテキストです。
<div>
  <h1>h1のテキストです。</h1>
  <p>
    pのテキストです。
  </p>
</div>

となります。
インデントを右にずらすととみなされるため、pタグで囲まれている部分は段落がわけて表示されています。

IDやCLASS

IDやクラスも簡単です。

%div#container
  %div.content
  %div.box.active
<div id="container">
  <div class="content"></div>
  <div class="box active"></div>
</div>

となります。classを複数付けたいときは、%div.box.activeと続けてかけばOKです。

リンクなどのパラメタ

続いてaタグのhrefなどの指定方法を見てみましょう。

%a(href="http://unitopi.com") unitopiへのリンク
<a href="http://unitopi.com">unitopiへのリンク</a>

となります。

コメント

/ 1行コメント
/
  複数行の
  コメント
<!-- 1行コメント -->
<!--
  複数行の
  コメント
-->

となります。ちなみに-#をつかうことで、HTMLコメントとしても出力されないhaml専用のコメントも使えます。

変数や条件分岐

Hamlの真骨頂です。Sassなどにもありますが、変数などを扱うことができます。

- text = "テキストです"
- var = "VARです"
%div
  %p= text
  %p これはなんと#{var}
<div>
  <p>テキストです</p>
  <p>これはなんとVARです</p>
</div>

これが変数の使い方です。#{}を使うことで文中でも使用することができます。

条件分岐

- num = 100
- if num >200
  %p これは200より上
- else
  %p これは200以下

なんとなく察しがつきますね

<p>これは200以下</p>

となるわけです!

まとめ

いかがでしたか?
ほかにもスイッチ文や連番を振って繰り返し処理をさせる方法など、様々な機能があります。前段でも説明しましたが、Sassと同様に通常のHTML記述もそのまま使うことができますので、少しずつの導入でも問題ありません!

是非お試しください!

フォローして続編をチェック

@universionsをフォロー