UIT INSIDE UIT INSIDE
2019/02/21 に公開 1500 views

このエピソードについて

@potato4d と @AlanGDavalos の二人で Web Components の近況や将来のWeb開発について話しました。

キャスト紹介

potato4d

  • @potato4d
  • 花谷拓磨
  • UIT 室エンジニア

Alan

  • @AlanGDavalos
  • Davalos Alan
  • UIT 室エンジニア

Web Components 概要

  • 現状はバージョン1 4つの仕様を含む
    • HTML Template
    • Custom Elements
    • Shadow DOM
      • Scoped CSSと違いDOMごと分離される
    • ES Modules
      • 元々 HTML imports だった

Web Components の 取り入れ方

  • Web Components の採用案件
    • Ionic など
    • Bootstrap 6 では Web Components の採用が検討されている
  • LitElement
    • Redux なども含まれている フレームワーク
      • 最近のフレームワークを使っていれば問題なく扱える
    • LitHTML との関係性
      • 内部的に LitHTML を使っている React と ReactDOM の関係性
      • 最近 LitElement 2.0 LitHTML 1.0 がリリースされた
        • LitElement というパッケージが既に存在していたためいきなり v2.0 に

未来の Components 開発について

  • Web Components のメリット
    • ShadowDOMの性能が高い
      • CSS を書く時に 何にも影響されない / しない
    • Web標準なので廃れることはない
      • ある程度書き直しが必要になっても 根本的な修正は必要ない
  • Web Components でまず開発し 各フレームワークに展開する
    • Components 開発の標準として

Web Components のこれから

  • ShadowDOM
    • Custom Property でやっているようなところがより簡単になる
  • データの繁栄など JavaScript フレームワークの必要性がなくなっていくことを期待

BGM & SE: 魔王魂

Refs