コンパイラかく語りき

import { Fun } from 'programming'

HTMLが高速に記述できると噂のslimを使ってみる

どうも!chuckです。

 

いきなり私事ですが、最近は転職に興味アリアリですw 求人を眺めているとやっぱりフロントエンドエンジニアになりたいな!と思う次第です。

そこで!今回はHTMLを高速で記述できると噂のslimを使ってみたいと思います。

 

 

注意書き

今回の学習は、ほぼQiitaの転写になります。もしこのページを見て学習の参考にしたいという方がおられましたら、本家を訪問することをオススメします。

qiita.com

 

Slim(スリム)とは

拡張子は.slim

Ruby製のテンプレートエンジン

・高速、軽量

・インデント必須

とのことです。

 

タイプ数が減り、見通しが良くなり、学習コストもそこまで高くないらしく、HTMLの代替にもってこいだそうです。

 

Slimの環境

Rubyのgemなので、いつものgem install すればOK

 

f:id:chuck0523:20150812204833p:plain

む!You don't have write permission for the ... とのこと。書き込み権限がない…!

sudo で再実行。

f:id:chuck0523:20150812204919p:plain

うん!OK!

 

参考にしたサイト↓

MacでRuby on Railsを使うおさらい-RubyGemsのアップデート-|こんな感じ。その2

 

slimのコマンドの名前はslimrbというらしい。ちょっと長い…w

slimファイルをHTMLファイルに変換するには以下のコマンドを実行。

slimrb -p path/to/sample.slim > path/to/sample.html

うーん、あいだの「>」って必要かな??笑

たしかSassのコンパイルでは、ファイルの区切りは:(コロン)でしたよね。ややこしや…

 

Slimを書く

まずはいつもどおりHTMLを書いてみます。

f:id:chuck0523:20150812205710p:plain

 

次に同じ内容をSlimを書いていきます。

f:id:chuck0523:20150812210318p:plain

こんなにもスッキリしました。HTMLじゃないみたいですね!

 

コンバート(変換)コマンドを入力。

f:id:chuck0523:20150812210400p:plain

 

そして変換後のHTMLがこちら。

f:id:chuck0523:20150812210428p:plain

見事にHTMLに変換されていますヽ(=´▽`=)ノ

 

Slim文法

1,通常のHTMLから<, >, /> を除去

要は、タグ名をそのまま書きます。<img />ではなく、imgとそのまま書くことができます。

また、id名やclass名は、CSSのように#, .が使えます。

 

2.doctype

DOCTYPE宣言はdoctype htmlと書きます。

 

3.テキストと|(パイプ)

シンプルなテキストはタグの後にスペースをおいて記述します。

f:id:chuck0523:20150812211901p:plain

 

複数行に渡るテキストは|(パイプ)の後に書きます。

f:id:chuck0523:20150812211931p:plain

シンタックスは合ってるはずなのに、カラーリングがおかしい???左下のtestが赤い)

 

4.コメント

2種類のコメントがあり。

/ このコメントは変換後表示されない

/! このコメントは変換後、HTMLコメントになる

 

基本的な使い方はこんなところでしょうか。

もちろん、通常のHTMLタグを埋め込むこともできます。

こう書くと、

f:id:chuck0523:20150812212330p:plain

 

こうなる。

f:id:chuck0523:20150812212347p:plain

 

通常の書き方が許容されてるのはいいですよね。Sassも通常のCSSで書いても問題ないわけですし。

こういう便利ツールって、移行へのモチベーションが問題だったりするので、ハードルを下げてくれる意味では助かりますね!

 

まとめ

最近つかい始めた便利ツールに、マークダウンとSassがあります。これらのツールは必須というわけではないけど、できたら便利。求人でも「Sass, Compass, Slimできたら尚良し」みたいに書いてありますし(たまに)

でも、それらが使えるようになったいま、便利ツールなしではちょっと物足りないですね!Slimもまだ始めたばかりですが、慣れてきたらなかなか強力な武器になりそうな予感がします。

他にもまだまだ便利な文法があるみたいなので、また次回「応用編」をお届けしたいと思います(`・ω・´)ゞ

 

qiita.com

 

では!chuckでした。

 

書いたコード

gist10da6d6ca63a736e956d

 

FollowMe!