> CSS・Sass > Sassで配列を使おう|マップ(連想配列)を徹底的に使いこなす!
Sassで配列を使おう|マップ(連想配列)を徹底的に使いこなす!

Sassで配列を使おう|マップ(連想配列)を徹底的に使いこなす!

SassはCSSを効率的に記述するために開発されたメタ言語(拡張言語)です。
Sassについての基礎知識は下記の記事で紹介しています。

Sassにおけるマップ(map)とは、「キー(key)」と「値(value)」のペアを格納するデータ構造のことです。
他の言語でいう連想配列やオブジェクトに相当し、Sassの中で変数を整理して管理するのにとても便利な仕組みです。
この記事では、Sassでマップ(連想配列)を利用する方法を徹底的に紹介します。

マップ(Map)とは?

Sassにおけるマップとは、キーと値のペアをセットで管理する連想配列です。
キー(インデックス)に文字列を利用し、値に対してわかりやすい名前をつけて保持することができます。

scss記述例|マップを定義

$theme-colors: (
// キー: 値; として記述する
  primary: #007bff,
  secondary: #6c757d,
  success: #28a745
);

マップを使うメリット

マップ(連想配列)を使うと、下記のようなメリットがあります。

  • 意味のある名前で値を管理できる(可読性が高い)
  • 順序に依存せず値を取得できる
  • 階層的な構造(多次元配列)でもわかりやすく対応できる
  • 繰り返し処理(@each)と組み合わせて効率的にCSSを生成できる
  • 色やサイズなど、複数の値を一括で管理・変更できる
  • マップ内で要素ごとの値の取得・追加・検索などの操作が可能

マップと似たデータ構造体として、リスト(配列)があります。
リストはキーではなく1から始まる数字のインデックス(順番)をもとに並べた配列です。
リストについての詳しい説明は下記の記事に紹介しています。

マップを定義する

マップを定義する方法は下記の通りです。

scss記述例

