UIT INSIDE

LINE UIT室の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

  • オープニング
    00:00
  • 1. キャスト自己紹介
    00:40
  • 2. Web Components の現状について
    01:33
  • 3. Scoped CSS と shadow DOM の違い
    03:22
  • 4. Web Components の仕様周り
    05:04
  • 5. 最近の事例について
    07:24
  • 6. Framework「LitElement」
    09:41
  • 7. Web Components の利点
    14:18
  • 8. Web Components の展望
    18:05
  • 9. クロージング
    20:08

ep.2 Web Components と Web開発のこれから

2019/02/21
716 views
HANATANI TakumaDavalos Alan

@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: 魔王魂