WebComponentsでoEmbedのコンポーネントを開発して、学んだこと
WebComponents で、oEmbed コンポーネントを開発し、公開しました。
- https://www.webcomponents.org/element/Silver-birder/o-embed
- https://www.npmjs.com/package/@silverbirder/o-embed
開発していく上で、学んだことを列挙しようと思います。
スターターキット
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 をプロダクションレベルで使えるようになりたいなと思います。
シェアしよう
関連するタグ
- [覚書]Reactを業務で使い始めて知ったこと
- Ruby on Railsを業務で使って思ったこと
- Reactを学ぶ前に歴史を知る
- オミクロン株に感染したので、分かったことを書く
- TikTokスクレイプ基盤をGCP上で構築してハマったこと
- ブラウザの仕組みを学ぶ
- リモートワークになってから『気軽にすぐ聞く』ことが難しくなった
- 20代後半エンジニアである私がこれから学ぶべきこと
- Micro Frontends を調べたすべて
- アカウント画像一括更新ツールを作ったので、紹介と学びについて
- Micro Frontends を学んだすべて
- TwitterにあるLinkを収集するツール Cotlin で、世界中のプレゼンテーション資料を知ろう
- Google Apps Script で FetchAllとRedirctURL の組み合わせは悪い
- GMailをGCalendarに登録するサービス rMinc を作ってみた
- 1コマ漫画検索サービスTiqav2 (Algolia + Cloudinary + Google Cloud Vision API) 作ってみた
- 技術書典7で初執筆した経験をすべて公開