// 連想配列の場合
$colors: (
// キー: 値 primary: #ff5733, secondary: #4ECCA3, danger: #e74c3c ); // 多次元連想配列の場合 $themes: (
// キー: 値 dark: (
// キー: 値 background: #333, text: #eee #fff, // 値としてスペース区切りのリストを利用可能
sizes: ( 100px, 200px, 300px ) ), light: ( background: #eee, text: #333 #000, // 値としてスペース区切りのリストを利用可能
sizes: ( 150px, 300px, 450px ) // 値としてカンマ区切りのリストを使用する時は()で包む ) );

マップのセパレーターは常にカンマ区切り

Sassにおけるマップは、上記のようにキーと値のペアを常にカンマで区切って定義する必要があります。
この,は文法上必須であり、省略したりスペースで代用することはできません。

ただし、値の中にスペース区切りのリストを入れることは可能です。
値の中でカンマ区切りのリストを利用する時は()で包む必要があります。

リストのセパレーターについて、詳しくは下記の記事で紹介しています。

map関連関数とmapモジュール

Sassのマップについては、map-get()map-merge()などの関数がありますが、2025年現在では関数ではなくmapモジュールの利用が推奨されており、map関連の関数はおそらく今後廃止されるようになると思います。(参考:https://github.com/sass/sass/blob/main/accepted/module-system.md
既存のプロジェクトではmap関連関数を利用している場合もあると思いますが、可能であればmapモジュールの利用へ移行を行うと良いと思います。

マップから値を取得する

Sassのマップから特定の値を取り出すには、map-get()関数またはmap.get()メソッドのいずれかを使います。
どちらも同様の結果を返しますが、使い方と使い分けに注意が必要です。

【非推奨】map-get( $map, $key );

map.get()メソッドを利用する書き方への移行が推奨されています。

解説

  • $map … マップの配列名
  • $key … 取得したい値とペアになるキー。型も含めて完全一致で指定する必要がある。

scss記述例

$colors: (
  primary: #ff5733,
  "secondary": #4ECCA3, // キーは "secondary"(文字列)
error: ( danger: #ff0000, warning: #fefa51 ) // 値に更にマップが入る(多次元連想配列) ); $primary: map-get( $colors, primary );
// キーが完全一致するので成功:出力 ⇒ #ff5733 $secondary1: map-get( $colors, secondary );
// キーが完全一致しないのでエラーになる
$secondary2: map-get( $colors, "secondary" );
// キーが完全一致するので成功:出力 ⇒ #4ECCA3
$error-danger: map-get( map-get( $colors, error ), danger );
// ネストされているマップを複数回map-get()して値を取得:出力 ⇒ #ff0000

キーは型も含めて完全一致しなければなりません。文字列で定義したキーは文字列で指定しましょう。
※多次元連想配列の場合、map-get()を複数回利用することで値を取得できます。

【推奨】map.get( $map, $key1, $key2... );

Dart Sass推奨の書き方です。
sass:mapモジュールを読み込んだ上で利用しましょう。

解説

  • $map … マップの配列名。省略不可。
  • $key1 … 取得したい値とペアになるキー。型も含めて完全一致で指定する必要がある。省略不可。
  • $key2 … 取得したい値とペアになる第二のキー。型も含めて完全一致で指定する必要がある。省略可

scss記述例

@use "sass:map"; // mapモジュールをインポート

$colors: (
  primary: #ff5733,
  "secondary": #4ECCA3, // キーは "secondary"(文字列)
error: ( danger: #ff0000, warning: #fefa51 ) // 値に更にマップが入る(多次元連想配列) ); $primary: map.get( $colors, primary );
// キーが完全一致するので成功:出力 ⇒ #ff5733 $secondary1: map.get( $colors, secondary );
// キーが完全一致しないのでエラーになる $secondary2: map.get( $colors, "secondary" );
// キーが完全一致するので成功:出力 ⇒ #4ECCA3
$error-danger: map.get( $colors, error, danger );
// キーを続けて指定する。:出力 ⇒ #ff0000

キーは型も含めて完全一致しなければなりません。文字列で定義したキーは文字列で指定しましょう。
※多次元連想配列の場合、$key1に続けて$key2を記述することで値を取得できます。

マップに要素を追加・更新する

Sassのマップに後からキーと値を追加・上書きするには、map-merge()関数や、マップモジュールを利用したmap.set()メソッドまたはmap.merge()メソッドを使います。
これにより、より柔軟で再利用性の高いスタイル設計が可能になります。

【非推奨】map-merge( $map, ( $key1: $var1, $key2: $var2... ) );

値を追加したり更新することができる関数です。
map.merge()メソッドを利用する書き方への移行が推奨されています。

解説

  • $map … マップの配列名。省略不可。
  • $key1 … 追加または更新したいキー。既存のキーと完全一致する場合は指定したキーの値が更新される。省略不可。
  • $var1 … 追加または更新したい値。省略不可。
  • $key2 … 追加または更新したいキー。既存のキーと完全一致する場合は指定したキーの値が更新される。省略可
  • $var2 … 追加または更新したい値。省略可

※3つ以上のキー: 値ペアを追加・更新したい場合は、$key2: $var2の後に続けて,で区切って記述する。

scss記述例

$settings: (
  color: red,
  size: 16px
);

$settings: map-merge($settings, (weight: bold) );
// $keyが新規追加されるので値が追加される
// 出力:(color: red, size: 16px, weight: bold);

$settings: map-merge($settings, (size: 18px) );
// $keyが既存のキーと完全一致するので値が更新される
// 出力:(color: red, size: 18px, weight: bold);

$settings: map-merge($settings, (family: serif, color: blue ) );
// $keyが複数新規追加されるので複数の処理が行われる
// 出力:(color: blue, size: 18px, weight: bold, family: serif );

※キーが既存のキーと完全一致する場合は値が更新されます。
※キーが既存のキーと完全一致しない場合はキー: 値のペアが新規追加されます。

【推奨】map.set( $map, $key, $var );

Dart Sass推奨の書き方です。
sass:mapモジュールを読み込んだ上で利用しましょう。

map.set()メソッドでは、単一のキー・値ペアを新規追加または更新することができます。
複数のキー・値ペアを操作したい場合は、map.merge()メソッドを利用しましょう。

解説

  • $map … マップの配列名。省略不可。
  • $key … 追加または更新したいキー。既存のキーと完全一致する場合は指定したキーの値が更新される。省略不可。
  • $var … 追加または更新したい値。省略不可。

scss記述例

@use 'sass:map';

$settings: (
  color: red,
  size: 16px
);

$settings: map.set($settings, weight, bold );
// $keyが新規追加されるので値が追加される
// 出力:(color: red, size: 16px, weight: bold);

$settings: map.set($settings, size, 18px );
// $keyが既存の値と完全一致するので値が更新される
// 出力:(color: red, size: 18px, weight: bold);

※キーが既存のキーと完全一致する場合は値が更新されます。
※キーが既存のキーと完全一致しない場合はキー: 値のペアが新規追加されます。

【推奨】map.merge( $map, ($key1: $var1, $key2: $var2...) );

Dart Sass推奨の書き方です。
sass:mapモジュールを読み込んだ上で利用しましょう。

map.merge()では、複数のキー・値のペアを新規追加または更新できます。

解説

  • $map … マップの配列名
  • $key1 … 追加または更新したいキー。既存のキーと完全一致する場合は指定したキーの値が更新される。省略不可。
  • $var1 … 追加または更新したい値。省略不可。
  • $key2 … 追加または更新したいキー。既存のキーと完全一致する場合は指定したキーの値が更新される。省略可。
  • $var2 … 追加または更新したい値。省略可。

※3つ以上のキー: 値ペアを追加・更新したい場合は、$key2: $var2の後に続けて,で区切って記述する。省略可。

scss記述例

@use 'sass:map';

$settings: (
  color: red,
  size: 16px
);

$settings: map.merge($settings, (weight: bold) );
// $keyが新規追加されるので値が追加される
// 出力:(color: red, size: 16px, weight: bold);

$settings: map.merge($settings, (size: 18px) );
// $keyが既存の値と完全一致するので値が更新される
// 出力:(color: red, size: 18px, weight: bold);

$settings: map.merge($settings, (family: serif, color: blue) );
// $keyが複数新規追加されるので値が複数追加される
// 出力:(color: blue, size: 18px, weight: bold, family: serif);

※キーが既存のキーと完全一致する場合は値が更新されます。
※キーが既存のキーと完全一致しない場合はキー: 値のペアが新規追加されます。

複数のマップを結合する

複数のマップを結合して1つのマップにする時は、map-merge()関数またはmap.merge()メソッドを利用します。
マップに要素を追加・更新する方法と同じ要領で利用できます。

【非推奨】map-merge( $map1, $map2... );

関数の仕様はこちらに記載している通りです。

scss記述例

$setting1: (
  color: red,
  size: 16px
);

$setting2: (
  color: blue,
  weight: bold
);

$settings: map-merge( $setting1, $setting2 );
// 出力:( color: blue, size: 16px, weight: bold )
// 'color' は $setting2 の値が優先される
// $setting1 にないキー・値ペアは末尾に追加される。

【推奨】map.merge( $map1, $map2... );

メソッドの仕様はこちらに記載している通りです。

scss記述例

@use 'sass:map';

$setting1: (
  color: red,
  size: 16px
);

$setting2: (
  color: blue,
  weight: bold
);

$settings: map.merge( $setting1, $setting2 );
// 出力:( color: blue, size: 16px, weight: bold )
// 'color' は $setting2 の値が優先される
// $setting1 にないキー・値ペアは末尾に追加される。

マップから要素を削除する

Sassのマップからキーと値を削除するには、map-remove()関数や、マップモジュールを利用したmap.remove()メソッドを使います。

【非推奨】map-remove( $map, $key1, $key2... );

map.remove()メソッドを利用する書き方への移行が推奨されています。
複数のキー・値を削除することができます。

解説

  • $map … マップの配列名。省略不可。
  • $key1 … 削除したい値とペアになるキー。型も含めて完全一致で指定する必要がある。省略不可。
  • $key2 … 削除したい値とペアになるキー。型も含めて完全一致で指定する必要がある。省略可

3つ以上のキー: 値ペアを削除したい場合は、$key2の後に続けて,で区切って記述する。

scss記述例

$settings: (
  color: red,
  size: 16px,
  weight: bold
);

$settings: map-remove($settings, "weight" ); // $keyが完全一致していない。"weight"は文字列。
// 出力: (color: red, size: 16px, weight: bold )

$settings: map-remove($settings, size, weight ); // $keyが完全一致してるので成功。
// 出力: (color: red )

※キーが既存のキーと完全一致する場合に指定したキー・値が削除されます。

【推奨】map.remove( $map, $key );

Dart Sass推奨の書き方です。
sass:mapモジュールを読み込んだ上で利用しましょう。

map.remove()では、単一のキー・値のペアを削除できます。
複数のキー・値ペアには対応していません。複数のキー・値ペアを削除したい場合は、map.remove()を複数回行う必要があります。

解説

  • $map … マップの配列名。省略不可。
  • $key … 削除したい値とペアになるキー。型も含めて完全一致で指定する必要がある。省略不可。

scss記述例

$settings: (
  color: red,
  size: 16px,
  weight: bold
);

$settings: map.remove($settings, "weight" ); // $keyが完全一致していない。"weight"は文字列。
// 出力: (color: red, size: 16px, weight: bold )

$settings: map.remove($settings, size ); // $keyが完全一致してるので成功。
// 出力: (color: red, weight: bold )

※キーが既存のキーと完全一致する場合に指定したキー・値が削除されます。

マップのキーを検索する

Sassのマップからキーを検索するには、map-has-key()関数や、マップモジュールを利用したmap.has-key()メソッドを使います。

【非推奨】map-has-key($map, $key );

map.has-key()メソッドを利用する書き方への移行が推奨されています。
指定したキーがマップ内に含まれるか確認することができます。
複数のキーには対応していません。

解説

  • $map … マップの配列名。省略不可。
  • $key … 検索したいキー。型も含めて完全一致で指定する必要がある。省略不可。
  • 戻り値 … truefalse

scss記述例

$settings: (
  color: red,
  size: 16px
);

map-has-key($settings, color); // → true
map-has-key($settings, weight); // → false

※キーが既存のキーと完全一致する場合にtrueとなります。

【推奨】map.has-key( $map, $key );

Dart Sass推奨の書き方です。
sass:mapモジュールを読み込んだ上で利用しましょう。

指定したキーがマップ内に含まれるか確認することができます。
複数のキーには対応していません。

解説

  • $map … マップの配列名。省略不可。
  • $key … 検索したいキー。型も含めて完全一致で指定する必要がある。省略不可。
  • 戻り値 … truefalse

scss記述例

@use 'sass:map';
$settings: (
  color: red,
  size: 16px
);

map.has-key($settings, color); // → true
map.has-key($settings, weight); // → false

※キーが既存のキーと完全一致する場合にtrueとなります。

マップの値を検索する

Sassの関数やモジュールには、マップの値を検索する方法は用意されていません
カスタム関数を利用するなどして対応しましょう。

詳しくは別の記事で紹介します。

マップをループ処理する

Sassでは、マップの要素を繰り返して順番に処理(ループ)するために@eachディレクティブを使います。
ループを活用することで、同じようなスタイルを効率よく自動生成でき、メンテナンス性も大きく向上します。

@each $key, $var in $map{}

解説

  • $key … 繰り返されるマップのキーを代入する任意の変数。
  • $var … 繰り返されるマップのキーに対する値を代入する任意の変数。利用時は#{$var}と記述する。
  • $map … 繰り返し対象のマップ
  • {} … 繰り返し処理を書く部分

scss記述例

$settings: (
    color: blue,
    font-size: 16px,
    font-weight: bold
);

.box{
    @each $key, $value in $settings {
        #{$key}: $value;
    }
}

出力されるCSS

.box {
  color: blue;
  font-size: 16px;
  font-weight: bold;
}

最後に

Sassのマップは、単なるキーと値のペアである以上に、意味づけされたデータを効率的に管理・再利用するための強力な手段です。
この記事では、マップの基本構造から、値の取得・更新・削除、そしてループ処理など、実践的な使い方を紹介してきました。

マップを使いこなすことで、スタイルの一元管理や動的な出力が可能になり、設計の柔軟性と拡張性が格段に向上します。
プロジェクトの規模や複雑さが増しても耐えられる、スマートでスケーラブルなCSS設計のために、ぜひSassのマップを積極的に活用してみてください。

この記事が気に入ったらシェアしてください

関連記事

Sassで配列を使おう|リスト(配列)を徹底的に使いこなす!

Sassで配列を使おう|リスト(配列)を徹底的に使いこなす!

Sassで配列を使おう|リスト(配列)のセパレーターについて考えてみた

Sassで配列を使おう|リスト(配列)のセパレーターについて考えてみた

Sassで配列を使おう|リストとマップの違いをしっかり理解しよう!

Sassで配列を使おう|リストとマップの違いをしっかり理解しよう!

Sassの@if条件分岐をマスターしよう!使い方・応用・注意点まとめ

Sassの@if条件分岐をマスターしよう!使い方・応用・注意点まとめ

Sassでデバッグする方法まとめ|@debug/@warn/@errorの基本と実例

Sassでデバッグする方法まとめ|@debug/@warn/@errorの基本と実例

Sassの@mixinとプレースホルダー、どっちを使う?使い分けのコツを紹介

Sassの@mixinとプレースホルダー、どっちを使う?使い分けのコツを紹介

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)