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を使う必要があるのですか?
-
- マークアップは美しくあるべき
- マークアップはDRYであるべき
- マークアップはよくインデントされるべきである
- HTMLの構造は明確であるべき
- この4つが大きな理由です。
- 美しいとはどういう意味ですか?
- 美しいとは、人間があなたのマークアップを読む能力を意味します。
- HAMLは完全にセマンティックで妥当なHTMLを出力します。
- DRY?でも、私はマークアップを濡らしたことがありません。
- D - Don't
- R – Repeat
- Y – Yourself
- HAMLはタグを2回タイプする必要をなくします。
- 全部1行で済むのでは?
- HAMLでは、要素の親子関係を示すためにインデントを使います。
- ∴ HAMLのロジックは、親と子のインデントに依存しています。
- インデントに依存している?
- 入れ子は、インデントと空白によって制御されます。
- それってインデントすることを期待しているのですか?
- 入れ子になった要素は、改行されなければなりません。
- それって、ちゃんとコーディングすれば、自然と明確になるんじゃないですか?
- HAMLのロジックはインデントに依存しているので、あなたのコードは常に明確で簡潔な構造を持っています。
- 他にもすごいことがあります。
- HAMLはRubyでコンパイルされているので、Rubyのロジックも使うことができます。
- HAMLはどのようにダウンロードするのですか?
- Rubyをインストールします。
- これをコマンドラインに入力する。
gem install haml
- どのように動作しますか?
- あなたのHAMLはコマンドラインや他のプログラムを通じてコンパイルされ、HTMLとして外部ファイルに保存されます。
- コンパイルにはRubyを使用します。
- 4つの質問
-
- DRYの意味は何ですか?
- HAMLのロジックは何に依存しますか?
- HAMLは何の略ですか?
- HAMLはどのような言語でコンパイルされていますか?
- 4つの答え
-
- 同じことを繰返さない
- インデント
- HTML Abstraction Markup Language / HTML抽象化マークアップ言語
- Ruby