5分で書ける！テンプレートエンジンSlimのススメ
こんにちわ。ドワンゴでデザイナーをしているosyosamaです。日々己を磨いてデザイナーの天下を目指しているのですが、最近は天下からは遠のく一方です。近道があったら誰か教えてください。
さて、皆さんはこんな事を思った事はありませんか？
- HTMLを書くのがめんどくさい！
- マークアップ速度をもっと高めたい！
- もっと楽しくHTML書きたい！
上記に当てはまるようなあなたにオススメしたいのがSlimです。HTMLが非常にスマートに美しくなってスピードも楽しさも劇的にアップ間違い無し。「学習コストがかかりそう！」と思った方もいらっしゃるかもしれません。実はHTMLを書ける人なら5分もあれば書けるようになるくらい簡単です。
そもそもSlimってなに？
Slim は Rails3 および 4 に対応した高速, 軽量なテンプレートエンジンです。すべての主要な Ruby の実装でしっかりテストされています。 私たちは継続的インテグレーションを採用しています。(travis-ci)
Slim の核となる構文は1つの考えによって導かれます: “この動作を行うために最低限必要なものは何か”。
Slim は Rails3 および 4 に対応した高速, 軽量なテンプレートエンジンです。すべての主要な Ruby の実装でしっかりテストされています。 私たちは継続的インテグレーションを採用しています。(travis-ci)
Slim の核となる構文は1つの考えによって導かれます: “この動作を行うために最低限必要なものは何か”。
SlimはHTMLから<>や閉じタグなどを削り、最低限必要なものだけを残した、非常にシンプルなテンプレート言語です。
Slimの特徴
非常にシンプルで美しい構文
Slimの基本的な構文は以下のようになります。
doctype html
html
head
title ドワンゴクリエイターズブログ Slimのススメ
meta name="keywords" content="Dwango,Slim"
meta name="author" content="niconico"
link rel="icon" type="image/png" href=file_path("favicon.png")
javascript:
alert('各種コードの埋め込みに対応しています。')
body
h2 ドワンゴクリエイターズブログ Slimのススメ
#content
p
| Slimだと見栄えがすっきりします。
== yield
- if nicoitems.any?
table#items
- for item in nicoitems
tr
td.name = item.niconico
td.price = item.douga
- else
p
| ニコアイテムは見つかりませんでした。
div id="footer"
== render 'footer'
| Copyright © #{@year} #{@author}
HTMLとの違いは一目瞭然ですね。Slimはインデントと簡略構文が特徴となっています。シンプルなために、メンテナンス性も高く…そしてなにより見た目も美しい。書くことがすごく楽しくなって来る事間違いなしです！
HTMLに慣れてしまっているデザイナーの方が、パッと見るとかなり抵抗があるかもしれません。（私も初めて見た時は「え…なにこれ怖い…」と思いました。）しかし実際に書き始めてみるととても簡単。以下の簡単な記述ルールを頭に入れておくだけですぐに書き始められます。
|
早い！軽量！
Slimは他のテンプレートエンジンに比べてより高速に、そしてより軽量に動作するという事ですね！ デザインする上でそこまで気にしないポイントかもしれませんが、迷った時の決め手になるのではないかなと思います。何と言ってもWebも人生もできるだけ負担や負債は背負わずに生きていくことがポイントですしね。（※私は負債だらけの人生なのでスリムな生き方誰か教えてください…。）
Ruby製のテンプレートエンジン
Ruby製のテンプレートエンジンのため、コード内に簡単にRubyを導入する事ができます。ダッシュ-は制御コードとして使われ、続く文章はRubyのコードになります。これがとても便利。使いこなせるようになると、業務効率があがること間違いなしです！
|
主要なフレームワークでサポートされている
RailsやSinatora、Middlemanなどの主要なフレームワークでサポートされているため、導入がすごく簡単です。導入に数分感時間をもらえればあなたのPCでもすぐSlimが動くようになります。
Middlemanの導入方法はこちらの記事でとても丁寧に導入方法が紹介されているので是非！
静的webサイト作成の強い味方「Middleman」
Slim導入のメリットとデメリットを考えてみる
実際は上に書いてあるような特徴だけをみてすごい便利そう！だけで導入するわけにはいきませんよね。（なかなかそんな事はありませんが）中規模〜大規模案件だと軽い気持ちで一度導入してしまったらなかなか元には戻せませんので、しっかりメリット・デメリットを考えていきましょう！！
1. 文字タイプ量
タイピングに費やす時間が減るという圧倒的なメリットがあります。しかし、気をつけて置きたいのはHTMLでもEmmet等に代表される入力補完を使っていけば相当文字タイプ量を削る事ができます。
EmmetはSlimにも対応しています。実際に書き比べて試し見てるのも大事な事です、Slim+Emmetを使った場合とHTML+Emmetを使った場合のどちらが自分／チームメンバーには合っているかしっかり検討したいですね。
2. Rubyの使用有無
ここがSlimを使うべきかどうか、1番のポイント！
私たちデザイナーには一見難しそうですが、簡単に理解できる範囲のifやforあたりを使っていくだけ相当効率が良くなるはずです。Slimを使うと決めたら固い頭をフル稼働してRubyもゴリゴリ書いていきたいですね。
3. 見栄え
僅差で2番目のポイント！非常にシンプルになるため、コード全体の見通しが良くメンテナンス性が相当あがります。
気をつけたいのは、これはデメリットにも繋がっていてインデントだけで構造をくみ上げていくため、ページが複雑になり階層が深くなればなるほど、どの階層を書いているのか分かり辛くなってくると思います。これはなかなか良い解決方法が見つからなく（何か便利な方法教えてください！）、深い階層にはきちんと/でコメントを入れたり工夫していきたいですね。
4. HTMLへの出力
静的サイトで導入する場合はHTMLへコンパイルが必要です！
一般的なWebサーバーにアップするにはアップ前に.slimファイルを.htmlファイルへ変換しないといけません。手動で毎回やる事もできますが効率を考えたら自動化したいですね。
GruntやGulpといったタスクランナーを導入して、.slimから.htmlの変換の手間を無くしていきましょう。
Slimの導入方法
実際に触ってみたい！と思ったらどうすればいいのか。簡単に導入できるのでサクッと紹介しておきます。
1. Rubyのインストール
SlimはRubyのgemとして配布されています。（プラグインやフレームワークといった拡張機能を総括してgemと読んでいます。）MacユーザーであればRubyはインストールされていますが、バージョンは最新にしておきましょう。
2. Slimのインストール
gemでslimをインストールします。
gem install slim
gemのインストールが完了したら、きちんとインストールされているか確認しましょう。
slimrb --help
ヘルプが表示されれば、問題なくインストールされている状態です。後は拡張子に.slimをつけてファイルを作成するだけで準備は完了！
3. HTMLファイルへの変換
.slimファイルが用意できたら以下のコマンドでHTMLに出力できます。-pオプションをつける事で改行のある読みやすいHTMLで出力してくれます。
slimrb -p path/to/sample.slim path/to/sample.html
番外. 実際の運用方法
基本的には以上でインストールが終わったのですが、slimrbコマンドはあくまでSlimの動作テストに使いくらいになると思います。
実際にSlimを導入すると決めたら、RailsやSinatora、Middlemanといったフレームワークや、GruntやGulpといったタスクランナーと一緒に運用していきましょう。
Middlemanの導入紹介はこちらで分かりやすく解説してくれています！
静的webサイト作成の強い味方「Middleman」
さいごに
<>や閉じタグがなく、あまり見慣れない構文に抵抗がある方もいらっしゃるかもしれませんが、すぐ覚えられてすぐ好きになる。まさにそんな言語だと思います。今よく利用されているテンプレートエンジンといえば、HamlやJade/EJS/ECT とあげていったらきりがないですね。皆さんも何を使えばいいのか悩む場面があるはずです。悩んだ際にちょっとだけ、Slimを検討してみてはいかがでしょうか。
今すぐSlimを現場で活用してみたい？？そんなあなた！ドワンゴには自ら提案して、自分の好きなフロントエンド環境を構築していける素敵な環境が揃っています。ドワンゴのデザイナーになってあなたのその技術を活用してみませんか。
