erbからSlimに、SCSS記法からSass記法に移行した理由

erbからSlimに、SCSS記法からSass記法に移行した理由

tezukaryo エンジニアリング

こんにちは、エンジニアの手塚です。

今回はRailsで開発しているIGNITIONで、SlimとSass記法へ移行した際の理由・方法・つまずいた点・所感を紹介します。

SlimとSass記法とは?

SlimとSass記法の簡単な説明・記述例を紹介します。

Slimとは

同じテンプレートエンジンのHamlから、更に記述量を削ったテンプレートエンジンです。速度もHamlより速くなっていると言われています。

記述例を見ていただくとわかりますが、非常にシンプルな形で記述されています。

記述例

Slimの場合

dl.contributors
  - contributors.each do |c|
    dt.role
      = contributed_by c['role']
    dd.name data-id="#{c['id']}"
      = c['name']

erbの場合

<% contributors.each do |c| %>
<%= contributed_by c['role'] %>
<%= c['name'] %>
<% end %>

Sass記法とは

元々Sassで採用されていた記法です。Sass 3.0からSCSS記法でも記述ができるようになり、SCSS記法のほうが敷居が低いので採用されているケースが多いかもしれません。

Sass記法もSlimと同じように、インデントベースで書けるため記述が短くシンプルにすることができます。

具体的な差異

  • 波括弧{}が不要
  • セミコロン ; が不要
  • コロン : の後に半角スペースが必須
  • @mixinが =
  • @includeが +
  • 拡張子が.sass

記述例

Sassの場合

=huga
  border: 1px solid #000

.foo
  color: red
  .bar
    +huga

SCSSの場合

@mixin huga {
  border: 1px solid #000;
}

.foo {
  color: red;
  .bar {
    @include huga;
  }
}

移行するメリット

Slim・Sass記法共にメンテナンスコストが下がるという共通のメリットがあります。具体的には下記のようにまとめてみました。

Slim・Sass記法に移行するメリット

  • CoffeeScriptと同じインデントベースなので、頭を切り替えるコストが減る
  • 記述量が減りコードの可読性がよくなる
  • コードのメンテナンスコストが下がる(具体的には閉じタグがないのでコンフリクトした時にタグ・波括弧の閉じ忘れがなくなるなど)
  • 現在のerbよりもレンダリングが速い(Slimのみ)

移行方法

Slim

html2slimというgemをインストールします。

$ rbenv exec gem install html2slim

下記のように対象のファイルを指定してコマンドを実行すると、同じ階層に target.html.slim というファイルが生成されます。

$ erb2slim target.html.erb

Railsプロジェクト向けにワンライナーも用意しました!Railsプロジェクトのルートディレクトリで実行するとerbファイルがSlimファイルに変換されます。(ファイルの削除はセルフでお願いします)

$ find app/views -name "*.erb" -exec bundle exec erb2slim {} \;

Sass記法

SCSSのSass記法への変換ですが、Sassにて sass-convert というコマンドが用意されているのでこちらを利用します。

下記のように、第1引数にターゲットのファイルを、第2引数に出力ファイル名をセットして実行します。

$ sass-convert target.scss target.sass

Slimと同じくRailsプロジェクト向けにワンライナーを用意しました!Railsプロジェクトのルートディレクトリで実行していただくと、scssファイルがsassファイルに変換されます。(scssファイルは削除されます)

find ./app/assets/stylesheets/* -name '*.scss' -type f | while read -r d; do path=${d%.*}; sass-convert $d "${path}.sass"; rm $d; done

つまずいた点

Slim

styleタグの中で変数を展開していると正しくコンバートされない

あまりないケースだと思うのですが、下記のように背景画像を変数で展開した場合に、

<%= article.headline %>

このように展開されてしまうので、手で修正をしなくてはいけませんでした

| 
= article.headline

scriptタグに対応していない

scriptタグを使っている部分を個別で下記のように対応をしなくてはいけませんでした

javascript:
  $(document).on("click", ".button", function(){
    console.log("hoge")
  })

ネストした条件分岐の部分の変換がうまくいかない

このようなViewをconvertした場合に、

<% if article_page? %>
  <% unless internal_access? %>
    

hogehoge

下記のようにネストしていない状態に変換されてしまうので、個別に修正する必要があります。

if article_page?
unless internal_access?
  p
    | hogehoge

Sass記法

sass-convertが優秀すぎて、sass-convert後特別な対応を何もせずに移行ができました。

移行した所感

チーム全体が今回の移行に前向きだったのですんなりと導入できました。

実際にそれで開発を進める上でも、HTML/CSS共に同じインデントベースの記法に切り替えたので、頭の切り替えコストもないので快適に、かつコード全体の可読性も増し、閉じタグ忘れがなくなる・コンフリクト時のマージの手間が軽減でき、開発をより本質的な部分に注力できるようになったと思います。

まとめ

いかがでしたでしょうか。初期の導入コストはありますが、すぐにそのコストを取り戻すぐらいにメリットを実感していただけると思います。

日々開発をしているプロジェクトであれば、是非導入をオススメいたします!

nanapiでは新しいデザイナー・エンジニアを募集しています

nanapiでは、サービスに愛のあるデザイナー・エンジニアを募集中です!私達と一緒に働いてみませんか?

株式会社nanapi(ナナピ) | 募集要項 エンジニア
株式会社nanapi(ナナピ) | 募集要項 デザイナー