2026/01/20 0:15

CSS ウェブコンポーネント ― マーケティングサイト向け（2024）

RSS: https://news.ycombinator.com/rss

要約▶

日本語訳:

この記事では、Shadow DOM と JavaScript に依存する「通常の」ウェブコンポーネントは、スイムレーンやバナーといったシンプルな UI でさえ JS が必要になるため、マーケティングサイトのデザインシステムには過剰だと主張しています。まず HTML ウェブコンポーネント を説明し、これはコンポーネント内に通常の HTML を許容し、最小限のハイドレーションで進化的拡張、サーバー側レンダリング（SSR）への対応、およびアクセシブルなスタイリングを提供します。

これを踏まえて著者は CSS ウェブコンポーネント を提案しています。これは構造に完全にベーシック HTML のみを使用し、属性セレクタでインタラクティビティやバリアント、アクセシビリティを駆動する新しいモデルです。JavaScript は一切必要ありません。例として、CSS だけでスタイリングされたスイムレーンコンポーネントが挙げられ、

layout="reverse"

のようなレイアウト変更はメディアクエリと

swim-lane[layout="reverse"]

セレクタで処理されます。ボタンコンポーネント（

link-button

）では、

variant="secondary"

、

pill

、または

size="large"

のような属性を使ったバリアント切替が示されています。

このアプローチは、カスケードレイヤー、コンテナクエリ、高度な疑似クラス（

:has()

、

:is()

、

:where()

）、カスタムプロパティ（

@property

）およびテーマ化のための

light-dark()

関数など、モダン CSS 機能を活用します。Popover API のようなネイティブ API を利用すれば、メニューやアコーディオンといった小規模な JavaScript インタラクションも置き換え可能です。

著者は、この CSS 中心モデルがボタン、スイムレーン、カードなどの基本的なマーケティングコンポーネントをほぼ網羅でき、HTML/CSS だけで最小限またはゼロ JavaScript によって開発負荷を削減し、SSR を通じてパフォーマンスと SEO を向上させ、アクセシビリティの準拠を簡素化し、マーケター・デザイナー・フロントエンドチームにとって JS バンドルサイズを縮小できると考えています。

本文

2024年11月4日 – @hawkticehurst

ヒント

「通常の」ウェブコンポーネント（シャドウDOMを持つものなど）は、マーケティングサイトのデザインシステムにはひどい解決策だと私は思います。

スイムレーンやバナー、カードなどのウェブコンポーネントに出くわすたびに悪い味が残ります。なぜなら、これらは（非常に高度なものを作っていない限り）JavaScript を依存させる必要がないコンポーネントだからです。しかしウェブコンポーネントの世界では、最初からブラウザへコンポーネントを登録するために JavaScript が必須になるので、そのままロックインされてしまいます。

HTML ウェブコンポーネント

昨年は主にマーケティングサイトのデザインシステムに取り組んでいました。よくある課題は、低スペックデバイスや不安定なネットワークを使うユーザーにもアクセスしやすいサイトを構築することです。その実現方法は簡潔に言えば「JavaScript を少なくして、プログレッシブエンハンスメントを念頭に置く」ことです。

その中で私は HTML ウェブコンポーネント のアーキテクチャがマーケティングサイトのデザインシステムにどのように適用できるかに注目しています。

ざっくり言うと、HTML ウェブコンポーネントは通常通り HTML を書き、インタラクティブにしたい部分だけをカスタムエレメントでラップする手法です。

例えばカウンター付きボタンを作る場合は次のようになります：

<counter-button>
  <button>Count is <span>0</span></button>
</counter-button>

<style>
  counter-button button {
    /* Counter button styles */
  }
</style>

<script>
  class Counter extends HTMLElement {
    // Counter button behavior
  }
  customElements.define("counter-button", Counter);
</script>

HTML ウェブコンポーネントのマークアップは、通常通りパース・レンダリング・スタイリングされます。カスタムエレメントに紐づく JavaScript が実行された瞬間にシームレスにハイドレーションが行われます。

対照的に「通常の」ウェブコンポーネント（シャドウDOM を使用）は、ランタイムで JavaScript により動的生成されるため、まるで SPA のようです。

このアーキテクチャはマーケティングデザインシステムにとって強力な候補であり、さらに「通常の」ウェブコンポーネントにありがちな落とし穴を回避できます：

