HAML

HAML入門

HAMLって何？

HTML Abstraction Markup Language （HTML抽象化マークアップ言語）として知られています。

用途は？

「Hamlは、PHP、ASP、ERBなどのインラインページテンプレートシステムの代わりとして機能します( “Haml functions as a replacement for inline page templating systems such as PHP, ASP, and ERB.” )」 -- https://haml.info/about.html

HTMLを使うと

もっと速く、より効率的に書くことで、より多くの時間を楽しいことに費やすことができるようになります。

『もっと速く』ってどういう意味ですか？

HAML

%section.container
  %h1= post.title
  %h2= post.subtitle
  .content 
    = post.content

HTML

<section class="container">
  <h1>#{ post.title }</h1>
  <h2>#{ post.subtitle }</h2>
  <div class="content">
    #{ post.content }
  </div> 
</section>

HTMLの要素は、パーセント記号(%)の後に要素名を付けて作成します。

IDとClassをCSSのセレクタのように表現して、タグに付加します。

もしHTML要素が定義されていない場合、HAMLはあなたのためにdiv要素を挿入します。

なぜHAMLを使う必要があるのですか？

1. マークアップは美しくあるべき
2. マークアップはDRYであるべき
3. マークアップはよくインデントされるべきである
4. HTMLの構造は明確であるべき

この4つが大きな理由です。

美しいとはどういう意味ですか？

美しいとは、人間があなたのマークアップを読む能力を意味します。

HAMLは完全にセマンティックで妥当なHTMLを出力します。

DRY？でも、私はマークアップを濡らしたことがありません。

D - Don't

R – Repeat

Y – Yourself

HAMLはタグを2回タイプする必要をなくします。

全部1行で済むのでは？

HAMLでは、要素の親子関係を示すためにインデントを使います。

∴ HAMLのロジックは、親と子のインデントに依存しています。

インデントに依存している？

入れ子は、インデントと空白によって制御されます。

それってインデントすることを期待しているのですか？

入れ子になった要素は、改行されなければなりません。

それって、ちゃんとコーディングすれば、自然と明確になるんじゃないですか？

HAMLのロジックはインデントに依存しているので、あなたのコードは常に明確で簡潔な構造を持っています。

他にもすごいことがあります。

HAMLはRubyでコンパイルされているので、Rubyのロジックも使うことができます。

HAMLはどのようにダウンロードするのですか？

Rubyをインストールします。

https://www.ruby-lang.org/ja/downloads/

これをコマンドラインに入力する。

gem install haml

どのように動作しますか？

あなたのHAMLはコマンドラインや他のプログラムを通じてコンパイルされ、HTMLとして外部ファイルに保存されます。

コンパイルにはRubyを使用します。

4つの質問

1. DRYの意味は何ですか？
2. HAMLのロジックは何に依存しますか？
3. HAMLは何の略ですか？
4. HAMLはどのような言語でコンパイルされていますか？

4つの答え

1. 同じことを繰返さない
2. インデント
3. HTML Abstraction Markup Language / HTML抽象化マークアップ言語
4. Ruby

マークアップ例

• JavaScript/Canvas#HAMLソース

外部リンク

• http://haml.info/