【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 インストール」などで検索し参照ください）

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

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

基本的なタグの書き方

一番重要なのは、インデントです。入れ子（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記述もそのまま使うことができますので、少しずつの導入でも問題ありません！

是非お試しください！

Author Profile

Tsukasa Nagata

株式会社ユニマル代表取締役COO。「Web制作チームのためのクリエイティブ・プラットフォーム『universions』」では、UIデザイン・開発とマーケティング、色んなところに遊びにいくのが担当。

Hamlとは

さっそく基本的なイロハ

環境構築

基本的なタグの書き方

IDやCLASS

リンクなどのパラメタ

コメント

変数や条件分岐

条件分岐

まとめ

Author Profile

Latest entries

この記事を読んだ人にオススメ！

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