Ruby好き非エンジニアのブログ

〜Ruby on Railsの学習記録〜

Hamlについてのメモ。

久々のブログ更新。
息子が生まれてはや5ヵ月。プログラミングを封印してましたが、夜も少しずつ長く寝るようになり、自分にも余裕が出てきたのでまたちょこちょこと更新していきたいと思います。

今回はHaml(ハムル)に触れているのでちょっとメモ。


WikipediaによるとHamlとは、
Haml (HTML Abstraction Markup Language) is a templating system that is designed to avoid writing inline code in a web document and make the HTML easy and clean.
Haml - Wikipedia
簡単に言うと、HTMLを簡単きれいに書けるテンプレートシステムという感じでしょうか。


例えば

<strong><%= item.title %></strong>

と書いていたものが、

%strong= item.title

とシンプルになります。
haml.info

他にも、

<!DOCTYPE HTML>

と記述していたのが、

!!!

になったり。

<!DOCTYPE HTML>

↑↑これも、昔に比べたらだいぶ簡単ですが、Hamlで記述すると更に簡単!
一個一個の作業が積み重なって膨大な時間を消費するので、少しでも省略できるのは本当有り難い!

一応、下記コードをブラウザで確認。
f:id:Jyoko:20171225070945g:plain
command+shift+Cを押して実際のソースコードを見てみると、


f:id:Jyoko:20171222073414g:plain
command+shift+Cでコードを見る

%h1

で記述したものが

<h1></h1>

と出力されているのがわかります。


なるほど、なんとなーく使い方がわかってきたぞ!というところで問題発生。

f:id:Jyoko:20171222073453g:plain
正しく入力しているはずなのに、なぜか「Log In」の場所がずれている…というかheader部分のCSSが反映されていない。

ちなみにHamlのコードはこんな感じ。
f:id:Jyoko:20171222073436g:plain

調べてみると、Hamlではインデントが重要みたい。これ以前にもスペースの使い方でエラーが出ていましたが、正しく記述しないとこんなところにも影響するのか。。

qiita.com


で、直したコードがこちら。
f:id:Jyoko:20171222073511g:plain
書いてある内容は全く同じですが、インデントが若干違います。
f:id:Jyoko:20171222073355g:plain
これでLog Inは右端に移動し、うまく表示できました。

まだまだ触りはじめたばかりなのでわからないことも多いですが、いろいろ調べて便利に使っていきたいと思います。