Wikibooks

HAML

はじめに

編集

HAML（HTML Abstraction Markup Language）は、Rubyで書かれたマークアップ言語です。HAMLは、HTMLの代わりに、コンパクトで読みやすく、人間が作成しやすい構文を提供します。このチュートリアルでは、HAMLの基礎を学び、簡単なHAMLページを作成する手順を説明します。

HAMLのインストール

編集

HAMLを使用するには、Rubyが必要です。Rubyがインストールされていない場合は、まずRubyをインストールしてください。

詳細は「Ruby#rubyインタープリターの準備」を参照

Rubyがインストールされている場合は、HAMLをインストールする必要があります。以下のコマンドを実行して、HAMLをインストールします。 

% gem install haml

HAMLの基本構文

編集

HAMLの構文は、インデントに基づいているため、読みやすく、ネストされた要素を表現するのに適しています。HAMLの基本構文を以下に示します。 

%要素名 属性1=値1 属性2=値2 ...
  子要素1
  子要素2
  ...

たとえば、HTMLの<div>要素を作成するには、次のように書きます。 

%div
  %p これは段落です。
  %p これは別の段落です。

これは、次のHTMLに変換されます。 

<div>
  <p>これは段落です。</p>
  <p>これは別の段落です。</p>
</div>

属性を追加するには、属性名と値を指定します。 

%img(src="image.png" alt="画像")

これは、次のHTMLに変換されます。 

<img src="image.png" alt="画像">

クラスを追加するには、.を使用します。 

%div.container
  %p これはコンテナ内の段落です。

これは、次のHTMLに変換されます。 

<div class="container">
  <p>これはコンテナ内の段落です。</p>
</div>

IDを追加するには、#を使用します。 

%div#header
  %h1 ヘッダー

これは、次のHTMLに変換されます。 

<div id="header">
  <h1>ヘッダー</h1>
</div>

HTML5のマークアップ例は以下のようになります。 

!!! 5
%html{ lang: "ja" }
  %head
    %meta{ charset: "UTF-8" }
    %title タイトル
    %link{ rel: "stylesheet", href: "styles.css" }
  %body
    %header
      %h1 ヘッダー
      %nav
        %ul
          %li
            %a{ href: "#" } ホーム
          %li
            %a{ href: "#" } サービス
          %li
            %a{ href: "#" } お問い合わせ
    %main
      %section
        %h2 セクションタイトル
        %p セクションの内容
      %section
        %h2 別のセクション
        %p 別の内容
    %footer
      %p フッター情報
    %script{ src: "scripts.js" }

これは、次のHTMLに変換されます。 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>ヘッダー</h1>
    <nav>
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <section>
      <h2>セクションタイトル</h2>
      <p>セクションの内容</p>
    </section>
    
    <section>
      <h2>別のセクション</h2>
      <p>別の内容</p>
    </section>
  </main>
  
  <footer>
    <p>フッター情報</p>
  </footer>
  
  <script src="scripts.js"></script>
</body>
</html>
インデント指向の言語
インデント指向の言語は、テキストファイルにおいてインデント（字下げ）を利用して、構造を表現するプログラミング言語のことを指します。ここでは、YAML、HAML、SASS、Python、CoffeeScript のそれぞれについて、コード例とともに解説していきます。
YAML
YAMLは、人間にとって読み書きしやすいフォーマットを提供することを目的としているデータ形式で、主に設定ファイルなどに利用されます。
以下は、YAMLの例です。
# YAML Example
name: John Doe
age: 30
address:
  street: 123 Main St
  city: Anytown
  state: CA
  zip: 12345
この例では、name、age、addressというキーがあり、それぞれに対して値が設定されています。また、addressの値は、インデントされていることで、street、city、state、zipというサブキーを持つことがわかります。
長所
  • 人間にとって読み書きがしやすい
  • シンプルで、視覚的にも分かりやすい
短所
  • 一般的なプログラミング言語と比べると、表現力が制限されている
  • プログラムコードを表現するのには適していない
HAML
HAMLは、HTMLを簡略化した言語で、インデントによってHTMLの要素同士の入れ子関係を表現します。HAMLの主な目的は、HTMLの記述量を削減することです。
以下は、HAMLの例です。
-# HAML Example
%html
  %head
    %title My HAML Page
  %body
    %h1 Welcome to my HAML page!
    %p This is a paragraph of text.
この例では、html、head、title、body、h1、pという要素があり、それぞれに対してインデントによって親子関係が表現されています。
長所
  • HTMLを記述する際の記述量が削減できる
  • 視覚的にも分かりやすい
