意見募集：ネストされたマップ関数

Sassライブラリとデザインシステムが複雑になり、異なるニーズを持つユーザーが増えるにつれて、構成とデザイントークンを共有および上書きする必要性が高まっています。この構成は多くの場合階層的であり、マップの中にマップがさらに含まれるというネストされたマップとして表現されることになります。これまで、Sassのマップ関数は、このようなネストされたマップ構造を容易に処理できるようには設計されていませんでした。しかし、SassコアチームメンバーであるMiriam Suzanneによって書かれた最新の言語提案により、状況が変わろうとしています。

この提案は、既存のマップ関数を拡張し、いくつかの新しい関数を追加することで、ネストされたマップの処理を以前よりもはるかに容易にします。これは、ウェブ上のあらゆるSassプロジェクトで出現するヘルパー関数に基づいており、ベストプラクティスを言語自体に組み込んでいます。

関数関数へのパーマリンク

この提案で追加される新しいおよび改良された関数は次のとおりです。

map.get()とmap.has-key()map.get()とmap.has-key()へのパーマリンク

map.get()とmap.has-key()関数は、どちらも任意の数のキーを引数として受け入れます。各キーはネストされたマップを深く掘り下げるため、複数の関数呼び出しを連鎖させることなく、ネストされた値を簡単に検査できます。

たとえば、次の簡略化された構成マップを考えてみましょう。

$config: (
  "colors": (
    "primary": red,
    "secondary": blue
  )
)

このマップの場合、map.get($config, "colors", "primary")は"colors"キーの値（("primary": red)）を取得し、次に"primary"キーの値を取得してredを返します。

同様に、map.has-key($config, "colors", "primary")はtrueを返し、map.has-key($config, "colors", "tertiary")はfalseを返します。

map.merge()map.merge()へのパーマリンク

map.merge()関数は、map.merge($map1, $keys..., $map2)として呼び出すことができます。これにより、キーで指定された位置にある$map1の子と$map2がマージされ、親マップが更新されます。

たとえば、上記で定義された構成マップを使用して、map.merge($config, "colors", ("primary": green))は以下を返します。

(
  "colors": (
    "primary": green,
    "secondary": blue
  )
)

map.set()map.set()へのパーマリンク

map.set($map, $keys..., $value)関数は全く新しい関数です。map.merge()を使用してマップ内の個々の値を更新することは常に可能でしたが、専用のset()関数の欠如にユーザーが混乱していることがわかりました。この関数は、その役割を果たすだけでなく、ネストされたマップ内の値を設定することも可能にします。

1つのキーを渡すだけで、通常の単一層マップにmap.set()を使用できます。たとえば、map.set(("wide": 200px, "narrow": 70px), "wide", 180px)は("wide": 180px, "narrow": 70px)を返します。

しかし、ネストされたマップにも使用できます。たとえば、map.set($config, "colors", "tertiary", yellow)は以下を返します。

(
  "colors": (
    "primary": red,
    "secondary": blue,
    "tertiary": yellow
  )
)

map.deep-remove()map.deep-remove()へのパーマリンク

既存のmap.remove()関数は既に任意の数の引数を受け入れるため、ネストされたマップで動作するように更新することはできませんでした。代わりに、ネストされたマップ専用の新しい関数map.deep-remove($map, $keys...)を追加することを選択しました。この関数は、リストの最後のキーにある値を削除し、すべての親マップをそれに応じて更新します。

たとえば、map.deep-remove($config, "colors", "secondary")は("colors": ("primary": red))を返します。

map.deep-merge()map.deep-merge()へのパーマリンク

最後の新しい関数は、最もエキサイティングなものかもしれません。map.deep-merge($map1, $map2)はmap.merge()と同様に機能しますが、ネストされたマップもすべてマージされます。これには、それらのマップ内のマップなども含まれます。これにより、手動で各レベルをマージすることなく、同じ構造を持つ2つの構成マップを簡単に結合できます。

たとえば、map.deep-merge($config, ("colors": ("secondary": teal)))は以下を返します。

(
  "colors": (
    "primary": red,
    "secondary": teal
  )
)

ご意見をお聞かせください！ご意見をお聞かせください！へのパーマリンク

この提案の詳細について知りたい場合は、GitHubで全文をお読みください。今後1か月間、コメントと改訂を受け付けていますので、変更してほしい点があれば、issueを作成していただき、ご相談ください。