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 をプロダクションレベルで使えるようになりたいなと思います。

-

読者になる

|

シェアする

|

ブログを応援する

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

おふせぼたん

関連する記事

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

Webフロントエンドのコードレビューメモ2

また、以下の記事の続きを書こうと思います。 https://silverbirder.github.io/blog/contents/20260312/ ビジネスロジック アプリケーションのビジネスロジックに関することについて書きます。 複

2026年03月18日

フロントエンド

Webフロントエンドのコードレビューメモ

Webフロントエンドのコードレビューをしているときに考えていることについて書きます。 毎日1記事投稿、1記事30分という制約を課していますので、本記事は完璧ではありません。(言い訳) また希望的な考えもあるので、実践していないものもあります

2026年03月12日

フロントエンド

AIの書いたコードの手直しを減らすお作法

AI にコードを書かせた後、余計なコードを見つけて消す作業があります。 不毛なことなので、それらの作業を減らすためのお作法を紹介します。 未使用コードを消す 以下でも書きましたが、未使用コードの検査に knip を使うことが多いです。 ht

2026年02月25日

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日

開発ツール

ブラウザ

← ブログ一覧へ