- プロダクトマネージャー
- アーキテクト(バックエンド)
- カスタマーサポートMFK
- 他91件の職種
-
開発
- アーキテクト(バックエンド)
- Railsエンジニア
- アーキテクト(フロントエンド)
- Webエンジニア
- エンジニアリングマネージャー
- バックエンドエンジニア/MFK
- フルスタックエンジニア
- MOpsエンジニア
- フロントエンドマネージャー
- バックエンドエンジニア
- Webフロントエンド
- Webエンジニア
- サーバーサイドエンジニア
- フロントエンジニア
- エンジニア@京都
- エンジニア@大阪
- エンジニア オープンポジション
- エンジニアマネージャー
- Rails@京都
- バックエンド@BFW
- Androidエンジニア
- iOSエンジニア
- SRE
- クラウドエンジニア
- SRE、インフラエンジニア
- テスト自動化エンジニア
- QAエンジニア
- エンジニアリング
- エンジニア職
- コーポレートエンジニア
- マーケティングエンジニア
- Webアナリティクスエンジニア
- SDET
- QA関連職種オープンポジション
- データアナリスト
- セキュリティエンジニア
- コミュニケーションデザイナー
- UIデザイナー
- プロダクトデザイナー
- デザイナーオープンポジション
- グラフィックデザイナー
-
ビジネス
- プロダクトマネージャー
- スクラムマスター
- プロダクトマネージャー
- 人事/人材開発・組織開発担当
- リスク管理
- グローバル採用担当者
- グローバル採用担当
- 金融コンプライアンス
- 新卒採用リクルーター
- エンジニア採用担当
- 中途採用担当
- 労務
- システム監査
- ビジネス採用担当
- 経営企画(予実・IR)
- HRBP
- 法務
- 債権管理/MFK
- セールス・事業開発
- 新規事業開発
- ビジネス職
- フィールドセールス
- セールスマネージャー候補
- インサイドセールス SDR
- インサイドセールス企画
- オンラインセールス
- SaaS営業、MFBC
- インサイドセールス MFBC
- セールス MFBC
- マーケター
- マーケティング
- サービス企画
- データマーケター
- BtoBマーケティングリーダー
- CRMスペシャリスト
- WEBマーケティング(B2B)
- Webマーケティング
- デジタルマーケター
- イベントマーケター
- コンテンツマーケ MFBC
- SEO MFBC
- その他
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出力時の改行を取り除くために、タグの後方に’>’や'’や'
[解決策]
>、<で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