LOADING

デザイナーこそテンプレートエンジンを使おう – Slim編

2017-01-07 | Coding

Slimとは

Slimは最近世間を騒がせているテンプレートエンジンと呼ばれるもののひとつです。デザイナーがテンプレートエンジンを使うことによって静的なコードを簡単に、より早いスピードで書くことが出来ます。また、HTMLを直に書いたときと比べて圧倒的にコードの量が少ないため、不具合を減らすことも出来、楽に運用することができるようになります。(以下抜粋)

Slim is a template language whose goal is to reduce the view syntax to the essential parts without becoming cryptic. It started as an exercise to see how much could be removed from a standard html template (<, >, closing tags, etc…). As more people took an interest in Slim, the functionality grew and so did the flexibility of the syntax.
Slim はview の構文の無駄を出来る限りなくすことを目指したテンプレートエンジンです。元々は標準的な HTMLからどれだけ無駄を削ぎ落とすことができるか確かめるところからSlimは生まれました(<, >, 閉じタグなど)。 その後、多くの人が Slim に興味を持ったことでSlimの機能と柔軟な構文は進化を続けてきました
引用元: github

SlimのファイルにSlim特有の文法でコードを書いていき、最終的にはそれらをHTMLにコンパイル(変換)します。Slimで書いたコードをエンジニアのメンバーにそのままRailsやPHPなどのプロジェクトに組み込んでもらえれば最高なのですが、そうでない場合(.htmlでの納品をお願いされた場合)でも、Slimでコードを書くことによって様々なメリットを享受することができます。

導入コスト

導入コストは大したことありません。以下の3つくらい。

  • 1. テキストエディタをSlimに対応させる
  • 2. Slimのインストール
  • 3. Slimの文法を覚える
  • 4. .Slimから.htmlに変換できるようにする

1.テキストエディタをSlimに対応させる

普通のテキストエディタだと、最初からSlimに対応していないため、以下のように黒一色で表示されてしまうため非常に見にくいし効率的に作業することが出来ません。使っているテキストエディタを外部のプラグインなどを使ってSlimのシンタックスハイライトに対応させましょう。

Atomの場合

Atomの場合はこちらのパッケージを入れることでSlimのシンタックスハイライトが可能です。

Atom Slim Syntax Highlighting
Codaの場合

プラグインをインストールしましょう

https://panic.com/coda/plugins.php?id=82

Slimのインストール

Macの場合、アプリケーション>ユーティリティ>ターミナルを起動して、以下のコードを入力すればOKです

3.Slimの文法を覚える

これがすっごく大変なんじゃないかといつも聞かれますが、そんなことはありません。Slimで便利にできることはありますが、下のコードを見比べて”もう<>とを書かなくていいのか!!”と思ってくれればそれでいいです。追々Slimに慣れてきてから本格的に色々なことを学んでいけばいいと思います。

Slim
HTML

4.SlimからHTMLに変換できるようにする

様々な方法があるのですが、ターミナルとかに馴染みがないという方はPrepropsというツールがおすすめです。プロジェクトを登録してしまえば、Slimを作成、編集すると自動的にHTMLを生成、更新してくれるツールです。

使うといいこと

他にも数多くのメリットがあるかもしれませんが、デザイナーとして働いてきた僕がSlimを導入して感じたメリットは以下の3つです。

  • 1. コードがきれいになる
  • 2. プログラムっぽいことができる
  • 3. 共通パーツを切り離すことができる

1.コードがきれいになる

1-1. 無駄な要素を書かなくていい

先程紹介したように、Slimでは<>とを書く必要がなくなるため、非常にすっきりした印象のコードを書くことが出来ます。また、idやclassなどもcssのように#や.で書くこともできます。

Slim
HTML
1-2. 強制的にインデントに気をつかうようになる

Slimではインデントという行頭の空白が重要になってくるため、どんなにがさつな人でもこのようなコードを書くことがなくなります。

Slim
すっきり
HTML
こんなコードは二度と書けなくなります

2. プログラムっぽいことができる

いわずもがな、ハッシュやループなどを使って、コード量を劇的に減らしたり、変数、配列を使ってメンテナンスしやすいコードを書くことも出来ます。今回は省略。

3. 共通パーツを切り離すことができる

”共通パーツを切り離す”という言い方が適切かどうかは微妙なところですが、、、。例えば、上の画像のように4ページのウェブサイトがあったとしましょう。これら全てのページにHEADERというパーツは存在します。普通にHEADER内のテキストを変更しようとすると、4つのそれぞれのhtmlファイルを開いて合計で4回も同じテキストを書き直さなければなりません。数十ページにわたるサイトだったら…なんて考えたくもありません。

Slimを使うことで、上図のようにHEADERというパーツを切り離して1つのファイルとして持っておくことで、このような問題を抱えなくて済むようになります。

最後に

今回はテンプレートエンジンのざっくりとした概要と、導入することによるメリットをデザイナー目線で書きました。デザイナーの方に”意外と簡単そう”、”やってみようかな”と少しでも思ってもらえれば幸いです。

質問などありましたらTwitterでDMくだされば極力返します。

共有よろしくおねがいします!