HTML → HAMLへというお話。(コーディングのみ。環境設定は内容に含みません!!)

はいこんばんは。

Ruby on Rails 見習いのYです!

 

今日も張り切ってアウトプットさせていただきたいと思います!!

 

エキスパートでのレッスンもどんどん進んでおりまして、chat-spaceというアプリの作成に入りました。

 

フロント画面の実装から入り、中身の記述をこなしていくことになるのですが、また強敵が立ちはだかりました。HAMLです。

 

HAML(はむる)とは・・・HTMLより記述を簡単にした言語です。特徴としては閉じタグがないということ。</div>という記述がいらないわけですね。ではどうやって記述していくのか。例とともに見ていきましょう。

 

本日、次のサイトを見つけるまでは相当苦労していたのですが、参考にしているとどんな記事よりも理解しやすい!!ということで紹介させていただきます。

 

Convert HTML to HAML です!!!

 

このサイトは、HTMLのコードを入力すると、HAMLに変換してくれるという優れものです。実例付きで解説させていただきます。

 

HTML

<!DOCTYPE html>
<html>
<head>
<title>MYBLOG</title>
</head>
</html>

 

HAML

!!!
%html
%head
%meta{:content => “text/html; charset=UTF-8“, “http-equiv” => “Content-Type”}/
%title MYBLOG

 

どうでしょうか?HTMLの記述が簡単になりましたでしょうか?

 

どこがやねん!と突っ込みたくなります。

 

<!DOCTYPE>       =     !!!

<html</html>       =     %html

<head></head>   =    %head

<title></title>       =     %title

 

以上のように対応しています。 閉じたぐがないこと、また、4行目がなければ簡単に見えますね・・・・

 

ではタグつきのコードはどうでしょうか。

HTML

<div class=”contents”>
<p>朝9時から夜10時まで</p>
</div>

 

<p>プログラミング勉強中</p>

 

<h1>毎日毎日10時間</h1>

<a href=”https://g1034725.hatenablog.com/“>TECH::EXPERT受講生のブログ</a>

 

HAML

.contents
%p 朝9時から夜10時まで

%p プログラミング勉強中

%h1 毎日毎日10時間

%a{:href => “https://g1034725.hatenablog.com/“} TECH::EXPERT受講生のブログ

 

はい、上記のようになります。

 

どうでしょうか。コードを書く量が減り、美しく、スタイリッシュにコーディングができていることが確認できます。

 

ところどころ難しいわ!!ばかやろう!!と思ったかたはコメントください。(笑)

私も同じ思いであります。(笑)

 

なにはともあれ、明日からchat-spaceフロント画面の実装を本格的に初めていきます。

泣き言を言っていても始まりません。絶対にやる!やりきるんだ!!と強い意思を持って続けていきます。

 

よろしくお願いいたします!!

コメント

タイトルとURLをコピーしました