見出し画像

hamlとSassってラクに書けて楽しい　@TECH CAMP#9

とだ

　どうも、油断禁物という言葉を忘れないようにしたい、とだです。
　緊急事態宣言が解除されても、油断禁物ですよね。TECH CAMPで教室に通えるようになると良いなとは思いつつ、感染拡大防止に対する意識は継続しないといけないなと思います。

　さて、だいぶプログラミングに関する進捗を報告していませんでした。今はチャットアプリの開発を頑張っています。なかなか上手くいかなかったり時間がかかってしまったりと四苦八苦していますが、最終的にうまく実装できて気持ちが良くなってます。うまくいくと楽しい。プログラミングの面白さの1つを実感できていると思います。
　今回は今取り組んでいるチャットアプリのフロントの部分、HTMLとCSSで記述している部分いついて、学んだことをアウトプットしようと思います。

hamlとSassって？

　HTMLとCSSについて以前学んだのですが、これらをさらに簡単に記述できるようになるのがhamlとSassというものだそうです。字面から推測できますが、HTML→haml、CSS→Sassと対応しています。

hamlを使うと楽ができる？

　まず、hamlは「HTML Abstraction Markup Language」の略で、「HTMLを抽象化したマークアップ言語」ということです。つまり、HTMLをさらに簡単に記述できるようにしたもの、HTMLをより簡単に書くためのビューテンプレートエンジンです。ビューテンプレートエンジンとはテンプレート(雛形)と呼ばれる通常のhtml等で書いたコードと変数などプログラミングによって書かれたコードを合成してビューファイルを作り出すものです。
　自分がびっくりしたのはhamlにはHTMLにある閉じタグが要らないという特徴があることです。めっちゃ書きやすくなるやん！と大歓喜です。
　さらにHTMLでは多用される<div>タグですが、クラスやIDを付与して使う場合

<div class= "samplclass">サンプル</div>

​<div id= "hoge">ホゲid</div>

と、上記のようなHTMLをhamlでは、

%div.sample
  サンプル

%div#hoge
  ホゲid

と書くことができますが、さらに

.sample
  サンプル

#hoge
  ホゲid

と%divを省略できるという点にはびっくりしました。記述量が一気に減ってどんどん書き進められるストレスフリーな感覚が最高です。

　hamlの書き方、チートシートは以下の記事が大変参考になります。ぜひご覧ください。

Sassも楽できる？

　Sassとは何かというと、CSSの機能を拡張した言語のことです。CSSを効率的に書けるようになります。SassはCSSに非常に似ているのですが異なる言語だそうです。特徴の1つとして、CSSを簡潔に書けるだけではなく、CSSの中で変数を使ったり、計算を行うことなどができます。

　Sassを使うにあたって、現在ではSCSS記法が主流だそうで、これはCSSに非常に似た記法でSassの機能を使うことが出来ます。CSSを学んだ後だと凄くとっつきやすくて学びやすかったです。

　Sassを使うメリットとして、

1. 記述の簡略化ができる
2. プログラムのような処理ができる
3. 複数のCSSファイルを1つにまとめることができる
4. 同じ値を使い回すことができる

が挙げられます。

　まず、記述の簡略化ができるという点における特徴ですが、Sassでは親子関係にあるセレクタを入れ子にして書くことができます。CSSでは、親の要素から対象要素までのセレクタを何度も書く必要がありますが、Sassはネストさせることで、同じ親のセレクタをまとめることができます。これができると記述量が減りますよね。凄く助かります。さらに、ネストして記述することで深い階層になっても親子関係がわかりやすい、親要素を複数記述しなくて済むといったメリットがあります。初心者の自分にも優しくて助かります。

　プログラムのような処理ができる点についてですが、Sassでは変数が使えます。例えばピクセル数やカラーコードなどの何度も使用する値を変数を定義することで、変数名で何度も使用することができます。変数を定義するには、


$変数名: 値;


のように記述します。よく使うカラーコードや値は変数にすることであとで変更が楽になったり、コードが読みやすくなります。例えば以下のように使えます。

$mainWhite: #ffffff;
$skyblue: #38aef0;

.side-bar {
 width: 300px;
 &__user-name {
   background-color: $mainWhite
   height: 100px;
   display: flex;
   align-items: center;
 }
 &__group-list {
   background-color: $skyblue
   height: calc(100vh - 100px);
   
 }
}

　

　複数のCSSファイルを1つにまとめることができる点についてですが、Sassではパーシャルという機能を使用することで、複数のSassファイルを1つのCSSファイルとしてまとめることができます。パーシャルを使えば機能ごとにファイルを分割することができ、CSSを管理しやすくなります。パーシャルとは、分割したSassファイルのことです。ファイルを分割することで、機能や内容ごとに管理ができるようになってとても便利です。1つのファイル に全てのスタイルを書くと膨大な量の記述になり、可読性が悪くなります。一定のルールでファイルを分割して開発することで変更・修正がしやすくなります。パーシャルファイルを作成するには、ファイル名を_（アンダースコア）から始めるというルールがあります。パーシャルファイルを読み込むには、@import ファイル名と記述すればOKです。

@import "reset";
@import "config/variable";
@import "config/colors";
@import "modules/messages";

　1つ個人的に注意したいのが、@importで読み込むファイルの順番を間違えないようにするという点です。プログラムの大原則として「上から順に読み込む」というのがあるので、上記のようにリセットCSSを1番上にして、変数を定義したファイルを続け、最後にそれらを用いて記述しているファイルを読み込むという流れを常に意識したいと思います。この順序が違うと、変数を定義するファイルが読み込まれる前に変数を用いた記述をしているファイルが読み込まれることによって「そんな変数定義されてないよ」というようなエラーが出て怒られるので気をつけたいところです。

　同じ値を使い回すことができる点についてですが、Sassでは先ほど述べたような変数を用いることができる上に、mixinという機能が使えます。mixinという機能を使用することで、同じスタイルをまとめることができます。つまり何度も同じスタイルを記述する必要がなくなります。
　mixinを定義するには、

@mixin mixin名() {}

のように記述します。

　例えば、.clearfixはよく使用するので、_clearfix.scssというファイルを用意して、その中に定義しておきます。

@mixin clearfix() {
 &:after {
   content: '';
   display: block;
   clear: both;
 }
}

　上記の中の&(アンパサンド)は、擬似要素であるafterが適用されているセレクタを指します。これを用いたい場合、mixinの呼び出しは@includeを使用して以下のように書きます。

.menu {
 @include clearfix();
 ...
 .menu__list {
   float: left;
   ...
 }
}


まとめ

　今後もhamlとSassには大変お世話になると思います。HTMLやCSSで学んだことを生かしつつ、さらに楽に、綺麗に記述できるようになるなんてめっちゃええやん！と思います。
　今頑張って実装を進めているチャットアプリでは、見た目であるビューの部分を仕様書通りに進めていくのでゴールがわかりやすいですが、今後自分でアプリを作る時には、どのようなレイアウトにするか考えながらやらなければいけないので、自由度は高いけど手探りで頑張らないといけないかな？などとちょっと不安にも思います。自分好みのフロントを作れるように、今のうちからマスターしておきたいので頑張ります！

この記事が気に入ったらサポートをしてみませんか？