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

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

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

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

前提

対象

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

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

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

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

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

Pocket