今日から始めるWeb Components

今日から始める Web components

アジェンダ - 自己紹介 - Web Componentsとは - Web Componentsの仕様 -
Web Componentsのつかいどころ - Web Componentsとライブラリ - 実際の書き方

自己紹介林恭央 / Hayashi Takao @www_REM_zzz takao-h Software Engineer
/ Scala, Java, TypeScript

Web Componentsとは？ Web Componentsはwebページやwebアプリの中でカスタムUIの制御の使いまわしを可能にする一連のテクノロジーです。カプセル化された機能をつかってカスタムUIの再利用を実現します。

Web Componentsの仕様 Custom Element : 新しいタイプのDOM要素の設計と利用の基盤 Shadow DOM : カプセル化したスタイルとマークアップの利用法の定義をする
HTML import : HTMLと他のHTMLの取り込みを可能にする HTML Template : マークアップのフラグメントを宣言する

Custom Element

HTML import

HTML Template

Web Componentsとライブラリ各種フロントエンドのライブラリとの共存が一応できる。特にVue.jsでは相性がいい。だが問題もある。 Reactにおいては関数を渡すときに宣言的に書くことができない。

まとめ - Web Componentsはカプセル化を含む一連の技術を使ってカスタムUIの使いまわしを可能にしてれる。 - グローバルなUIの表示に向いている。 - Web Componentsは未来のフロントエンドの実装を表現してくれる。

今日から始めるWeb Components

今日から始めるWeb Components

Hayashi Takao

More Decks by Hayashi Takao

Featured

Transcript