どうも！chuckです。
いきなり私事ですが、最近は転職に興味アリアリですｗ 求人を眺めているとやっぱりフロントエンドエンジニアになりたいな！と思う次第です。
そこで！今回はHTMLを高速で記述できると噂のslimを使ってみたいと思います。
注意書き
今回の学習は、ほぼQiitaの転写になります。もしこのページを見て学習の参考にしたいという方がおられましたら、本家を訪問することをオススメします。
Slim（スリム）とは
・拡張子は.slim
・Ruby製のテンプレートエンジン
・高速、軽量
・インデント必須
とのことです。
タイプ数が減り、見通しが良くなり、学習コストもそこまで高くないらしく、HTMLの代替にもってこいだそうです。
Slimの環境
Rubyのgemなので、いつものgem install すればOK
む！You don't have write permission for the ... とのこと。書き込み権限がない…！
sudo で再実行。
うん！OK！
参考にしたサイト↓
MacでRuby on Railsを使うおさらい-RubyGemsのアップデート-｜こんな感じ。その２
slimのコマンドの名前はslimrbというらしい。ちょっと長い…ｗ
slimファイルをHTMLファイルに変換するには以下のコマンドを実行。
slimrb -p path/to/sample.slim > path/to/sample.html
うーん、あいだの「>」って必要かな？？笑
たしかSassのコンパイルでは、ファイルの区切りは：（コロン）でしたよね。ややこしや…
Slimを書く
まずはいつもどおりHTMLを書いてみます。
次に同じ内容をSlimを書いていきます。
こんなにもスッキリしました。HTMLじゃないみたいですね！
コンバート（変換）コマンドを入力。
そして変換後のHTMLがこちら。
見事にHTMLに変換されていますヽ(=´▽`=)ﾉ
Slim文法
1,通常のHTMLから<, >, /> を除去
要は、タグ名をそのまま書きます。<img />ではなく、imgとそのまま書くことができます。
また、id名やclass名は、CSSのように#, .が使えます。
2.doctype
DOCTYPE宣言はdoctype htmlと書きます。
3.テキストと｜（パイプ）
シンプルなテキストはタグの後にスペースをおいて記述します。
複数行に渡るテキストは｜（パイプ）の後に書きます。
（シンタックスは合ってるはずなのに、カラーリングがおかしい？？？左下のtestが赤い）
4.コメント
２種類のコメントがあり。
/ このコメントは変換後表示されない
/! このコメントは変換後、HTMLコメントになる
基本的な使い方はこんなところでしょうか。
もちろん、通常のHTMLタグを埋め込むこともできます。
こう書くと、
こうなる。
通常の書き方が許容されてるのはいいですよね。Sassも通常のCSSで書いても問題ないわけですし。
こういう便利ツールって、移行へのモチベーションが問題だったりするので、ハードルを下げてくれる意味では助かりますね！
まとめ
最近つかい始めた便利ツールに、マークダウンとSassがあります。これらのツールは必須というわけではないけど、できたら便利。求人でも「Sass, Compass, Slimできたら尚良し」みたいに書いてありますし（たまに）
でも、それらが使えるようになったいま、便利ツールなしではちょっと物足りないですね！Slimもまだ始めたばかりですが、慣れてきたらなかなか強力な武器になりそうな予感がします。
他にもまだまだ便利な文法があるみたいなので、また次回「応用編」をお届けしたいと思います(｀･ω･´)ゞ
では！chuckでした。
書いたコード
FollowMe!
slim公式より pic.twitter.com/9KDNHAphiv
— タク(chuck) (@chuck0523) 2015, 8月 12
