HAML
はじめに 編集
HAML（HTML Abstraction Markup Language）は、Rubyで書かれたマークアップ言語です。HAMLは、HTMLの代わりに、コンパクトで読みやすく、人間が作成しやすい構文を提供します。このチュートリアルでは、HAMLの基礎を学び、簡単なHAMLページを作成する手順を説明します。
HAMLのインストール 編集
HAMLを使用するには、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、CaffeScript のそれぞれについて、コード例とともに解説していきます。
|
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を使用すると、次のようなメリットがあります。
- コードが簡素化され、可読性が向上します。
- HTMLコードのタイプ数が減り、コードの再利用性が向上します。
- 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