- アーキテクト(バックエンド)
- プロダクトマネージャー
- カスタマーサポートMFK
- 他89件の職種
-
開発
- アーキテクト(バックエンド)
- 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、Sassを使って効率よくコーディングする方法(基礎編)
マネーフォワードでフロントエンドの開発をしています頼本です。
今回は、マネーフォワードがフロントエンドで採用していますHaml、Sassの基礎をご紹介します。
「Haml/Sassってなんぞや?」という方にへザックリ簡単に説明すると、Haml/SassとはHTML/CSSを効率的に書くための記法です。
百聞は一見にしかず!ということで、実際にコードを比較してみましょう。
完成形
※説明のためにブロックとテキストを分けて記述します。
▼HTMLの場合
テキストが入ります。
▼Hamlの場合
#hoge
%p.fuga テキストが入ります。
コンパイルすると出力される内容は同じですが、Hamlの場合は記述するコードがたったこれだけです!!
閉じタグ、id=”XXX”、class=”XXX”は基本的に書く必要がありません。
divタグもid、classを使う場合は省略できます。
どの表記が何の役割を果たしているかは以下の通り
| HTML | Haml |
| id | #(シャープ) |
| class | .(ドット) |
| 閉じタグ | なし(自動で付与) |
では次にSassを見てみましょう。
※当社ではSCSS表記を採用しているため、SCSS表記でご紹介します。
▼CSSの場合
#hoge{
border: 1px solid #ef7f1a;
}
#hoge .fuga{
color: #ef7f1a;
}
▼SCSSの場合
$mf_color : #ef7f1a;
#hoge{
border: 1px solid $mf_color;
.fuga{
color: $mf_color;
}
}
Sassでは子セレクタを親セレクタにネストして記述することができます。
また、CSSを書いているときに「こんな風に書けたらいいのに…」と思った事の大半が実現できます。(変数、演算、mixin、if、each、for…などなど)
CSSの「こんな風に書けたらいいのに…」の実現
では、「こんな風に書けたらいいのに…」のSass(SCSS)での実装について、一部ご紹介します。
変数
予め文字列を変数として定義する事ができます。
上記のように「$mf_color」に「#ef7f1a」を変数として定義して、border、colorで使用しています。
演算
四則演算に対応しており、演算を書けば自動計算してくれます。
▼SCSS
.hoge{
width: 100px - 10;
padding: 5px;
}
▼CSS
.hoge{
width: 90px;
padding: 5px;
}
mixin
コーディングをしていると何度も使うようなスタイルが数多く出てきます。
そのような場合は、予めmixinを定義しておく事で、テンプレートのようにしてスタイルを使えます。
@mixinで名前を定義し、@includeで定義したmixinを読み込みます。
▼SCSS
@mixin box-set{
margin-bottom: 10px;
padding: 10px;
}
.hoge{
@include box-set;
border: 1px solid #000;
}
※mixinを定義するだけでは、スタイルとして使用できません。必ず@includeして定義したmixinを読み込みましょう。
▼CSS
.hoge{
margin-bottom: 10px;
padding: 10px;
border: 1px solid #000;
}
mixin(引数)
mixinは引数を渡す事ができます。引数を使う事でカスタマイズ性、効率が一気に上がります。
また、引数はデフォルト値をセットする事もできます。セットしておくと、mixin読み込み時に省略できます。
▼SCSS
@mixin box-set($mb,$padding:10px){
margin-bottom: $mb;
padding: $padding;
}
.hoge{
@include box-set(20px);
border: 1px solid #000;
}
▼CSS
.hoge{
margin-bottom: 20px;
padding: 10px;
border: 1px solid #000;
}
以上が基礎部分のほんの一部分です。
私自身は、もう素のHTMLもCSSも書きたくありません…。そう思ってしまうくらいHaml、Sassは効率が格段に違います。
次回はさらに便利な点を案内しつつ、マネーフォワードではどのように使用しているかを紹介をします。