WebComponentsでoEmbedのコンポーネントを開発して、学んだこと
WebComponents で、oEmbed コンポーネントを開発し、公開しました。
開発していく上で、学んだことを列挙しようと思います。
スターターキット
Web Components を開発する場合、次のどちらかのスターターキットを使うのが良さそうです。
これらを使わずとも、Web Components を開発できるのですが、Typescript で書いたり、テストをしたりするには、 それなりに準備が必要です。そのため、開発の初速を高めたいなら、スターターキットを使いましょう。
もしくは、先にスターターキットを使わず素の Javascript だけで Web Components を作ってみて、その後にスターターキットを使うと良さを実感できるかもしれません。
個人的に、open-wc をお勧めします。なぜなら、以下のツールが揃っているからです。
- Testing
- Demoing
- Building
- Linting
もちろん、Typescript もサポートしています。
キャッチアップ
Web Components ってどういうものなのか、キャッチアップするには MDN のサイトが参考になります。
また、日本語で WebComponents(Custom Elements)の仕様書もあります。
Chrome の中にある Chromium におけるレンダリングエンジン blink の実装コードも、公開されています。
ベストプラクティス
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 をプロダクションレベルで使えるようになりたいなと思います。
-
コメント
0
読み込み中...
シェアする
フォローする
購読する
関連する記事
タグ「フロントエンド」の記事
AI にコードを書かせた後、余計なコードを見つけて消す作業があります。 不毛なことなので、それらの作業を減らすためのお作法を紹介します。 未使用コードを消す 以下でも書きましたが、未使用コードの検査に knip を使うことが多いです。 ht
最近、iframeを使っています。 クライアントサイドで埋め込む想定で、iframeを使おうとしています。 色々と苦労したことがあったので、書いて残しておこうと思います。 レスポンスヘッダー 前提として、ウェブアプリケーションをプロダクショ
紙を積んだイラストをSVGで書こうとしていました。 （当たり前ですが）図形を表現するためには数学の知識が必要で、学生の頃の記憶を思い出したので疲れました。 所感について、諸々書こうと思います。 成果物 実際に完成したのは、以下の画像ができま
2026年02月17日
タグ「ブラウザ」の記事
最近、iframeを使っています。 クライアントサイドで埋め込む想定で、iframeを使おうとしています。 色々と苦労したことがあったので、書いて残しておこうと思います。 レスポンスヘッダー 前提として、ウェブアプリケーションをプロダクショ
DuckDB WASMとOrigin Private File System (OPFS) を組み合わせ、Google マイアクティビティの履歴をブラウザ内に閉じたまま扱えるようにしたときの設計と学びを整理しました。
こんにちは、@silverbirderです。最近、湖県に移住してWebフロントエンドのお仕事をしています。お仕事をしていると、ユーザー体験を良くするためには、大きな改善をせずとも小さな改善だけでも十分な効果があると思い始めました。本記事では、その小さな改善となる、3つのことについて書きたいと思います。