はいこんばんは。
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>
!!!
%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>
.contents
%p 朝9時から夜10時まで
%p プログラミング勉強中
%h1 毎日毎日10時間
%a{:href => “https://g1034725.hatenablog.com/“} TECH::EXPERT受講生のブログ
はい、上記のようになります。
どうでしょうか。コードを書く量が減り、美しく、スタイリッシュにコーディングができていることが確認できます。
ところどころ難しいわ!!ばかやろう!!と思ったかたはコメントください。(笑)
私も同じ思いであります。(笑)
なにはともあれ、明日からchat-spaceフロント画面の実装を本格的に初めていきます。
泣き言を言っていても始まりません。絶対にやる!やりきるんだ!!と強い意思を持って続けていきます。
よろしくお願いいたします!!
コメント