hamlからslimに移行してみた話

こんにちは。フロントエンドエンジニアの頼本です。

マネーフォワードでは、当エンジニアブログの過去記事「haml2slim でハマった点とその解決方法」を投稿後、コーディングの効率化・保守性・コードの統一性などの観点から、hamlからslim移行をする事に決めました。

本日は、上記記事以外に、実際に移行してみてハマった点・起きた問題と解決策・hamlからslimへの置き換え方をご紹介したいと思います。 　

前提

対象

まず手始めにMFクラウド会計のログイン前コンテンツをhamlからslimに移行しました。

ファイル総数は全部で200ファイルくらい

部分テンプレートを含むので、実際のページ数よりはボリュームが多いです。

hamlからslimに置き換えに使ったgem

• haml2slim

haml2slimを使えば、拡張子から文法まで一括で変換してくれます。 　

haml2slimでslimに置き換え

まずはhaml2slimのgemを追加します。

gem 'haml2slim'

これでbundle installするとhaml2slimが使えるようになります。

haml2slimの使い方

ターミナルで以下のコマンドを叩くだけです。

for i in file_directory/*.haml; do haml2slim $i ${i%haml}slim && rm $i; done

file_directory部分に、置き換えたいファイルのディレクトリを指定して実行すると、該当のhamlファイルがslimファイルに置き換わり、記法もslim記法に変換されます。 　

以上！終わり！

と、なれば良かったのですが、そんな簡単なわけもなく、置き換える際に起こった問題をいくつかご紹介します。 　

起きた問題と解決策

複数行にまたがるコードは2行目以降が文字列扱いされる

# 適用前
= link_to 'link_text', link_path, class: 'class-name',
          onclick: "ga('xxx','xxx')

# 適用後                    
= link_to 'link_text', link_path, class: 'class-name',
  | onclick: "ga('xxx','xxx')

[解決策]

対象も少なく、機械的に修正するより手で直すほうが早かったので、手動修正。 　

>や<を取り除く必要がある

hamlでは、html出力時の改行を取り除くために、タグの後方に'>'や'<'を付けますが、slimでこの記述はhamlとは真逆の挙動となり、'>'や'<'があると改行が入るため、これを取り除く必要があります。

[解決策]

>、<でgrepして置換。ファットアローの記述がある場合には、その記述は対象外とする。 　

文字列内の変数展開やリンクが正しく置き換わらない

# 適用前：変数
"#{variable}テキスト"
# 適用前：リンク
テキスト#{link_to 'link_text', 'link_path'}テキスト

# 適用後：変数
# こなったり
"#{variable テキスト"
# こうなったり
"# variable}テキスト"
# こうなったり
"# variable テキスト"
# 適用後：リンク
テキスト# link_to 'link_text', 'link_path'}テキスト

決まったパターンがあるわけではなく、このようなパターンで置き換わる事があります。 一貫性がなく頭の{がなかったり、後ろの}が付かなかったりします。 後ろの}がないパターン以外は、文字列として扱われるためエラーにならないので、この解決策が一番困りました。

[解決策]

# （半スペ）でgrep。 #と半スペで書けるコードは恐らくないので、この方法で対象箇所を洗い出し、#{variable}へ置き換えました。 ※hamlではコメントが#で書けますが、slimに置き換えた時点でこのコメントは/となっているので問題ありません。 　

javascript:内の記述が文字列扱いされた

SNSのソーシャルボタンを使用している箇所でViewに直接javascriptを書く場面があり、Viewに直接javascriptを書いている箇所があった。この場合はjavascript内のコードが文字列扱いされる。

# 適用前
javascript:
  $(function(e) {
    var ...     

# 適用後
javascript:
  | $(function(e) {
  | var ...

[解決策]

対象も少なく、機械的に修正するより手で直すほうが早かったので、手動修正。 　

作業に使った時間

• 約1人日 コードのリファクタを合わせて行ったので、約1人日かかりましたが、単純にslim化するだけであればもっと早く終わったでしょう。 　

  最後に

  上記の問題は、必ずしも起きるわけではなく、コードの内容によって、なったりならなかったりするのが厄介な点ですが、何処かで誰かの参考になれば幸いです。。。

マネーフォワードでは、カイゼン大好きなフロントエンドエンジニアを募集しています。 ご応募お待ちしております。

【採用サイト】 ■『マネーフォワード採用サイト』　https://recruit.moneyforward.com/ ■『Wantedly』　https://www.wantedly.com/companies/moneyforward

【公開カレンダー】 ■マネーフォワード公開カレンダー

【プロダクト一覧】 ■家計簿アプリ・クラウド家計簿ソフト『マネーフォワード』　https://moneyforward.com/ ■家計簿アプリ・クラウド家計簿ソフト『マネーフォワード』　iPhone,iPad ■家計簿アプリ・クラウド家計簿ソフト『マネーフォワード』　Android ■クラウド型会計ソフト『MFクラウド会計』　https://biz.moneyforward.com/ ■クラウド型請求書管理ソフト『MFクラウド請求書』　https://invoice.moneyforward.com/ ■クラウド型給与計算ソフト『MFクラウド給与』　https://payroll.moneyforward.com/ ■消込ソフト・システム『MFクラウド消込』　https://biz.moneyforward.com/reconciliation/ ■マイナンバー対応『MFクラウドマイナンバー』　https://biz.moneyforward.com/mynumber