Phoenix LiveView 1.2 リリースノート

Phoenix LiveView 1.2 は、以前 JavaScript に対して導入された機能を反映し、CSS を HEEx テンプレート内に直接配置（colocation）できるようにすることで、開発者体験の向上に焦点を当てています。このリリースには、これらの機能をサポートするための HEEx コンパイラの重要なアーキテクチャ変更が含まれています。

HEEx テンプレート内での CSS の共存（Colocated CSS）

LiveView 1.2 では、特定の :type 属性を持つ <style> タグを使用して、HEEx テンプレート内で直接 CSS スタイルを定義できるようになります。このアプローチにより、スタイルを、それが影響を与える対象となる HTML と並行して定義することが可能になります。

実装とビルドパイプライン

:type={MyApp.ColocatedCSS} で定義されたスタイルは、コンパイル時に _build ディレクトリ内の特別な phoenix-colocated フォルダに抽出されます。これらの抽出されたスタイルは、その後、Tailwind CSS や Esbuild といったプロジェクトの既存の CSS パイプラインによって処理され、共存スタイルが最終的なバンドルされた CSS に統合されることが保証されます。

CSS スコープと @scope ルール

共存スタイルが他のコンポーネントに漏れ出すのを防ぐため、LiveView 1.2 はスコープ設定のメカニズムを導入しています。これは、レンダリングされた HTML に、テンプレートの境界を識別するためのユニークな属性を付与することで実現されます。

  1. ルートタグ属性: Phoenix LiveView の設定で root_tag_attribute: "phx-r" を構成することで、LiveView はテンプレートの最も外側の要素すべてに phx-r 属性を追加します。
  2. ユニークなコンポーネント属性: スコープされた CSS を使用するコンポーネントのルート要素にも、ユニークな phx-css-* 属性が付与されます。

これらの属性により、現代的な CSS @scope ルールを使用して、スタイルを特定のコンポーネントのルートとセレクタを制限してターゲットにすることができます。例えば、@scope ([phx-css-foo]) to ([phx-r]) のようなルールは、その特定のコンポーネントの境界内にある要素のみが影響を受けることを保証します。

スコープの利用可能性

スコープのためのインフラストラクチャは提供されていますが、2026 年 6 月時点では @scope CSS ルールがすべてのブラウザで普遍的にサポートされていないため、LiveView 1.2 では @scope の実装はデフォルトでは有効になっていません。代わりに、LiveView は、開発者がカスタムスコープ戦略を実装したり、早期採用のために @scope の実装をオプトインしたりできるようにするための @behaviour を提供しています。

HEEx コンパイル・アーキテクチャ

共存 CSS および JS をサポートするために、Phoenix チームは HEEx のコンパイル・プロセスを刷新しました。コンパイルは現在、トークン化（tokenization）とパース（parsing）の 2 つの異なるステップに分割されています。このアーキテクチャの変更により、マクロコンポーネントの扱いが簡素化され、テンプレートコンパイルとフォーマット間のコードの重複が削減されます。

1.2 における追加の改善点

LiveView 1.2 は、いくつかの QoL（品質の向上）改善をもたらします。

  • HTML フォーマッタ: 新しい Phoenix.LiveView.HTMLFormatter.TagFormatter behaviour は、開発者が Prettier のような外部ツールを使用して、HEEx テンプレート内の <script> および <style> タグをフォーマットすることを可能にします。
  • JS 構造体エンコーディング: Phoenix.LiveView.JS 構造体は、push_event を使用して Jason や組み込みの JSON モジュールを介して送信される際、自動的にエンコードされます。開発者は JS.to_encodable/1 を使用して手動でエンコードすることも可能です。
  • デバッグ・アノテーション: HEEx デバッグ・アノテーションは、@debug_heex_annotations および @debug_attributes を使用して、モジュールごとに構成できるようになりました。
  • テスト: テストの警告は、カテゴリごとに構成できるようになりました。
  • ドキュメント: JavaScript クライアントには、専用のドキュメントが用意されました。

コミュニティの視点

コミュニティの議論では、共存アセットメント（colocated assets）に対して賛否両論の反応が見られます。一部のユーザーは、現代的な JavaScript フレームワークと比較して「新鮮な風」であると感じていますが、他のユーザーは、Rails 2.x での過去の経験を引用して、JS と CSS を共ック（colocation）共存させていることが、コードベースを無秩序にする可能性があると懸念しています。一方、あるユーザーは、以前に Surface UI で同様の機能を使用しており、LiveView ライブラリのメインラインに統合されることを喜んでいます。

Sources