短所
  • Rubyで書かれたテンプレートエンジンであるため、Rubyの知識が必要
  • 静的なコンテンツの生成に適しているが、動的なコンテンツの生成する場合は追加の知識が必要
SASS
SASSはCSSの拡張言語で、変数や関数、ネストなどの機能を追加することで、CSSの記述を簡略化し、保守性を高めることができます。
この例では、変数を定義して、スタイルの中で使用しています。また、.containerクラスの中に、h1やpがネストされており、より視覚的に見やすくなっています。
// 変数を定義
$primary-color: #ff0000;
$secondary-color: #00ff00;

// スタイルの定義
.container
  width: 960px
  margin: 0 auto
  padding: 20px

  h1
    font-size: 24px
    color: $primary-color

  p
    font-size: 16px
    color: $secondary-color
長所
  • 変数や関数、ネストなどの機能により、コードの記述が簡略化され、保守性が高まる。
  • CSSとの互換性が高く、既存のCSSコードをSASSに変換することが容易。
  • コンパイルによって、ブラウザで実行可能なCSSに変換できる。
短所
  • 初学者にとっては、学習コストが高い。
  • コンパイルのためのツールが必要であるため、手軽に利用できない。
Python
Pythonは、インデントによってコードブロックを区切ることが特徴的なインデント指向の言語です。
以下に、PythonでFizzBuzz問題を解くコード例を示します。
for i in range(1, 101):
    if i % 3 == 0 and i % 5 == 0:
        print("FizzBuzz")
    elif i % 3 == 0:
        print("Fizz")
    elif i % 5 == 0:
        print("Buzz")
    else:
        print(i)
上記のコードでは、forループの中にif-elif-else文が含まれています。Pythonでは、インデントが4つの空白文字で表されることが多く、この例ではそれを使用しています。インデントが一致していない場合、エラーが発生します。
長所
Pythonのインデント指向の特徴的な長所は、可読性の高いコードを書きやすいことです。Pythonの文法はシンプルで自然な英語に近いため、初心者でも学習しやすいというメリットがあります。
短所
一方、インデントの記述ルールに従わないとエラーが発生するため、他の言語と比べて書き方に注意が必要です。
CoffeeScript
CoffeeScriptは、JavaScriptの構文に似たシンタックスを持つインデント指向の言語です。
以下に、CoffeeScriptでFizzBuzz問題を解くコード例を示します。
for i in [1..100]
    if i % 3 == 0 and i % 5 == 0
        console.log("FizzBuzz")
    else if i % 3 == 0
        console.log("Fizz")
    else if i % 5 == 0
        console.log("Buzz")
    else
        console.log(i)
上記のコードでは、forループの中にif-else if-else文が含まれています。CoffeeScriptでは、セミコロンや中括弧を省略することができるため、コードの記述量が少なくて済むというメリットがあります。また、CoffeeScriptは、JavaScriptに比べてより厳密な文法チェックを行うため、エラーが少なくなります。
長所
CoffeeScriptのインデント指向の特徴的な長所は、JavaScriptに似た文法を持ちながら、よりシンプルな記述ができることです。また、CoffeeScriptは、CoffeeScriptと同じくJavaScriptにコンパイルされるため、ブラウザで実行する際のパフォーマンスが向上します。
短所
一方、JavaScriptとの文法の違いに慣れる必要があるため、学習コストがかかることが短所です。

HAMLの変数

編集

HAMLでは、Rubyコードを使用して変数を定義し、それをHAMLで使用することができます。変数は、=記号を使用してHAMLに渡すことができます。

変数を使用するには、HAML内で変数を宣言し、Rubyのコードを埋め込みます。次に、HAMLで変数を使用する方法を説明します。 

- title = "私のページ"
%div
  %h1= title
  %p これは、#{title}です。

これは、次のHTMLに変換されます。 

<div>
  <h1>私のページ</h1>
  <p>これは、私のページです。</p>
</div>

HAMLのコメント

編集

HAMLでは、コメントを挿入することができます。コメントは、-#記号を使用して挿入します。 

-# これはコメントです。
%div
  %p これは段落です。

これは、次のHTMLに変換されます。 

<div>
  <p>これは段落です。</p>
</div>
HAMLのコメントは、HTMLのコメント（）とは異なり、HTML出力からは蒸発します。

HAMLの条件分岐

編集

HAMLでは、Rubyの条件分岐を使用して、特定の条件に基づいてHAMLを生成することができます。

次に、HAMLで条件分岐を使用する方法を説明します。 