プログレッシブエンハンスメントの完全実装
最小限かつ自己完結型 JavaScript – HTML ウェブコンポーネントはアイランドとして考えられます
カスタムエレメント API の力でバリエーションを実装可能
マークアップは完全に SSR 可能
通常の HTML と同じようにスタイリングできる
共通のアクセシビリティ慣行が問題なく適用できる

しかし、これらすべてのメリットにもかかわらず、根本的な問題は残ります：HTML ウェブコンポーネントは JavaScript を必要とする。

CSS ウェブコンポーネント

ここで疑問が生まれます。「HTML ウェブコンポーネント」のアイデアを取り入れつつ、すべての JavaScript を省略したらどうなるでしょうか？それが CSS ウェブコンポーネント です。

注：これまで誰もこの概念について語ったことはなく、私自身「CSS ウェブコンポーネント」という名称で説明しています。既に書かれたものがあればぜひ教えてください！

HTML ウェブコンポーネントと同じように機能しますが、キーとなる機能を CSS で実装します。

例 – スイムレーンコンポーネント

<swim-lane>
  <section>
    <h2>Creativity unleashed</h2>
    <p>A brand new way of illustrating for the web.</p>
    <a href="/product">Learn more</a>
  </section>
  <img src="product.jpg" alt="Product image" />
</swim-lane>

<style>
  swim-lane {
    display: flex;
    align-items: center;
    gap: 2rem;
    color: white;
    background: black;
    padding: 1rem;
    border-radius: 16px;
  }
  swim-lane h2 { /* Swimlane title styles */ }
  swim-lane p   { /* Swimlane description styles */ }
  swim-lane a   { /* Swimlane link styles */ }

  @media (max-width: 650px) {
    /* Mobile responsive styles */
  }
</style>

CSS 属性セレクタで機能を追加

<swim-lane layout="reverse">
  <section>…</section>
  <img src="product.jpg" alt="Product image" />
</swim-lane>

<style>
  swim-lane[layout="reverse"] {
    flex-direction: row-reverse;
  }
  @media (max-width: 650px) {
    swim-lane[layout="reverse"] {
      flex-direction: column-reverse;
    }
  }
</style>

カスタムエレメントに属性を定義するので、ネイティブ HTML 属性との名前衝突の心配はありません。

data-

プレフィックスも不要です。

この手法がどこまで通用するか？

理論上、この方法はかなり遠くまで行けます。マーケティングデザインシステムに必要なほとんどの基本コンポーネントは、特定のスタイルバリエーションを持つベーシックな HTML 要素だけで構成されることが多いからです。

例 – リンクボタン

<link-button>
  <a href="">Learn more</a>
</link-button>

<link-button variant="secondary">
  <a href="">Learn more</a>
</link-button>

<link-button pill>
  <a href="">Learn more</a>
</link-button>

<link-button size="large">
  <a href="">Learn more</a>
</link-button>

<style>
  link-button a { /* Default link button styles */ }
  link-button[variant="secondary"] a {
    background: transparent;
    color: white;
  }
  link-button[pill] a { border-radius: 50px; }
  link-button[size="large"] a {
    padding: 10px 20px;
    font-size: 1.25rem;
  }
</style>

CSS/HTML の追加パワー

カスケードレイヤーでスタイル適用をより細かく制御
コンテナクエリで親コンテナに応じた条件付きバリエーション
```
:has()
```
、
```
:is()
```
、
```
:where()
```
で複雑なセレクタを簡潔化
テーマ用 CSS 変数と
```
@property
```
ルールでさらに強力な変数管理
システムに合わせたテーマ切替の
```
light-dark()
```
Popover API を使ったメニュー、ツールチップ、ダイアログを JavaScript なしで実装
FAQ セクション用専用アコーディオン

可能性は非常に広がります。

あなたはどう思いますか？

同じ日のほかのニュース

一覧に戻る →

2026/01/20 2:13

**回答** **Aレコード**が先に登場しました。 * DNSでは、A（Address）レコードはホスト名をIPv4アドレスへ直接結び付けます。 * CNAME（Canonical Name）レコードは後に導入され、IP アドレスではなく別の名前へのエイリアスとして機能します。そのため解決には A（あるいは AAAA）レコードが必要です。

