WebComponents で、oEmbed コンポーネントを開発し、公開しました。
開発していく上で、学んだことを列挙しようと思います。
Web Components を開発する場合、次のどちらかのスターターキットを使うのが良さそうです。
これらを使わずとも、Web Components を開発できるのですが、Typescript で書いたり、テストをしたりするには、 それなりに準備が必要です。そのため、開発の初速を高めたいなら、スターターキットを使いましょう。
もしくは、先にスターターキットを使わず素の Javascript だけで Web Components を作ってみて、その後にスターターキットを使うと良さを実感できるかもしれません。
個人的に、open-wc をお勧めします。なぜなら、以下のツールが揃っているからです。
もちろん、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 つをサポートしています。
作成した 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 をプロダクションレベルで使えるようになりたいなと思います。
-
タグ「フロントエンド」の記事
最近、ヒューマンインターフェース ガイドライン（HIG）という言葉を知りました。 「ヒューマンインターフェイスガイドライン」には、どのAppleプラットフォームでも優れた体験を設計できるようにするためのガイドとベストプラクティスが含まれてい
2026-01-24
主にWeb関連の個人開発をしている際に心がけていることを書きます。 月末に近づくにつれ、AIの利用上限に達してしまうことがあります。 その状況になった時、以下のいずれかの選択肢が私の中では残っています。 課金して利用上限を増やす 無料モデル
個人サイトをリニューアルをしています。 ノート風のデザインを目指して、スタイルを調整していました。 ノートの見た目は、現実にあるノートを再現しようとCSSを書いていました。 現在、以下の画像のようなノートになっています。 ノート風デザインの
2026-01-20
タグ「ブラウザ」の記事
DuckDB WASMとOrigin Private File System (OPFS) を組み合わせ、Google マイアクティビティの履歴をブラウザ内に閉じたまま扱えるようにしたときの設計と学びを整理しました。
こんにちは、@silverbirderです。最近、湖県に移住してWebフロントエンドのお仕事をしています。お仕事をしていると、ユーザー体験を良くするためには、大きな改善をせずとも小さな改善だけでも十分な効果があると思い始めました。本記事では、その小さな改善となる、3つのことについて書きたいと思います。
ブログ記事のOGP画像に、ブログタイトルを入れたい場面があります。その際、タイトルが長い場合は複数行に分けたり、省略したりする必要があります。今回は、試してみてよさそうだった2つの方法を紹介します。
2025-02-06