%div
  - if true
  %p これは真です。
  - else
  %p これは偽です。

これは、次のHTMLに変換されます。 

<div>
  <p>これは真です。</p>
</div>

繰り返し処理の基本的な書き方

編集

HAMLでは、Rubyのeachメソッドを使って繰り返し処理を行います。以下は、配列を繰り返してリストを作る例です。 

%ul
  - ['apple', 'banana', 'orange'].each do |fruit|
    %li= fruit

この例では、%ul要素の中でeachメソッドを使って、['apple', 'banana', 'orange']の配列を繰り返しています。%li要素の中でfruit変数を使って、各要素を表示しています。

インデックス付きの繰り返し処理

編集

繰り返し処理の中で、現在のインデックス番号を使いたい場合があります。その場合は、Rubyのeach_with_indexメソッドを使います。以下は、配列を繰り返して番号付きのリストを作る例です。 

%ol
  - ['apple', 'banana', 'orange'].each_with_index do |fruit, i|
    %li= "#{i + 1}. #{fruit}"

この例では、%ol要素の中でeach_with_indexメソッドを使って、['apple', 'banana', 'orange']の配列を繰り返しています。%li要素の中で、i変数を使って現在のインデックス番号を表示し、fruit変数を使って各要素を表示しています。

ハッシュの繰り返し処理

編集

配列だけでなく、ハッシュも繰り返し処理できます。以下は、ハッシュを繰り返して表を作る例です。 

%table
  %thead
    %tr
      %th Key
      %th Value
  %tbody
    - { 'apple' => 100, 'banana' => 200, 'orange' => 150 }.each do |key, value|
      %tr
        %td= key
        %td= value

この例では、%table要素の中でハッシュを繰り返しています。%thead要素の中で表の見出しを、%tbody要素の中で実際の表を作成しています。ハッシュの各要素はkey変数とvalue変数を使って取得し、%td要素に表示しています。

以上で、HAMLの基礎を学び、簡単なHAMLページを作成する方法を説明しました。

HAMLは、HTMLの代わりに使用することができる簡単で読みやすいマークアップ言語であり、Rubyで書かれているため、Rubyの知識があれば簡単に学ぶことができます。

HAMLのメリット

編集

HAMLを使用すると、次のようなメリットがあります。

  1. コードが簡素化され、可読性が向上します。
  2. HTMLコードのタイプ数が減り、コードの再利用性が向上します。
  3. HTMLコードを直接書くよりも速く書くことができます。

HAMLのベストプラクティス

編集

以下は、HAMLの一般的なベストプラクティスです。

  • インデントを正しく使う
  • コードをDRYに保つ
    D - Don't
    R – Repeat
    Y – Yourself
  • セマンティックで妥当なHTMLを生成
  • コメントを使用してコードをドキュメント化

附録

編集
HTML5の要素全部載せ
!!! 5
%html
  %head
    %title My Awesome Webpage
    %link(rel='stylesheet' href='style.css')
  %body
    %header
      %h1 Welcome to My Website
    %main
      %section
        %h2 About Me
        %p Hi, my name is John and I'm a web developer. I enjoy coding and creating awesome websites.
        %ul
          - ["Ruby on Rails", "JavaScript", "HTML/CSS"].each do |tech|
            %li= tech
      %section
        %h2 My Projects
        %article
          %h3 Project 1
          %p This is a description of my first project. It was built using Ruby on Rails and has a lot of cool features.
          %a(href='#') Read More
        %article
          %h3 Project 2
          %p This is a description of my second project. It was built using JavaScript and has a lot of interactive elements.
          %a(href='#') Read More
      %section
        %h2 My Table
          %table
            %thead
              %tr
                - %w(Name Age Gender).each do |field|
                  %th= field
          %tbody
           - [ { name: "John", age: 32, gender: "Male" }, { name: "Jane", age: 27, gender: "Female" } ].each do |person|
             %tr
               %td= person[:name]
               %td= person[:age]
               %td= person[:gender]
      %section
        %h2 Contact Me
        %form(action='/submit-form' method='POST')
          %label(for='name') Name
          %input(type='text' id='name' name='name')
          %label(for='email') Email
          %input(type='email' id='email' name='email')
          %label(for='message') Message
          %textarea(id='message' name='message')
          %button(type='submit') Send Message
    %footer
      %p Copyright © 2023

マークアップ例

編集

外部リンク

編集
 
Wikipedia
 ウィキペディアにen:HAMLの記事があります。
"https://ja.wikibooks.org/w/index.php?title=HAML&oldid=251970" より作成