Tweet

Pocket

JavaScriptとCSSのモジュール

はじめに

Web界隈、とりわけフロントエンド界隈の変化は速く、次から次へと新しい技術や概念が登場します。

筆者がフロントエンドをお仕事でやっていたのはすでに5年以上も前のお話ですので、一部「今更」…感のある内容も含まれますが、最近調べて、個人的に感動した「モジュール」についてのお話です。

今回は CSS モジュール を少し取り上げてみます。

CSS モジュール

さて、JavaScript モジュールが実現した…ということであれば、次いで欲しくなるのは CSS モジュールです。

こちらに関しては、Chrome公式でこのようなアナウンスがありました。

Youtube – New in Chrome 93: CSS Module Scripts, URL Handlers for PWAs, the PWA Summit, and more!

※ Youtube 動画へのリンクです

この動画の公開日が 2021/08/31 となっていることから、比較的新しい機能ということですね。

実際に作ってみる

プログラム的にCSSを参照できるのか…？ ということを目的にやってみましょう。

※ 実際の活用方法としては Window.customElements を実装し スタイル管理をするのが主流？ のようですが、今回は JavaScript から参照できるかまでを見ていきます。

先程のモジュール A を以下のように変えてみます。

モジュール A

import css from "./a.css" assert { type: "css" };

export class A {
    constructor() {
        this.a = 'Aのモジュールです';
        console.log(css);
    }
}

モジュール A から参照するスタイルシート（a.css）

div.test {
    color: #fff;
    background: #480;
    font-size: 4em;
}

動作結果

ファイルをホストして、 Chrome(97) で動作を確認してみた結果が以下の通りです。

エラーは出ておらず、正常に動作しているようです。

なにやらCSSっぽいものが読み込めているような…？ 深堀りしていくと・・・

ありました！設定したスタイル情報がプログラムから読み込めているようです！

ちなみに 手元にあった Firefox 96 で試してみましたが、以下のエラーが表示され、動作せずでした。。。

Uncaught SyntaxError: import assertions are not currently supported

CSS モジュールに関しては 2022/01 現在でも、モダンブラウザの対応状況は まちまち ということですね。。

余談: asert…?

先程のコードで出てきた assert { type: "css" }; とは何なのか気になったので少しだけ調べてみました。

以下のGithub上のドキュメントにて説明がありました。

tc39 / proposal-import-assertions

その中の一文を翻訳してみると

応答側のサーバが予期せず異なるMIMEタイプを提供してコードが不意に実行されるシナリオを防げるため、セキュリティが向上する

とあるため、セキュリティ上のアサーション機構のようです。

所感とまとめ

• CSS モジュールに関しても、プログラムから CSS情報を取得・管理できるというのは モジュール化促進に一役買いそうです。
  • ただ実際に使う場合は、CSSスコープの問題もあるので、活用方法を熟知しておく必要がありそうです…！
• また、2022/01 現在 CSS モジュールに関してはまだブラウザ実装がブラウザごとに異なるようですので、ある程度普及してくれるのを心待ちにしたいと思います。

参考

• Chrome Platform Status – CSS module scripts
• Youtube – New in Chrome 93: CSS Module Scripts, URL Handlers for PWAs, the PWA Summit, and more!
• tc39 / proposal-import-assertions

Tweet

Pocket