Scss　マップ(連想配列)の使い方を解説！キーの取得方法や連結方法も解説

Scssで便利なマップ（連想配列）の使い方を初心者でもわかりやすく解説します。

マップは、CSSプロパティのセットを保持するために使用されるオブジェクトです。

マップの作成方法

マップを作成するには、以下のようにmap関数を使用します。

$map: (
  key1: value1,
  key2: value2,
  key3: value3
);

ここで、key1、key2、key3は、マップのキーであり、value1、value2、value3は、それぞれのキーに対応する値です。キーは文字列でなければならないことに注意してください。また、値は任意のデータ型であることができます。

マップの値の取得方法

マップの値を取得するには、以下のようにmap-get関数を使用します。

$map: (
  key1: value1,
  key2: value2,
  key3: value3
);

$value: map-get($map, key1);

この例では、$valueにはvalue1が代入されます。

指定したキーの削除

マップ内の指定したキーに対応するエントリーを削除するには、map-remove関数を使用します。

$map: (
  key1: value1,
  key2: value2,
  key3: value3
);

$map: map-remove($map, key1); // key1に対応するエントリーが削除されたマップが作成される

第一引数にマップを、第二引数に削除したいキーを指定します。なお、map-remove関数は新しいマップを返すだけで、引数のマップ自体は変更しません。

マップのキーと値をループで処理する方法

マップのキーと値をループで処理するには、以下のように@eachディレクティブを使用します。

$map: (
  key1: value1,
  key2: value2,
  key3: value3
);

@each $key, $value in $map {
  // ループで処理したいコード
}

この例では、$keyにはkey1、key2、key3が代入され、$valueにはそれぞれvalue1、value2、value3が代入されます。

マップの値を更新する方法

マップの値を更新するには、以下のようにmap-merge関数を使用します。

$map: (
  key1: value1,
  key2: value2,
  key3: value3
);

$map: map-merge($map, (key1: new_value1));

この例では、key1に対応する値がnew_value1に更新されたマップが作成されます。

マップのキーを変更する方法

マップのキーを変更するには、以下のようにmap-remove関数とmap-merge関数を組み合わせて使用します。

$map: (
  key1: value1,
  key2: value2,
  key3: value3
);

$map: map-merge(map-remove($map, key1), (new_key: map-get($map, key1)));

この例では、まずmap-remove関数でkey1に対応するエントリーをマップから削除します。そして、map-merge関数で新しいキーと値のエントリーを追加します。このとき、新しいキーにはnew_keyを指定し、値には変更前のkey1に対応する値を指定します。これにより、key1に対応する値がnew_keyに変更されたマップが作成されます。

マップにキーが存在するか判定

マップに、指定したキーが存在するかどうかを判定するには、map-has-key関数を使用します。引数にマップとキーを指定します。

$map: (
  key1: value1,
  key2: value2,
  key3: value3
);

$is-exist: map-has-key($map, key1); // trueが返される

マップのキーをすべて取得

マップのすべてのキーを取得するには、map-keys関数を使用します。引数にマップを指定します。

$map: (
  key1: value1,
  key2: value2,
  key3: value3
);

$keys: map-keys($map); // (key1, key2, key3)が返される

マップの値をすべて取得

マップのすべての値を取得するには、map-values関数を使用します。引数にマップを指定します。

$map: (
  key1: value1,
  key2: value2,
  key3: value3
);

$values: map-values($map); // (value1, value2, value3)が返される

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

SCSSのマップは、キーと値を関連付けることができる非常に便利な機能です。使い方をマスターして、コーディングの効率化に役立てましょう。また、マップの利用に際しては、できるだけ名前をわかりやすくするなど、可読性の向上にも配慮しましょう。