ホーム自己紹介ブログ
NO.76
DATE2022. 03. 25

WebComponentsでoEmbedのコンポーネントを開発して、学んだこと

WebComponents で、oEmbed コンポーネントを開発し、公開しました。

  • https://www.webcomponents.org/element/Silver-birder/o-embed
  • npmjs.com

開発していく上で、学んだことを列挙しようと思います。

スターターキット

Web Components を開発する場合、次のどちらかのスターターキットを使うのが良さそうです。

  • webcomponents.dev
  • open-wc

これらを使わずとも、Web Components を開発できるのですが、Typescript で書いたり、テストをしたりするには、 それなりに準備が必要です。そのため、開発の初速を高めたいなら、スターターキットを使いましょう。

もしくは、先にスターターキットを使わず素の Javascript だけで Web Components を作ってみて、その後にスターターキットを使うと良さを実感できるかもしれません。

個人的に、open-wc をお勧めします。なぜなら、以下のツールが揃っているからです。

  • Testing
  • Demoing
  • Building
  • Linting

もちろん、Typescript もサポートしています。

キャッチアップ

Web Components ってどういうものなのか、キャッチアップするには MDN のサイトが参考になります。

  • ウェブコンポーネント | MDN

また、日本語で WebComponents(Custom Elements)の仕様書もあります。

  • HTML Standard — Custom elements（日本語訳）

Chrome の中にある Chromium におけるレンダリングエンジン blink の実装コードも、公開されています。

  • chromium/third_party/blink/renderer/core/html/custom/README.md

ベストプラクティス

Google より、Custom Elements のベストプラクティスが公開されています。

Custom Element Best Practices  |  Web Fundamentals  |  Google Developers

例えば

Always accept primitive data (strings, numbers, booleans) as either attributes or properties.

にあるように、プリミティブなデータのみ HTML の属性に渡すようにしましょう。 オブジェクトや配列のようなリッチなデータは、シリアル化する必要がありオブジェクト参照がなくなってしまう欠点があります。

テスト

Web Components のテストを書くには、Shadow DOM に対応する必要があります。 JSDOM のように、ブラウザ API をラップするライブラリを使っても良いのですが、ヘッドレスブラウザを使ったほうが妥当です。 そこで、@web/test-runnerが便利です。 このテストライブラリは、open-wc と同じ Modern Web というモノの 1 つです。 @web/test-runner には、Puppeteer、Playwright、Selenium の 3 つをサポートしています。

Publish

作成した Web Components を Publish したい場合、次の記事を読むと良いです。

Developing Components: Publishing: Open Web Components

特に、してはいけないことを読むと、なるほどな〜ってなります。

❌ Do not optimize
❌ Do not bundle
❌ Do not minify
❌ Do not use .mjs file extensions
❌ Do not import polyfills

詳しくは、上記の記事を読んでください。

終わりに

Web Components をプロダクションレベルで使えるようになりたいなと思います。

フロントエンド
ブラウザ

-

読者になる

|

シェアする

|

silverbirders

silverbirder

Webソフトウェアエンジニア
個人ブログキュレーション こぶりー 運営

ブログを応援する

この記事がよかったら、お布施という形で応援してもらえるとうれしいです。

おふせぼたん

※ ログイン不要で投稿できます。

※ 同じブラウザから投稿を削除できます。

0

読み込み中...

次の記事へ前の記事へ

関連する記事

タグ「フロントエンド」の記事

Webmention 使ってみた

Webmention というのを最近知りました。 名前の通り、Web 上でメンションすることができます。 受信側、送信側、どちらも対応したので感想を残そうと思います。 Webmention ざっくりと Web AサイトにBサイトのリンクをつ

2026年09月08日

フロントエンド
個人開発
モジュールアップデートでやっていること

ITヲタクな AI くんにピッタリな仕事の一つは、モジュールアップデート。 特に、メジャーアップデートが超助かる。 昔だったら 数ヶ月掛かった移行も、数日たらずに対応できるようになったので、 さすが ITヲタクくん。 対応してよかったフロー

2026年07月24日

AI
フロントエンド
写経テストコードを全部消した

以下で書いた通り、プロダクトコードを写経したテストコードを削除しました。 "こぶりー" ( https://kobliy.vercel.app/ ) という個人ブログを読むアプリのコードです。 https://silverbirder.gi

2026年06月08日

AI
フロントエンド
テスト

タグ「ブラウザ」の記事

『Webブラウザエンジニアリング』第1~3章を読みました。

以下の書籍を1から3章まで読みました。 https://www.oreilly.co.jp/books/9784814401574/ 全部で16章もあるので、こまめに感想を残しておこうと思います。 Webの歴史 Web が成り立つ経緯につい

2026年03月20日

書籍レビュー
ブラウザ
iframeの難しさ

最近、iframeを使っています。 クライアントサイドで埋め込む想定で、iframeを使おうとしています。 色々と苦労したことがあったので、書いて残しておこうと思います。 レスポンスヘッダー 前提として、ウェブアプリケーションをプロダクショ

2026年02月18日

フロントエンド
ブラウザ
DuckDB WASMとOPFSでGoogleマイアクティビティをブラウザ完結で可視化してみた

DuckDB WASMとOrigin Private File System (OPFS) を組み合わせ、Google マイアクティビティの履歴をブラウザ内に閉じたまま扱えるようにしたときの設計と学びを整理しました。

2025年09月17日

開発ツール
ブラウザ
← ブログ一覧へ