【Slim】HTMLのメタ言語を触ってみる
こんにちは、しきゆらです。
今回は、HTMLのメタ言語であるSlimに触れてみます。
これまで、素のHTMLを書いていました。
HTMLは〈〉をたくさん書くのが面倒であったり、
構造の変更や少し複雑な要素を作る時はとても不便なことが多くありました。
しかし、調べてみると便利なものがたくさんありました。
今回出てくる「メタ言語」と言うものです。
メタ言語
簡単に言えば、ある言語を書くために
- 少しだけ機能を拡張
- 書きやすい構文
- もとの言語に変換可能
という特徴を持つものです。
有名なものでは、CSSに対するSassがメタ言語に当たります。
Slimの他にも様々なものがあります。
- pug: JS製。昔はJadeという名前だった。
- ERB: Rubyの標準添付。特にインストールしなくても使える。
- Haml: Ruby製。Slimとほぼ同じ機能を持つ。
- Slim: Ruby製。今回触る。
今回は、HTMLのメタ言語の一つであるSlimを触っていきます。
導入
Slimは、前述の通りRubyで出来ています。
Gemとして配布されているので、導入は簡単です。
# ターミナルから以下のコマンドでインストール gem install slim
また、Bundlerで管理する場合は、
# Gemfileに以下のように記載 gem 'slim' # ターミナルから、bundlerでインストール bundle install
使い方
doctype html
html
head
title Slim Test
body
h1 Hello Slim!
div#id.class 文字も入れられる。
div.hoge.fuga
| 1.複数行の入力は、こうやるよ。
br
| 2.複数行の入力は、これだよ。基本的には、普通のHTMLから<>を取ったものがslimです。
少し違うのは、idとclassはCSSのように#や.で指定します。(8行目参照)
また、複数行のテキストをタグの中に入れたい時は、11行目以降のあたりのようにします。
｜(パイプ)より頭が下がっているものすべてが、ひとまとまりのテキストとしてタグの中に入ります。
では、上記のファイルからHTMLに変換してみましょう。
上記のものを「test.slim」として保存します。
これをHTMLにコンパイルするときは、以下のコマンド。
slimrb -p test.slim test.html
変換した結果は以下の通り。
<!DOCTYPE html>
<html>
<head>
<title>Slim Test</title>
</head>
<body>
<h1>
Hello Slim!
</h1>
<div class="class" id="id">
文字も入れられる。
</div>
<div class="hoge fuga"></div>
1.複数行の入力は、こうやるよ。<br />
2.複数行の入力は、これだよ。
</body>
</html>
便利な機能
Slimには、Rubyのコードを埋め込むことが出来ます。
PHPのような使い方もできるわけですね。
構文は以下の通り。
基本は、-の後にRubyのスクリプトを書きます。
例えば、if文によって表示を切り替える場合は以下のような感じ。
- if true then p とぅるー - else p ふぉるす
結果は以下の通り。
<p> とぅるー </p>
同じような構造を繰り返し作りたい時は、以下のような感じ。
ul
- 10.times do |i|
li #{i + 1}回目の繰り返し結果は以下の通り。
<ul>
<li>
1回目の繰り返し
</li>
<li>
2回目の繰り返し
</li>
<li>
3回目の繰り返し
</li>
<li>
4回目の繰り返し
</li>
<li>
5回目の繰り返し
</li>
<li>
6回目の繰り返し
</li>
<li>
7回目の繰り返し
</li>
<li>
8回目の繰り返し
</li>
<li>
9回目の繰り返し
</li>
<li>
10回目の繰り返し
</li>
</ul>
Slimにおけるコメントは以下のとおりです。
Slim自体のコメントとHTMLのコメントの２種類があります。
/ Slimのコメント /! htmlのコメント
結果は以下の通り。
<!--HTMLコメント-->
SlimのコメントはHTMLには表示されないので、コードの意味等を書くにはちょうどいいかと。
基本はこんなところでしょうか。
これ以外にも機能がたくさんあります。
詳しくは、公式のREADMEにかかれているので、そちらを見てください。
今回はここまで。
おわり