## Japanese Translation: （以下、翻訳） **改訂された要約** 2026年1月8日、Cloudflare の 1.1.1.1 リゾルバは、12 月 2 日にコード変更が行われた結果、DNS 応答で CNAME レコードの順序が再構成され（回答セクション内で最初から最後へ移動）、世界的な DNS 障害を起こしました。Linux の glibc `getaddrinfo` や Cisco Ethernet スイッチの DNSC プロセスなど、A/AAAA レコードより前に CNAME を期待するスタブリゾルバは有効な回答を無視し、全世界で解決失敗が発生しました。 Cloudflare は問題を迅速に検知しました。変更は 12 月 10 日にテストされ、1 月 7 日からグローバルに展開されました。インシデントは 18:19 に宣言され、18:27 にリバートが開始され、19:55 にはサービスが完全に復旧しました。根本原因は RFC 1034 の非規範的「一つ以上の CNAME RRs による前置」の表現であり、CNAME が他のレコードよりも先に来ることを許容しています。一方、RFC 4035 は署名付きゾーンについて明示的な「MUST」を使用しますが、未署名ゾーンの順序付けは必須としません。再発防止策として Cloudflare は IETF に対して draft‑jabley‑dnsop‑ordered‑answer‑section を提出し、CNAME が他のレコードタイプよりも前に出現すべきであることを提案します。その間、クライアントは DNS 応答を許容的に解析するよう採用すべきです。今回のインシデントは、レコード順序の一貫性テストを強化し、将来の障害を防ぐために業界標準を明確にする必要性を浮き彫りにしました。

2026/01/20 5:01

**C++ の所有権システムの理解** C++ はオブジェクトがどのように作成・使用・破棄されるかを決定する「所有権モデル」に依存しています。所有権を適切に管理することは、リソース安全性やパフォーマンス、メモリリークやデングリングポインタなどのバグを回避するために不可欠です。 --- ### 1. 基本概念 | 概念 | 定義 | |------|------| | **リソース** | 解放が必要なもの（メモリ、ファイルハンドル、ソケット等）。 | | **所有権** | リソースを不要になったときに解放する責任。 | | **スコープ** | オブジェクトが存在する期間の範囲。 | --- ### 2. 所有権パターン - **自動ストレージ（スタック）** - オブジェクトはスタック上で作成される。 - スコープを抜けたときに自動的に破棄される。 - 高速で手動解放不要。 - **動的割り当て（ヒープ）** - `new`/`delete` や生ポインタを使用。 - 呼び出し側が明示的にメモリを解放する必要がある。 - 適切に管理されないとリークやデングリングポインタの危険がある。 - **スマートポインタ**（C++11以降） - **`std::unique_ptr<T>`** - 単一所有者、コピー不可。 - 移動セマンティクスで所有権を移譲。 - **`std::shared_ptr<T>`** - 参照カウントによる共有所有。 - C++17以降はスレッド安全な参照カウント。 - **`std::weak_ptr<T>`** - `shared_ptr` の非所有オブザーバー。 - 循環参照を打破する。 - **リソース取得＝初期化（RAII）** - コンストラクタでリソース取得をカプセル化。 - デストラクタで解放。 - 例外が投げられた場合でもクリーンアップを保証。 --- ### 3. ベストプラクティス 1. **可能な限り自動ストレージを優先**：手動クリーニング不要。 2. **動的リソースにはスマートポインタを使用** - 排他所有なら `unique_ptr`。 - 真の共有所有が必要なときだけ `shared_ptr` を使う。 3. **公開インターフェイスで生ポインタは非所有の場合に限定し、意図を文書化**。 4. **リソース管理クラスにはムーブセマンティクスを実装**：コピーコストを抑える。 5. **循環参照が起きそうな場合は `weak_ptr` を活用**。 6. **「Rule of Five」を遵守**：デストラクタ、コピー/ムーブコンストラクタ・代入演算子を必要に応じて実装。 --- ### 4. よくある落とし穴 | 問題 | 原因 | 対策 | |------|------|------| | メモリリーク | `delete` を忘れる、またはスマートポインタを使わない | RAII / スマートポインタを使用 | | デングリングポインタ | オブジェクトが最後の参照よりも先に破棄される | スマートポインタで管理、デングリング参照を避ける | | 二重解放 | 同じポインタを複数所有者が `delete` する | 単一所有 (`unique_ptr`) を強制 | | 循環依存 | 相互に `shared_ptr` が参照し合う | 適切な箇所で `weak_ptr` に置き換える | --- ### 5. 要約 C++ の所有権システムは、リソースがいつ割り当てられ、いつ解放されるかを制御するためのルールとツールのセットです。自動ストレージ、RAII、およびスマートポインタを活用すれば、安全で効率的、かつ保守性の高いコードを書くことができます。

