プログラミング勉強中!!

TECH::EXPERT 40期 受講生の筆者がその日学んだことをアウトプットしていくブログです。学習量によっては全て書ききれないこともあります。お気付きのことありましたバシバシコメントください!!3月中旬よりWEBエンジニアとして働くことになりました。日々の業務などについても発信させていただきたいと思います!!よろしくお願いいたします!!

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フロント画面の実装を本格的に初めていきます。

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

 

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