0Pricing
CSS Academy · レッスン

CSS Typed Object Model（OM）

CSS Typed OM APIを使い、CSSの値を文字列ではなく型付きのJavaScriptオブジェクトとして扱います。

「CSS Typed Object Model（OM）」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

CSS Typed OM とは

CSS Typed Object Model（Typed OM）は CSS Houdini プロジェクトの一部です。CSS の値を単なる文字列ではなく型付きの JavaScript オブジェクトとして扱えるため、より高速な操作、柔軟な算術演算、型安全性を実現できます。

従来の方法と新しい方法

従来の CSSOM は文字列を返しますが、Typed OM は型情報を持つオブジェクトを返します。

<p id="demo" style="opacity: 0.5;">Typed OM demo element</p>
<p id="output">Reading style values&hellip;</p>
<script>
  const demo = document.getElementById('demo');
  const output = document.getElementById('output');

  // Old CSSOM (string)
  const oldValue = demo.style.opacity; // '0.5'

  // CSS Typed OM (typed object)
  const typed = demo.computedStyleMap().get('opacity');
  // CSSUnitValue { value: 0.5, unit: 'number' }

  output.textContent = 'old (string): "' + oldValue + '"  |  typed OM: value=' + typed.value + ', unit=' + typed.unit;
</script>

computedStyleMap()

任意の要素の計算済みの型付きの値にアクセスできます。

<div id="box">400px wide box</div>
<p id="output">Reading computed width&hellip;</p>
<script>
  const box = document.getElementById('box');
  const output = document.getElementById('output');

  const styles = box.computedStyleMap();
  const width = styles.get('width');
  console.log(width.value); // 400
  console.log(width.unit);  // 'px'

  output.textContent = 'width.value = ' + width.value + ', width.unit = "' + width.unit + '"';
</script>

インラインスタイル用の attributeStyleMap

element.attributeStyleMap を使って、型付きのインラインスタイル値を設定および取得できます。

<div id="box">Inline-styled box</div>
<p id="output">Setting styles via attributeStyleMap&hellip;</p>
<script>
  const box = document.getElementById('box');
  const output = document.getElementById('output');

  box.attributeStyleMap.set('opacity', CSS.number(0.5));
  box.attributeStyleMap.set('margin-top', CSS.px(16));

  const opacity = box.attributeStyleMap.get('opacity');
  output.textContent = 'opacity.value = ' + opacity.value;
</script>

CSS 数値ファクトリメソッド

CSS 名前空間には、型付きの値を作成するファクトリメソッドが用意されています。

<div id="box">Factory methods demo</div>
<p id="output">Computing&hellip;</p>
<script>
  const output = document.getElementById('output');

  const px = CSS.px(100);         // CSSUnitValue(100, 'px')
  const percent = CSS.percent(50); // CSSUnitValue(50, 'percent')
  const em = CSS.em(1.5);          // CSSUnitValue(1.5, 'em')
  const number = CSS.number(0.5);  // CSSUnitValue(0.5, 'number')
  const deg = CSS.deg(180);        // CSSUnitValue(180, 'deg')

  output.textContent = [px, percent, em, number, deg]
    .map(v => v.value + v.unit).join(', ');
</script>

型付きの値に対する算術演算

CSSMathValue を使うと、文字列連結を行わずに JavaScript で CSS の算術演算を実行できます。

<div id="box">Math on typed values</div>
<p id="output">Calculating&hellip;</p>
<script>
  const output = document.getElementById('output');

  const width = CSS.px(100).add(CSS.percent(10));
  // Equivalent to calc(100px + 10%)

  const margin = CSS.px(16).mul(2);
  // 32px

  output.textContent = 'width = ' + width.toString() + '  |  margin = ' + margin.value + margin.unit;
</script>

パフォーマンス上の利点

頻繁な操作（アニメーションフレームなど）では、Typed OM は文字列ベースの CSSOM より大幅に高速です。アクセスのたびに値を文字列から解析する必要がなく、すでに構造化されたオブジェクトになっているためです。

CSSStyleValue の型

Typed OM の値の型には次のものがあります。

  • CSSUnitValue：数値 + 単位（100px）
  • CSSKeywordValue：キーワード（auto、none）
  • CSSImageValue：画像（url()）
  • CSSMathValue：calc 式
  • CSSColorValue：色の値（実験的）

アニメーションでの Typed OM

Web Animations API では、より正確にアニメーションを制御するために型付きの値を使用します。

<div id="box">Animated via Typed OM</div>
<script>
  const box = document.getElementById('box');
  box.animate(
    [{ opacity: CSS.number(0) }, { opacity: CSS.number(1) }],
    { duration: 300, fill: 'forwards' }
  );
</script>

ブラウザのサポート状況

CSS Typed OM（Level 1）は Chrome 66 以降と Edge 79 以降でサポートされています。Firefox と Safari のサポートは部分的であるか、フラグの有効化が必要です。本番環境で使用する前に caniuse.com を確認してください。API の対応範囲は引き続き拡大しています。

Typed OM を使う場面

次のような場合に Typed OM を使用します。

  • CSS Paint または Layout Worklet を構築する場合（必須）
  • JavaScript でフレームごとに多数の要素をアニメーションさせる場合
  • CSS ツールやプリプロセッサを構築する場合
  • CSS の値を型チェックしながら操作する必要がある場合

確認問題

element.computedStyleMap().get("width") は、getComputedStyle(element).width と比べて何を返しますか。

まとめ

CSS Typed OM は、文字列ベースの CSSOM を型付きの JavaScript オブジェクトに置き換えます。読み取りには computedStyleMap() を、インラインスタイルの書き込みには attributeStyleMap を使用します。CSS のファクトリメソッド（CSS.px()、CSS.percent()）で型付きの値を作成できます。文字列ベースの操作より高速で、Paint および Layout Worklet には必須です。

よくある質問

「CSS Typed Object Model（OM）」レッスンは無料ですか？

はい。「CSS Typed Object Model（OM）」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「CSS Typed Object Model（OM）」で何を学びますか？

CSS Typed OM APIを使い、CSSの値を文字列ではなく型付きのJavaScriptオブジェクトとして扱います。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「CSS Typed Object Model（OM）」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. CSS Typed Object Model（OM）
  2. CSS Properties and Values API（@property）
  3. CSS Paint API: Worklets
  4. CSS Layout APIとスコープ
← CSS Academyに戻る