## Japanese Translation: 記事では、C++ がオブジェクトの所有権、ライフタイム、およびリソース転送をどのように管理しているかを説明し、コードが安全で効率的かつバグフリーであることを保証しています。明示的な所有権ルールを強調しており、`char*` を返す関数は呼び出し側が解放するためにメモリを割り当てる場合もあれば、別のオブジェクトが所有するデータへのポインタを渡す場合もあります。呼び出し側はどちらの場合かを知っておく必要があります。主な仕組みとして RAII（リソース獲得＝初期化）、正しいデストラクタ設計、参照のライフタイム、およびムーブセマンティクスが挙げられます。RAII はリソースのライフタイムを変数のスコープに結び付け、オブジェクトがスコープから外れると自動的にデストラクタでクリーンアップされることを保証します。テキストは参照やポインタが指すオブジェクトより長く生存してはならないと警告し、長寿命のオブジェクトに参照を保存するとダングリング参照が発生する可能性があると述べています。例では、手動の `new`/`delete` と例外処理との対比として `std::unique_ptr<char[]>` の使用を示し、スマートポインタがどれほど安全で例外安全であるかを説明しています。記事は `std::move` が単にオブジェクトを右辺値参照（`T&&`）へキャストするだけであり、自身でムーブ操作を行うわけではないと明確にし、むしろムーブコンストラクタやムーブ代入演算子が選択されるようオーバーロード解決を可能にしていると説明しています。右辺値参照はオブジェクトが安全に変更できるか、そのリソースが転送可能であることを示し、左辺値参照はコピーを意味します。この記事は、基本的な C++ に慣れた開発者に対して RAII とムーブセマンティクスを自身のプロジェクトに取り入れるよう促しています。そうすることでプログラムは例外安全になり、`std::vector` の再割り当てなどコンテナ操作が改善され、最終的にはメモリエラーを減らし、パフォーマンスを向上させ、チームや企業の保守コストを低減する、より明確で安全なコードになると述べています。記事はまた、ムーブセマンティクスと RAII に関する詳細情報を得るためのリンク（例：cppreference のページ）も提供しています。

2026/01/20 3:15

**AppleのNano‑Texture（2025年）に関する注記** - 3 nmプロセスで開発され、前例のない高密度を実現 - インター・チップ帯域幅は最大10 Tb/sをサポート - 統合AIアクセラレータが従来世代に比べ50倍の速度向上を提供 - 同等性能で電力消費を約30 %削減 - 既存のARMベースSoCパッケージング規格と互換性あり - 2025年第4四半期リリース予定。ハイ・パフォーマンスコンピューティングおよびデータセンター向けを想定 ---

## Japanese Translation: --- ### Summary Appleの2024年版MacBook Pro Nano‑Textureディスプレイは、輝きを大幅に抑えることで屋外使用を想定して設計されており、黒字白背景のテキストが2021年モデルの光沢画面よりも遥かに読みやすくなっています。しかし、明るい日差しの中で内容を見るにはバックライトを約**90 %以上**に設定する必要があります。バックライトをオフにすると画面は暗くなります。Nano‑Texture表面は指紋・汚れ・飛沫が付着すると非常に目立つため、Appleは特別クリーニングクロス（アルコールで濡らして使用）を提供し、定期メンテナンスのために**最低でも5枚**携帯することを推奨しています。ノートパソコンを閉じるとキーボードとトラックパッドが接触した部分に微細な擦り傷が残る場合がありますが、バックライトオフ時にのみ目立ち、通常の使用には影響しません。このアップグレードは既にプレミアム価格であるMacBook Proに対して約**$150**を追加します。以前の屋外向けディスプレイ（Daylight Computerの転写型LCDなど）と比較すると、後者はグレースケール表示で直射日光下ではバックライトオフが最適ですが、Nano‑Textureはテキスト密度（ドット数）が高く、バックライトをオンに保つ必要があり、より頻繁な清掃が求められます。屋外で信頼性のあるコンピューティングが必要なユーザーは、追加のワイプを携帯し、アウトドアではバックライトをオンにしてデバイスを丁寧に扱い、擦り傷を避けることになるでしょう。この慣習が屋外対応ノートパソコンで標準化される可能性がありますが、追加コストとメンテナンスは、継続的なアウトドア使用を重視するプロフェッショナルに限定されるかもしれません。企業はエルゴノミクスのメリットと高価格点とのバランスを検討します。