アラフォ〜プログラミング未経験会社員のエンジニアへの道

神奈川県横浜市在住。アラフォーで小学生の息子あり。プログラミング勉強中でHTML/CSS, Ruby, Ruby on Rails, Javascriptなど。 いずれAI関連サービスを開発したい。

[アラフォプログラミング未経験]Hamlについて学んだみた

今回は、「Haml」について勉強してみましたー

というか、並行してそもそものHTMLやCSSもまたおさらいしてます。。。

まさに3歩進んで2.5歩下がってを繰り返して、少しずつ少しずつ進んでいく感じですね。


目次

Hamlとは?

Hamlとは、HTMLよりも簡単に書くためのビューテンプレートエンジンです。

公式サイトによると「マークアップは美しくあるべき」という原則に基づいて開発されました。

Hamlを使用することで、

「綺麗に」、「読みやすく」、「生産的に」

ビューを作成することができます。
〜カリキュラムより抜粋〜


HTMLもわかりやすかったけど、さらに簡単に綺麗に書けるとな?!




参考(英語ですが)
haml.info



HamlのGemについて

Railsでは、Haml記法を可能にするhaml-railsというGemが提供されています。

このGemをプロジェクトにインストールすることで簡単にHamlを導入することができます。

また、既存のerbファイルをHaml記法に変換することもできます。


Githubに参考となるサイトあります。
github.com


HamlRailsに導入する方法

ではでは、RailsHamlを導入していきます。


動作環境は以下の通り。

rails '~> 5.1.6'
ruby '2.3.1'


GemfileにHamlを入れる

gem 'haml-rails'

これを記述した後に、Bundleインストールすれば、使えるようなります。


Hamlの基本的な記法について

まずは一番シンプルにHamlを書く場合。

%p Hello!

と書くと%pをhtmlのpタグと認識して次のようなHTMLに変換してくれます。

<strong>Hello!</strong>

階層構造

「半角2つ」を使って階層構造を表すこともできます。

%gee
  %whiz
    今日も良い天気だなぁ!


次のようなHTMLに変換されます。

<gee>
  <whiz>
    今日も良い天気だなぁ!
  </whiz>
</gee>

属性情報の付加

HTMLタグの属性情報は次のように記述すると

%div{id: "my-id"} Contents
%div{class: "my-class"} Contents


HTMLに変換するときに付加されます。

<div id="my-id">
    Contents
</div>
<div class="my-class">
    Contents
</div>

DOCTYPEの宣言

!!! 5


上のようなHAMLを書くと、

下のようにHTML5用のDOCTYPE宣言にしてくれます。

<!DOCTYPE html>


こりゃ、便利だわ。

「%」で色々置き換えができるのが、わかった。

あとはrailsのhtmlを徐々にhamlに変換してみます!