上村 光星

Sass 3.3で追加された新しいデータタイプ「マップ」まとめ解説

sass-1前回の記事では、Sass 3.3で追加される「&」の新機能と@at-rootについて解説しました。今回は新しいデータタイプの「マップ」について解説します。

マップは色々な使い道があると思いますし、使い方によってはかなり便利なものですので、ライブラリを作っている方などは特に覚えておくと良いと思います。

マップとは

マップは任意の名前と値のペアが集まったもので、名前をキーにして値を設定したり、取り出して使います。

マップの書き方ですが、名前と値をコロン(:)で区切り、複数記述する場合はカンマ(,)で区切り、それらを丸括弧(())で囲みます。CSSのスタイルの書き方とちょっと似ていますね。

マップの値には、マップも含めたすべてのタイプのデータを書くことができます。

Sass 3.3よりも前までは、複雑なデータ構造を作るにはリストを使って頑張るしかありませんでした。 ですが、マップを使えば、より分かりやすく書くことができますし、専用の関数もあるのでデータを扱いやすくなります。

マップ用の関数

マップ用の関数は5つあります。

  • map-get($map, $key)
  • map-merge($map1, $map2)
  • map-keys($map)
  • map-values($map)
  • map-has-key($map, $key)

map-get()

map-get()は、指定したキーの値を取得する関数です。

次のようにして使います。

これをコンパイルすると次のようになります。

指定したキーがマップにない場合は、nullが返されます。

また、map-get()を複数回使うことで、ネストされたマップから値を取得することができます。

これをコンパイルすると次のようになります。

何回もmap-get()を書くのは正直面倒くさいですし、コードが読みづらいですね。。

map-merge()

map-merge()は、2つのマップをマージする関数です。

基本的には1つ目のマップの後に、2つ目のマップが追加されますが、同じキーがある場合は2つ目のマップの値で上書きされます。

この場合、$new-mapの値は次のようになっています。

key1は両方のマップにあるので、2つ目のマップの$map2の値が使われています。 そして、key3の後に$map2にあったkey4とkey5が追加されています。

このような特徴を利用して、ライブラリ内の設定用マップなどを自身のプロジェクトに合わせて上書きするといったこともできます。

map-keys()

map-keys()は、1つのマップ内のすべてのキーをカンマ区切りのリストで返す関数です。

それではサンプルを見てみましょう。

これをコンパイルすると次のようになります。

ネストされたマップ内のキーを取得するには、map-get()を併用する必要があります。

これをコンパイルすると次のようになります。

map-values()

map-values()は、1つのマップ内のすべての値をカンマ区切りのリストで返す関数です。

使い方はmap-keys()と同じです。

map-has-key()

map-has-key()は、1つのマップ内に特定のキーがあるかどうか調べる関数です。

戻り値はtrueかfalseです。

この場合、$has-key1の値は true になっています。

リスト用の関数

マップにはリスト用の関数も使うことができます。

  • nth()
  • length()
  • zip()
  • join()
  • append()
  • index()

使い方とコンパイル結果を簡単にまとめると次のようになります。

@eachで使う

@eachはSass 3.3から複数の変数を指定できるようになったので、マップのキーと値を別々の変数に入れて利用することができます。

これをコンパイルすると次のようになります。

これまでと比べて、断然扱いやすいものになっていると思います。

可変長キーワード引数

マップを可変長引数のような感じでミックスインや関数に渡すことができます。 可変長引数と可変長キーワード引数のそれぞれの場合を、次のミックスインを使って解説します。

まずは可変長引数を使った場合です。

$configの1つ目の「1px solid #ccc」が$borderに、2つ目の「#fff」が$bgColorに、そして3つ目の「#333」が$colorに渡されます。 これをコンパイルすると次のようになります。

次にマップを使った可変長キーワード引数の場合です。

コンパイル結果は可変長引数の場合と同じになります。

マップを使った場合は、キーと同名のミックスインの引数に値が渡されます。キー「color」はミックスインの引数の「$color」に対応するということです。 そのため、マップ内のキーをミックスインの引数の順番に合わせて記述する必要はありません。

ちなみに、可変長引数と併用することもできますが、その場合は可変長キーワード引数を可変長引数の後に記述する必要があります。

また、Sass 3.3から追加されたkeywords()関数を使って、可変長キーワード引数をマップに変換する関数をつくることができるようです。

この場合、$mapの値は (key1: 10px, key2: 20px) になっています。

マップのような構造のリスト

リストで2つの値をペアにして、マップのようにして使っていた場合、そのリストに対してマップ用の関数を使うことができます。

ただし、将来的にはこのようなリストに対してマップ用の関数を使うことはできなくなるようで、コンパイル時には警告が出されます。Sass 3.3が使えるようになったら、マップに切り替えていった方がが良さそうです。

おわりに

新しいデータタイプ「マップ」を解説しました。筆者としては、自前のライブラリ内のリストでなんとかしている箇所をとりあえず置き換えるつもりですが、みなさんはどのように使われますか?

Powered byNTT Communications

tag list

アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Mozilla Node.js PhoneGap Polymer React Safari SkyWay TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket