【カスタムプロパティを有効活用する Part2】JavascriptとCSSをつなげる方法

本記事ではCSSカスタムプロパティをCSSとJavaScriptを繋ぐ橋としてどのように使えるかを検証していきます。

Part 1はこちら！

 

 

 

CSSとJavaScriptをそれぞれ独立させる

双方の関係性の単純化を図るために、多くの場合CSSとJavaScriptは可能な限り独立させると思います。

最も簡単な方法は、明確に定義されたCSSクラスを用いることです。JSサイドはそれを必要に応じて追加、削除します。

 

 

 

このアプローチであればCSSで全ての装飾をコントロールでき、JavaScriptは単に状態を変更するためのトリガーとなります。そのため、色の変更を行いたい場合は単にCSSだけの修正、状態変更のトリガーを変更したい場合はJavaScriptだけの修正を行えばよくなります。

 

 

 

CSSとJavaScript間で変数を渡す

クラスの追加や削除はboolean文にはいいかもしれませんが、時により複雑なデータの引き渡しが必要になります。

例えば、まず“container”があるとします。そしてユーザーが最後にそのcontainerをクリックしたロケーションを表示したいとします。

 

 

これでも動きますが、CSSとJavaScript間で抽象化がされていません。JavaScript内の補助的要素が見えてしまうだけでなく、プロパティを直接操作しています。

 

これまで特に解決法はなかったのですが、カスタムプロパティを使用すれば簡単に抽象化レイヤーを用いることができます。

 

 

これで、全ての装飾のコントロールがCSSに戻りました。JavaScriptを修正することなく見た目を変えることができます。

 

 

 

一つの変数で多くの変更

JavaScriptによる一つのイベントがCSS側に複数の影響を与えることができます。ミュージックプレイヤーの例を見てみましょう。例えばユーザーインターフェースの色を、プレイ中のアルバムによって変えたいとします。カスタムプロパティを使わない場合は、影響を受ける要素のリストを作成しなければなりません。

 

例えばJavaScriptへの記述だと以下のようになります。

これではリストを更新し続ける必要があるため、メンテナンスが大変になります。カスタムプロパティを用いるととてもシンプルにすることができます。

このアプローチであれば、どの要素が影響を受けるのかについて考える必要がありません。

 

 

 

まとめ

CSSとJavaScriptを明確に分離することで、バグや不可解な動きを減らしたり、テストをすることが簡単になります。また、それぞれ独立しているため、メンテナンスも簡単になります。

 

 

「カスタムプロパティを活用する」Part 1はこちら！

 

 

※本稿はSérgio氏による 「Bridging CSS and JS with Custom Properties」を翻訳・再編集したものです。